Understanding Custom Page Templates on WordPress

When it comes to customization and creative efforts, WordPress likes to give as much free reign to its users as it can. There’s just so much you can do with a bit of code and time, it’s incredible. In fact, one of the ways to dramatically alter a webpage’s design is also one of the easiest. It’s called a custom page template, and it’s easy to make one of your own.

Understanding Custom Page Templates on WordPress

A template (custom or otherwise) controls and changes the way a page from your WordPress site is displayed on the web. In the Page Content type, you click on Single Page, and a box offers you some Templates to choose from, taken from currently active Theme’s (or its Parent’s) directory.

Now let’s understand the why’s and how’s.

Why would you create a custom page template?

Page styles are controlled by templates. All WordPress themes usually contain a template in their directory called ‘page.php’. The template controls how content is displayed on your page and which design elements are allowed around them. Many theme developers use this to create the default page template of their custom theme. For instance, the default ‘page.php’ template contains elements like header, footer, sidebar, etc. It’s set on default because that’s basically all that is needed to display content on WordPress site page.

You might want to change things up a bit.

Creating a unique custom page template essentially gives you free reign to do exactly that. You can extend, hide, remove, and generally change what is displayed. For instance: You want to change the font used in the header, but only for a single (say, About Me) page. You can create a custom page template, install it, then go to your About Me page and choose that template. Easy as pie, isn’t it?

The possibilities are endless depending on how much customization you want to do. You can create an Index page with the archives template; you can put the sidebar left or right or remove it altogether; you can create a home page with nothing but grids. The sky is the limit.

How to make a custom template?

Believe it or not, custom templates are actually some of the easiest things you’ll be making while designing your own theme.

Step 1: In your Theme directory, add a new file with a name of your choice.


Note: Make sure you don’t use a name already taken by one of the files in template hierarchy.

Step 2: Start the template like this:



Template Name: My_very_own_template



This is my custom template.

This gives you a template which shows up in your Page Attributes as ‘My_Very_Own_Template’, and shows on the web with nothing but a very simple HTML text “This is my custom template.”

Suppose we want to create a custom template with no sidebars. I know it’s already out there (thanks WordPress Twenty Twelve Theme!), but for the sake of this tutorial, let’s assume it isn’t.

1.      You start by opening page.php, which looks like this:

 * The template intended for displaying all pages
 * This is the template that always displays all pages by default.
 * You must note down that this is the WordPress construct of all page
 * And those other pages on your WordPress website will use a different template
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
get_header(); ?>
    <div id=”primary” class=”site-content”>
        <div id=”content” role=”main”>
            <?php while ( have_posts() ) : the_post(); ?>
                <?php get_template_part( ‘content’, ‘page’ ); ?>
                <?php comments_template( ”, true ); ?>
            <?php endwhile; // end of the loop. ?>
        </div><!– #content –>
    </div><!– #primary –>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

2.      Paste the code in a new text file:

To remove sidebars, we remove the second last line of the code:


<?php get_sidebar(); ?>


3.      Add comment to top of code:



Template Name: Page with no sidebar



This is so that WordPress recognizes the file as a template.


4.      Save file

Now save this new text file as Page with no sidebar.php in currently active theme’s directory.


And you’re basically done. The resultant template, when used, will show exactly like the default page.php but without the sidebar. And there’s so much more you can do. Your imagination and coding prowess can take you anywhere after the first 5 lines of code.


Naming your Custom Page Templates:

WordPress has a template hierarchy, which is a really smart way to ensure maximum scope for customization while still playing by the rules.

WordPress Template Hierarchy will display available templates for any page in a specific order.

  • Custom Template

  • Page-[slug].php

  • Page-[ID].php

  • php

  • php

Understanding this hierarchy is important, because it’s basically the key concept that you’ll need to cover in order to be able to design or modify a WordPress theme. This hierarchy means that custom page template will always be displayed for a page if it has been assigned.

If not, it goes to the second best thing: Page-[slug]. For example, if your page uses the permalink ‘Crayons’, then a template named page-[crayons].php will always be listed in the page settings. If no slug can be matched, it will look by page ID. So if your page ID is 26, the template page-[26].php will be listed. And so on.

A lot of theme developers simply name their templates as page-name.php. As we discussed above, this may cause the wrong template to show up. This is rare, and if it does happen you can always change the name to avoid conflict.


A last bit of advice: It’s faster, safer, easier, and generally better to just take the code from one of templates in the hierarchy, pasting in your custom template file, and altering it. Choose one which is closest to your specifications. Just don’t forget to change top of the code so your template actually shows upon the page to be chosen.

Good luck!

Leave a Reply