wordpress page template

Do you want to define a unique style for every page of your website? Are you going to display some particular information on specific pages? If yes, then WordPress offers you a great opportunity to give wings to your imagination with Page Templates !!

Basically, all the pages of a website have the appearance according to the theme applied. But, you might come across some sites that have different designs for different pages. How is it possible? The simple answer is – Custom WordPress Page templates. The look of a page can be changed easily by applying a different page template. You can also use a WordPress custom page template to serve different purposes. For example, to create a contact page, landing page, displaying a list of archives/authors, embedding a Google script etc. You can extend the power of WordPress endlessly, it just depends on how you customize!!

What is a WordPress Page Template?

The term WordPress Page Template is being repeatedly used. But, what exactly a page template is? It’s a template that tells about the layout of a page. It defines all the design elements for a page to display the site’s dynamic content and changes the look and feels of a page. Also, it can be applied to a single page, group of pages or a page section.

WordPress Page Template Design Methods

In general, a theme treats the page.php file as a default WordPress page template. It includes all the design elements to define any type of content on the page. But, you can easily create custom page template WordPress. You can customize a WordPress custom page template as per your needs to personalize it. There are two reliable methods to create custom page template WordPress as follows

 

  • Coding Method

If you want to create WordPress page template then you need to know some HTML, CSS, and PHP. But, no worries, it’s really easy to create a WordPress page template. Suppose you want a page template having no sidebar, you will follow simple steps for that as follows

1. First, open the text editor like Notepad. Write this code to create a custom page template of name MyCustomPage. It simply tells that this is a template file with name MyCustomPage.

<?php /* Template Name: MyCustomPage */ ?>

2. Now, save this file as MyCustomPage.php. You can use any name for the file.

3. Connect to your website and upload this file into /wp-content/themes/ directory of your current theme. The basic theme used is generally Twenty Sixteen theme.

4. Log into your WordPress dashboard. From the left pane, navigate to Pages → Add New. A new window will open as shown below. On the right side, go to Page Attributes → Template. A drop-down list of existing templates will open. Select MyCustomPage here.

5. Now, Publish this page. You will get a blank page.

6. It’s the time to customize your custom template. For that, go to /wp-contents/themes/YOUR THEME/ folder. Copy the content of page.php file.

custom page template settings wordpress page template

7. Paste this code to MyCustomPage.php file. Save it.

8. The resultant page will look similar to the default page of Twenty Sixteen theme.

9. As you want a page template without sidebar, remove the code that calls the sidebar. Here, you will remove

<?php get_sidebar(); ?>

10. After removing the sidebar, though the sidebar gets removed, an empty space will display at its place.

11. Make the content to fit the full screen. Locate this line of code

<div id="primary" class="content-area">

Replace it with following code

<div id="primary" class="site-content-fullwidth">

Here, the code for site-content-fullwidth CSS will be as follows

.site-content-fullwidth
{
float= left;
width= 100%;
}

Save it.

12. Finally, the whole code of your WordPress custom page template will be as follows

code of wordpress custom page template wordpress page template

13. The final updated page will look as follows

final updated page of custom page template wordpress page template

14. Similarly, you can create more custom page templates by removing header, footer or applying extra sidebars etc.

 

  • Using TemplateToaster

If you don’t have much knowledge of coding, you can use TemplateToaster WordPress Theme Builder. Only some simple mouse clicks to choose required design elements. You will be able to design awesome WordPress page templates with TemplateToaster in no time. Let’s see the step-by-step procedure to create WordPress page templates as follows

1. Download the software & install it. The first screen that you will see after installation as shown below

CMS selection to create page template in TemplateToaster wordpress page template

You make the CMS selection here as TemplateToaster supports all the major CMSs. You will choose WordPress as you want to create a WordPress page template.

2. Next, you will opt for a designing method out of two. Either you will choose a sample template and modify that or go for designing a template from scratch. You will select “Start From Scratch” and click Modify button.

wordpress page template

3. Now, you will see the main interface of software from where you will do all the designing.

main interface of TemplateToaster software wordpress page template

4. Go to Container tab and select a Fluid layout as shown below

select layout of template wordpress page template

5. If you want a page template without header, move to Header tab. Select Header Position → No Header.

header settings wordpress page template

6. Now you will design the menu of your template. Go to Menu tab and set Width as Full Width.

width settings wordpress page template

7. Put the website logo. For that, you can select an image from image gallery by clicking on Logo option. You can also browse a custom logo image of your own.

logo settings wordpress page template

8. Now, customize your menu by selecting typography of menu buttons, margin, padding, background color & much more. You can style it as per your taste from available options.

topography settings wordpress page template

9. If you want to have a slideshow on your page template, move to Slideshow tab. Check the Slide Show box to enable it as shown below

slideshow settings wordpress page template

10. Set the Width of the slideshow as Full Width. Similarly, you can set its Height, Border, Margin, etc.

slideshow width settings wordpress page template

11. Now from Background option, load the different images for your slideshow one by one.

background image settings wordpress page template

12. Now, you will design the content area of your website. Go to the Content tab and uncheck the Page Title option. Put the required content in the selected content column.

content area design settings wordpress page template

13. If you want to add any button, contact form, image etc., double-click on the content area. It will open the Editor tab.

more settings of content area using editor tab wordpress page template

14. You can also add a Click Now button as shown below. Similarly, you can add other elements.

click now button settings wordpress page template

15. In the left pane of the main interface, you will see a Page Templates option. Here, you will find a Page Template as you designed above. In default page template, the Left Sidebar is placed as shown below

sidebar settings in page template wordpress page template

16. If you want a new template, you will click the + option placed on the side of Page Templates option. Name it. Suppose it’s New Template here

new template settings wordpress page template

You will remove the sidebar in this template. For that, select General → Sidebars → None. Similarly, you can place any sidebar or remove it from here.

17. For creating another template without Slideshow, add a new page template from + as above. Suppose you name it Without Slideshow.

without slideshow option settings in slideshow menu wordpress page template

18. Move to Slideshow tab. Just uncheck the Slide Show box here as shown below

more slideshow settings wordpress page template

19. Now, export your theme from File menu as shown below

export settings wordpress page template

20. Log into WordPress dashboard. Navigate to Appearance → Add New → Add Themes. Here, browse your theme exported file and upload it as shown below

browse exported theme wordpress page template

21. Install and Activate it.

installation of theme wordpress page template

22. Here, you will see an option to Import Website Content. Select it by pressing Yes.

importing website content wordpress page template

23. From the left pane of the dashboard, go to Pages → Add New. Here, write the content and apply a page template from Page Attribute in the right pane of the screen as shown below. Suppose, you select pagetemplate_page here.

 pages settings wordpress page template

Your live page with pagetemplate_page will look as shown below. It will have slideshow and sidebar both.

preview of live page with pagetemplate_page wordpress page template

24. Similarly, create a new page using No Sidebar_page template as shown below

creating new page settings wordpress page template

When it goes live, it will look as shown below. It will have no sidebar.

preview of page wordpress page template

25. Create the third page applying without Slideshow_page as shown below

creating third page wordpress page template

Your live page will have no slideshow as shown below

final page preview wordpress page template

So here you have 3 different custom WordPress Page templates that can be used in a WordPress website for suitable pages.

Final Words

Though there are a number of ways to customize WordPress, one of the most effective and reliable methods is a custom page template feature. Creating a WordPress custom page template is really easy. But if you opt coding method, make a copy of the default template file page.php. As if you modify the original file, it will apply on all the pages of the website. So, it’s the best to test your website with sample page template. If it performs good, you can add it to the original. While using TemplateToaster, you need no coding at all. The method you choose entirely depends on your choice. A custom page template with an elegant design and structure demands only the innovation!!

That’s all for now. If you want to share anything or have any queries, post in comment section below.