Custom Page Template(s) add more flexibility to WordPress. They do not only enhance user experience but also enhance the value of content displayed within them. They make the content stand out from rest of your website.
Do you come across any website which is using Custom page templates ? Want to use on your blog too ?
You have observed that some blogs or websites have different page layouts for a different section of the blog/website. For example : A full with Thank You page or a About Us page with different fonts and color background or a page with specific ads or widget in the sidebar.
Let me tell you the little secret behind this. You can change the design and layout of pages easily by assigning different page templates to them.
How to Select Page template for A Page
You can easily assign a page template for your page right from the page editor. Just look for the “Page Attributes” box in the right sidebar. Usually, it is under the Publish box.
Page Attributes box offers you three options :
1. Choose Parent Page
2. Select Page Template
3. Select Page Order
Click on the Template option and you will be presented with a dropdown list of page template available on your theme. Select the one you want to choose for your page and your page layout will change according to the template you choose.
What is a page template ?
Page Template :
A page template defines the layout of your web-pages and the position of other blog elements ( header, sidebar, footer etc.) around the page.
Generally, what happens, there is a default page template provided in every theme called page.php . Whenever you create a page on your WordPress blog, the default page template is assigned to it.
But not all pages on a blog are similar. Some pages have specific content and information.So by tweaking the layout and design of these pages, you can make them stand out from your regular pages – more unique and more useful. This is where “ Custom Page Template ” comes into the game.
So by tweaking the layout and design of these pages, you can make them stand out from your regular pages – more unique and more useful.
This is where “ Custom Page Template(s) ” comes into the game.
However, some themes come with more than one default page templates, which generally includes a authors-page or full-width page.But if your theme does not have these page templates by default or you want to create more customized page templates for your blog – you can create as many templates as you want.
There are no limits how many templates you can use on your blog.
What is a Custom Page Template
Custom Page Template :
A custom page template is specially designed for a special or certain type of page category.
For example, you can remove sidebar from your contact us page and add a Google map to it or you can show specific sidebar-widgets on a specific page type.
You can create a separate template for your special post-types. By doing this, you can create a unique experience for your users.
Here are some more applications of custom pages :
- Use a different header on a specific page.
- Change the font and background color of a page.
- Add a Google map on your contact us page.
- Create a custom portfolio page.
- Rip-off sidebar from your About Us page.
Tools You Need To Get Started
Before getting started, you need some tools which will be used during the process.
1.) FTP Client ( For example : FileZilla )
2.) Text Editor ( For example : Notepad or TextPad )
OR
1.) Control Panel Access (File Manager ) e.g. – cPanel
A Text editor such as Notepad (Windows) or TextWrangler (Mac) will be used to edit the page template file and FTP client will be used to upload the file to your WordPress theme folder.
However, if your web-hosting company has a control panel which allows you to edit the WordPress database directly, you can use that option instead.
If you are using HostGator hosting on your blog, you can login to their cPanel and navigate to the File Manager tab.You can edit your WordPress content from there.
I suggest you to use a child theme for making customization in your WordPress theme. If you do not use a child theme , you should start using one on your blog.
Do not know what are child themes and why they are so important ?
Read the below article to learn about them in detail.
- Child Themes & Their Importance In Blog Design
How To Create A Custom Page Template ?
Creating a custom page template for your blog is not so difficult as it sounds. You do not have to write the full code for your custom template. You can easily get started by simply copying your default page content and pasting it inside your new custom page template.
Don’t worry I will show you how you can do this – step by step.
First, we will create a template file in WordPress theme directory and after that, we will edit and add content (code) to the template.
Creating A Custom Page Template File
If you are using FTP Method :
1
Open text editor application (like Notepad) on your computer and select a new file.
2
Add the following comment block (code) to the top of the blank file :
This code indicates that this file is a page template and hence help WordPress to recognize it properly.
Your template name can be anything. It’s totally up to you. However, I suggest you, give a logical name to your template.
For example, if you are creating a page template for your Contact Us page simply name it ContactUs. It will help you to easily recognize the right template for the right page.
3
After adding the above code to the file save it as – mycustompage.php. Again, you can save the file by any name but make sure to add a suffix .php – in the end.
4
Now connect to your website using FTP client. Navigate to :
…/wp-content/themes/your-theme
5
Now upload the file to your WordPress theme folder.
If you are using control panel (cPanel)
1
Login to your control panel and navigate to File Manager.
2
Select your domain name directory. Navigate to :
…. /wp-content/themes/your-theme.
3
Now add a new file inside your theme directory. Name it something like : mycustompage.php . As explained above, you can name it anything you want but make sure it ends with a .php extension.
4
Now right click on the new template file and select Edit.
5
Add the following line of code into it :
That’s it, save the file.
At this stage, if you login to your WordPress dashboard and go to>> edit a page or create a new page >> page attributes box >> Template.
You will see your newly created template in the dropdown list.
But if you will assign this template to a page and open that page in the browser – you will see nothing but a blank page.
This is because we did not add any content to our page template and thus WordPress does not understand what to display.
Let’s do it now.
Add/Edit Custom Page Template
As said above, you can start by simply copying the existing default page template of your theme and paste its content in your newly created custom template’s file.
If you are using FTP method :
1
Connect to your FTP client. Go to your theme directory (/wp-content/themes/your-theme).
In your current theme’s folder, look for page.php . Right click on the file and download it to your computer.
2
Now open the downloaded file in any text editor (Notepad or TextPad) .
It will look something like this :-
3
Copy all its content except the header part (at the top) as shown in the below screenshot.
Why we eliminate the header part ?
We remove the header part because we already assign one to our custom template.
That’s why we do not copy the default page header code.
4
Now open your custom page template file in the text editor again and paste it under the header code.
Your template will look something like this :
5
Save the file and upload it back to your theme folder using FTP client.
If you are using control panel :
1
Log in to your control panel and open File Manager.
2
Navigate to : /wp-content/themes/your-theme
3
Find the page .php file and right click on it.
Select Edit.
4
Copy all content except the header part (as shown in above image)
5
Now go to your custom page template >> click edit and paste the content below the header comment.
Hit Save.
If you now go to your browser and visit the page ( which you have assigned your custom page template) you will now see a normal web page instead of blank page. However, this page will look exactly similar to your regular/default pages.
That’s obvious because we simply copy-paste the code from the default template to our custom page template.
Now let’s say, you want to remove sidebar from that page. You can do this by simply eliminating the following line of code from your custom page template :
After removing the above comment save your changes.
Now again visit your page( created with custom page template). This time, you will see that there is no sidebar on the web page. This is a simple example.Similarly, you can remove or add elements to your custom page templates.
For example, you can embed an opt-in form or subscription form below the page content. In that way, every page created with your custom page template will have a subscription form under the page content.
Same is the case with custom fields. Just add the custom field function inside a page template to call-out the specific custom field. Now every time you assign that template to a page, you will see the respective function on that page.
We have covered almost every basic detail about custom page template(s), their uses & creation, yet if you still have any doubt about any part of this tutorial, you can always drop a comment below.
If you found this article helpful – Do like and share my efforts.
You can also connect us on Facebook or Circle-us on Google+.
The post How To Create Custom Page Template(s) In WordPress For Your Blog appeared first on WPBlogCafe.
