Page Templates

Topics

  • Uses for Page Templates
  • Page Templates within the Template Bureaucracy
  • Page Templates Purpose & User Control
  • File System of Page Templates
  • Creating Custom Folio Templates for Global Employ
  • Creating a Custom Page Template for One Specific Page
  • Creating page templates for specific post types
  • Using Conditional Tags in Page Templates
  • Identifying a Page Template
  • Page Template Functions

Page templates are a specific blazon of template file that can be applied to a specific page or groups of pages.

Note: Every bit of WordPress 4.7 page templates support all post types. For more than details how to set a page template to specific post types see case below.

Since a page template is a specific type of template file, here are some distinguishing features of page templates:

  • Page templates are used to modify the await and feel of a page.
  • A page template tin be practical to a single page, a folio section, or a course of pages.
  • Page templates generally have a high level of specificity, targeting an individual page or grouping of pages. For example, a page template namedpage-about.php is more specific than the template files page.php or index.php as it will only bear upon a page with the slug of "virtually."
  • If a page template has a template name, WordPress users editing the folio accept command over what template volition be used to render the page.

Uses for Page Templates

Page templates display your site'southward 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, y'all may want to brandish a featured image that links to a mail service on 1 office of the page, have a list of latest posts elsewhere, and use a custom navigation. You can utilise page templates to attain these things.

This department shows you how to build page templates that tin be selected by your users through their admin screens.

For example, yous tin can build page templates for:

  • total-width, ane-column
  • two-cavalcade with a sidebar on the right
  • ii-column with a sidebar on the left
  • three-column

Height ↑

Page Templates within the Template Hierarchy

When a person browses to your website, WordPress selects which template to apply for rendering that page. As we learned before in the Template Hierarchy, WordPress looks for template files in the following order:

  1. Page Template — If the page has a custom template assigned, WordPress looks for that file and, if constitute, uses information technology.
  2. page-{slug}.php — If no custom template has been assigned, WordPress looks for and uses a specialized template that contains the page's slug.
  3. page-{id}.php — If a specialized template that includes the page'southward slug is not found, WordPress looks for and uses a specialized template named with the folio's ID.
  4. page.php — If a specialized template that includes the folio's ID is non establish, WordPress looks for and uses the theme'south default page template.
  5. singular.php — If page.php is not constitute, WordPress looks for and uses the theme'due south template used for a unmarried post, irregardless of post type.
  6. index.php — If no specific page templates are assigned or found, WordPress defaults back to using the theme'due south index file to render pages.

Alert: At that place is also a WordPress-divers template namedpaged.php. It isnot used for the page post-type but rather for displaying multiple pages of archives.

Elevation ↑

Page Templates Purpose & User Control

If you plan on making a custom folio template for your theme, you should decide a couple of things earlier proceeding:

  • Whether the page template will be for i specific page or for any page; and
  • What type of user command you lot desire available for the template.

Every page template that has a template name tin can exist selected by a user when they create or edit a folio. The list of available templates can be plant atPages > Add New > Attributes > Template. Therefore, a WordPress user tin cull any page template with a template name, which might not be your intention.

For example, if you lot want to have a specific template for your "About" folio, information technology might non be appropriate to proper name that page template "Near Template" as it would exist globally available to all pages (i.eastward. the user could apply information technology to any page). Instead, create a single utilise template and WordPress will render the page with the appropriate template, whenever a user visits the "Almost" page.

Conversely, many themes include the ability to choose how many columns a page will have. Each of these options is a folio template that is available globally. To give your WordPress users this global option, you will need to create page templates for each option and requite each a template name.

Dictating whether a template is for global utilize vs. singular apply is achieved by the way the file is named and whether or not is has a specific comment.

Annotation: Sometimes it is appropriate to have a template globally available even if it appears to be a unmarried use case. When you're creating themes for release, it can exist hard to predict what a user will name their pages. Portfolio pages are a great instance as not every WordPress user will proper name their portfolio the same affair or have the same page ID and yet they may desire to utilise that template.

Acme ↑

File System of Page Templates

As discussed in Organizing Theme Files, WordPress recognizes the subfolder page-templates. Therefore, it's a practiced idea to shop your global page templates in this folder to help keep them organized.

Alert: A specialized page template file (those created for only in one case use) cannot be in a sub-folder, nor, if using a Child Theme, in the Parent Theme's folder.

Height ↑

Creating Custom Page Templates for Global Employ

Sometimes yous'll want a template that tin can exist used globally by whatever folio, or by multiple pages.  Some developers volition grouping their templates with a filename prefix, such aspage_two-columns.php

Warning: Important! Do not utilise page- as a prefix, every bit WordPress will interpret the file as a specialized template, meant to use to only i page on your site.

For information on theme file-naming conventions and filenames you cannot use, see reserved theme filenames.

Tip: A quick, safe method for creating a new page template is to make a copy offolio.php and give the new file a singled-out filename. That way, you start off with the HTML structure of your other pages and you can edit the new file as needed.

To create a global template, write an opening PHP annotate at the height of the file that states the template'south proper name.

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


It'south 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 lot could name your template Homepage, Blog, or Portfolio.

This instance from the TwentyFourteen theme creates a folio template called Full Width Page:

<?php /** * Template Name: Full Width Folio * * @bundle WordPress * @subpackage Twenty_Fourteen * @since Xx Fourteen 1.0 */


basics-page-templates-03Once you upload the file to your theme's folder (e.chiliad., folio-templates), become to thePage > Edit screen in your admin dashboard.

On the right manus side underattributesyou'll meet template.  This is where users are able to access your global folio templates.

Tip: The select list has a maximum width of 250px, so longer names may be cut off.

Top ↑

Creating a Custom Page Template for One Specific Folio

As mentioned in the Template Hierarchy page, you tin create a template for a specific page.  To create a template for one specific page, copy your existing folio.php file and rename it with your page's slug or ID:

  1. page-{slug}.php
  2. folio-{ID}.php

For example: Your About page has a slug of 'almost' and an ID of vi. If your active theme's binder has a file namedfolio-almost.php orpage-half dozen.php, then WordPress volition automatically find and use that file to render the About page.

To exist used, specialized folio templates must be in your theme's folder (i.e./wp-content/themes/my-theme-name/ ).

Top ↑

Creating page templates for specific post types

By default, a custom page template will be available to the "page" post type.

To create a page template to specific post types, add a line under the template name with the mail types you would similar the template to support.

Example:

<?php /* Template Name: Full-width layout Template Postal service Type: post, page, event */ // Folio lawmaking here...

Alarm: This ability to add together folio templates to post types other than "folio" post type is supported only from WordPress 4.7

When at least 1 template exists for a mail type, the 'Post Attributes' meta box will be displayed in the back end, without the need to add mail service blazon back up for 'page-attributes' or anything else. The 'Post Attributes' characterization can be customzied per post blazon using the 'attributes' label when registering a mail service blazon.

Backward Compatibility:

Let's say y'all want to publicly release a theme with back up for post type templates. WordPress versions earlier four.seven volition ignore the Template Post Type header and evidence the template in the listing of page templates, even though information technology simply works for regular posts. To prevent that, yous can hook into the theme_page_templates filter to exclude it from the listing. Here'south an example:

/** * Hides the custom post template for pages on WordPress 4.six and older * * @param array $post_templates Array of folio templates. Keys are filenames, values are translated names. * @return array Filtered array of page templates. */ function makewp_exclude_page_templates( $post_templates ) { if ( version_compare( $GLOBALS['wp_version'], 'four.7', '<' ) ) { unset( $post_templates['templates/my-full-width-post-template.php'] ); } render $post_templates; } add_filter( 'theme_page_templates', 'makewp_exclude_page_templates' );

Expand full source codeCollapse full source code


That way you can back up custom post type templates in WordPress iv.7 and across while maintaining full backward compatibility.

Annotation that theme_page_templates is actually a dynamic theme_{$post_type}_templates filter. The dynamic portion of the claw name, $post_type, refers to the postal service type supported by the templates. E.g. you tin hook into theme_product_templates to filter the listing of templates for the production postal service type.

Top ↑

Using Provisional Tags in Page Templates

You tin brand smaller, page-specific changes with Conditional Tags in your theme'spage.php file. For instance, the below instance code loads the file header-home.php for your forepart page, only loads another file (header-about.php) for your Nigh page, and and so applies the defaultheader.php for all other pages.

if ( is_front_page() ) : get_header( 'home' ); elseif ( is_page( 'About' ) ) : get_header( 'almost' ); else: get_header(); endif;


Y'all tin acquire more than virtually Conditional Tags hither.

Top ↑

Identifying a Page Template

If your template uses thebody_class() function, WordPress volition impress classes in thebody tag for the mail type course name (page), the folio's ID (page-id-{ID}), and the page template used. For the defaultpage.php, the course name generated ispage-template-default:

<body class="page folio-id-half-dozen page-template-default">

Note: A specialized template (page-{slug}.php orpage-{ID}.php) as well gets thefolio-template-default course rather than its own trunk class.

When using a custom page template, the gradepage-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 Proper noun: My Custom Page */ ?gt;


Then then rendered HTML generated volition be equally follows:

<body class="page page-id-6 folio-template page-template-my-custom-page-php">


Notice the page-template-my-custom-page-php course that is applied to the body tag.

Height ↑

Page Template Functions

These built-in WordPress functions and methods can help you work with page templates:

  • get_page_template() returns the path of the page template used to render the page.
  • wp_get_theme()->get_page_templates() returns all custom page templates available to the currently active theme (get_page_templates() is a method of the WP_Theme class).
  • is_page_template() returns truthful or simulated depending on whether a custom page template was used to render the page.
  • get_page_template_slug() returns the value of custom field _wp_page_template (null when the value is empty or "default").If a page has been assigned a custom template, the filename of that template is stored every bit the value of a custom field named'_wp_page_template' (in thewp_postmeta database table). (Custom fields starting with an underscore do non display in the edit screen's custom fields module.)