Creating Custom Page Templates

Pages are hugely useful when using WordPress as a CMS, and when you’re making a website, it’s not uncommon for two pages to have entirely different layouts. Sometimes an if statement will do the trick; if not, you’ll need a custom page template.

Why use a custom page template?

A custom page template is a file located in your theme directory. With it, you can change the layout of a page or show different content to the standard page template (page.php). You can have an unlimited amount of page templates, and choosing the template you’d like to use for a particular page is as easy as selecting an existing template from a drop-down in the WordPress page editor.

Sometimes it might be unnecessary to create a custom page template. For example, say your page.php file, which is used to render all of the Pages on your website, has a function call that shows social networking icons, like so:

	<?php social_networking_icons(); ?>

Say you had a ‘Contact’ page on this website, and on that ‘Contact’ page you didn’t want to show the social networking icons. You could, of course, create a custom page template called ‘Contact Page’ and not include the social networking icons function call on it. However, a simpler method would simply be to wrap the function call in an if statement which showed the icons if the page you were on was not the ‘Contact’ page, like so:

	<?php if(!is_page('Contact')) {
	   social_networking_icons();
    } ?>

It is often worth considering whether the functionality you desire would be simpler to achieve by using a couple of if statements.

A perfect example of a popular use for a custom page template is a ‘full-width’ page. A vast majority of WordPress templates have two or three columns: one ‘main content’ column where post/page content is held, and one or two sidebars that display widgets and calls to action. Sometimes a user will want to take advantage of the full-width of the container those columns are held within, and choose to omit the sidebar column(s) in favor of increasing the size of the ‘main content’ column. Pages that feature media such as image galleries or videos will often benefit from this type of custom page template.

Creating a custom page template can be a simple or difficult operation, depending on the functionality you intend to achieve. Having a well-coded theme helps; HTML elements are often being opened in one file and closed in another, and if the code isn’t structured or organized well then using custom page templates effectively can become a grueling task!

How to create a custom page template

Note that these changes will affect the layout of your page, so making these changes on a live website could cause users to see errors and anomalies. It is best to practice these changes on a private website, or after putting your website in a maintenance mode. Backing up your data ‘just in case’ is always recommended, too.

All custom page templates must start with the following code. It tells WordPress that the file is a custom page template, and sets the name of the template.

	<?php /* Template name: My Custom Page Template */ ?>

Of course, ‘My Custom Page Template’ can be changed to any name you like!

File Naming Convention

As an aside, it is best practice to name your custom page template files with the prefix ‘page_’ (‘page_contact.php’, ‘page_fullwidth.php’). It groups all of the page templates together in your theme directory.

I think the quickest way to get stuck in to custom page templates is to simply copy the code from your standard page.php file into a new file, and make the new file a custom page template. That way you can modify and delete code and see the affect it has on a page. Let’s do that now!

1. In your code editor, create a new file in the directory of the theme you are currently using. Call it ‘page_test.php’.
2. At the top of the file, insert the following code:

           	<?php /* Template name: Test */ ?>
           

3. Open the existing page.php file within the theme you are currently using.
4. Select all of the code and copy it to the clipboard.
5. Paste the copied code beneath the code you just inserted
6. Save the file. Upload it to your theme directory where applicable.
7. Login to WordPress and edit the page you would like to use to try your new page template on (this can always be reverted, and we won’t be modifying the content of the page itself, so you won’t lose any data saved on the page).
8. Under ‘Page Attributes’ (usually found on the right-hand side of the editor), select ‘Test’ from the ‘Template’ drop-down.
9. Update/Publish your page.

Now when you view your page, it should look exactly the same! That’s because we haven’t done anything to customize our custom page template yet! But it’s good to see that the page is still working. If you get an error, make sure you copied the code correctly.

To confirm that your page is using the new ‘page_test.php’ file rather than ‘page.php’, delete any chunk of code from ‘page_test.php’ (‘the_content();’ is usually a good bit to delete), then save (and upload) it. Refresh the page on your website, and the bit you deleted should be missing. If it us, undo the change you made and save (and upload) again. If not, check that you copied the code from this tutorial and the page.php file correctly.

From here you are open to a world of possibilities! As long as that ‘Template name:’ code stays at the top of the file, you can do what ever you like! Your page template doesn’t have to use WordPress syntax, it could simply be a static HTML template – anything you like!

Creating a ‘full-width’ custom page template

As a bit of a bonus, I will cover the common steps involved in creating a full-width custom page template. These steps may not be accurate based on the code in your theme, but you should be able to get the gist of it.

Start by creating a new file called ‘page_fullwidth.php’. Add the below code to the very top, then copy and paste the code from your ‘page.php’ file below it, as before.

	<?php /* Template name: Full Width */ ?>

I’m going to assume that somewhere within the code in that file is the following:

	get_sidebar(); 

If so, remove it – every instance of it if necessary. If it’s contained within any elements, like divs, which may affect the layout of the page – delete those too. An amount of trial and error is often involved in these things if you didn’t create the theme yourself.

I’m also going to assume that the HTML content of the page begins with a div that has a CSS declaration that sets the width, and perhaps floats it left or right. In the themes I create, usually I would have a div with an id of ‘pagecontent’. ‘left’, ‘content’ or ‘post’ are popular alternatives, but you’ll have to investigate! To that div, add the class ‘fullwidth’. Save (and upload) the file. Don’t forget to also set one of your pages in WordPress to use the template.

Open the ‘style.css’ file in your theme. Preferably in a logical place, but it doesn’t really matter (as long as it doesn’t interfere with any other declarations), add the following code:

	.fullwidth {width: 100%;}

Save (and upload) ‘style.css’, then load the page you assigned the ‘Full Width’ template to. You can go back and adjust the CSS declaration if necessary, but hopefully the column that holds your page content will have expanded to fill a larger space. If it hasn’t, it’s entirely down to how your theme has been written. If you are using a premium theme, it may be worth checking the documentation or contacting the developer. Otherwise, feel free to post troubleshooting queries in the comments below, and I’ll do my best to give you any tips.