Page Templates in WordPress Themes
Page templates are a specific type of template file that can be applied to a specific page or groups of pages.
Since a page template is a specific type of template file, here are some distinguishing features of page templates:
- Page templates only apply to pages, not to any other content type (like posts and custom post types).
- Page templates are used to change the look and feel of a page.
- A page template can be applied to a single page, a page section, or a class of pages.
- Page templates generally have a high level of specificity, targeting an individual page or group of pages. For example, a page template named
page-about.phpis more specific than the template filespage.phporindex.phpas it will only affect a page with the slug of “about.” - If a page template has a template name, WordPress Themes users editing the page have control over what template will be used to render the page.
Uses for Page Templates
Page templates display your site’s dynamic content on a page, e.g., posts, news updates, calendar events, media files, etc. You may decide that you want your homepage to look a specific way, that is quite different to other parts of your site. Or, you may want to display a featured image that links to a post on one part of the page, have a list of latest posts elsewhere, and use a custom navigation. You can use page templates to achieve these things.
This section shows you how to build page templates that can be selected by your users through their admin screens.
For example, you can build page templates for:
- full-width, one-column
- two-column with a sidebar on the right
- two-column with a sidebar on the left
- three-column
Page Templates within the Template Hierarchy
When a person browses to your website, WordPress themes selects which template to use for rendering that page. As we learned earlier in the Template Hierarchy, WordPress themes looks for template files in the following order:
- Page Template — If the page has a custom template assigned, WordPress looks for that file and, if found, uses it.
page-{slug}.php— If no custom template has been assigned, WordPress looks for and uses a specialized template that contains the page’s slug.page-{id}.php— If a specialized template that includes the page’s slug is not found, WordPress looks for and uses a specialized template named with the page’s ID.page.php— If a specialized template that includes the page’s ID is not found, WordPress looks for and uses the theme’s default page template.index.php— If no specific page templates are assigned or found, WordPress defaults back to using the theme’s index file to render pages.
Note: There is also a WordPress-defined template named paged.php. It is not used for the page post-type but rather for displaying multiple pages of archives.
Page Templates Purpose & User Control
If you plan on making a custom page template for your theme, you should decide a couple of things before proceeding:
- Whether the page template will be for one specific page or for any page; and
- What type of user control you want available for the template.
Every page template that has a template name can be selected by a user when they create or edit a page. The list of available templates can be found at Pages > Add New > Attributes > Template. Therefore, a WordPress user can choose any page template with a template name, which might not be your intention.
For example, if you want to have a specific template for your “About” page, it might not be appropriate to name that page template “About Template” as it would be globally available to all pages (i.e. the user could apply it to any page). Instead,create a single use template and WordPress will render the page with the appropriate template, whenever a user visits the “About” page.
Conversely, many themes include the ability to choose how many columns a page will have. Each of these options is a page template that is available globally. To give your WordPress users this global option, you will need to create page templates for each option and give each a template name.
Dictating whether a template is for global use vs. singular use is achieved by the way the file is named and whether or not is has a specific comment.
Creating Custom Page Templates
Sometimes you’ll want a template that can be used globally by any page, or by multiple pages. Some developers will group their templates with a filename prefix, such as page_two-columns.php
Do not use page- as a prefix, as WordPress themes will interpret the file as a specialized template, meant to apply to only onepage on your site.
To create a global template, write an opening PHP comment at the top of the file that states the template’s name.
<?php /* Template Name: Example Template */ ?>
It’s a good idea to choose a name that describes what the template does as the name is visible to WordPress users when they are editing the page. For example, you could name your template Homepage, Blog, or Portfolio.
This example from the TwentyFourteen theme creates a page template called Full Width Page:
<?php /** * Template Name: Full Width Page * * @package WordPress * @subpackage Twenty_Fourteen * @since Twenty Fourteen 1.0 */
Once you upload the file to your theme’s folder (e.g., page-templates), go to the Page > Edit screen in your admin dashboard.
On the right hand side under attributes you’ll see template. This is where users are able to access your global page templates.
Identifying a Page Template
If your template uses the body_class() function, WordPress will print classes in the body tag for the post type class name (page), the page’s ID (page-id-{ID}), and the page template used. For the default page.php, the class name generated is page-template-default:
<body class="page page-id-6 page-template-default">
When using a custom page template, the class page-template will print, along with a class naming the specific template. For example, if your custom page template file is named as follows:
<?php /* Template Name: My Custom Page */ ?>
Then then rendered HTML generated will be as follows:
<body class="page page-id-6 page-template page-template-my-custom-page-php">
Notice the page-template-my-custom-page-php class that is applied to the body tag.
Using Conditional Tags in Page Templates
You can make smaller, page-specific changes with Conditional Tags in your theme’s page.php file. For instance, the below example code loads the file header-home.php for your front page, but loads another file (header-about.php) for your About page, and then applies the default header.php for all other pages.
if ( is_front_page() ) : get_header( 'home' ); elseif ( is_page( 'About' ) ) : get_header( 'about' ); else: get_header(); endif;
