Folio Templates

Topics

  • Uses for Page Templates
  • Page Templates within the Template Hierarchy
  • Folio Templates Purpose & User Control
  • File Organisation of Page Templates
  • Creating Custom Page Templates for Global Utilize
  • Creating a Custom Folio 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 type of template file that can be practical to a specific page or groups of pages.

Note: Equally of WordPress 4.7 page templates support all mail types. For more than details how to set up a page template to specific mail types encounter example 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 change the look and feel of a page.
  • A page template can be practical to a single page, a page department, or a class of pages.
  • Page templates generally have a high level of specificity, targeting an individual page or grouping of pages. For instance, a page template namedfolio-near.php is more than specific than the template files folio.php or index.php as it volition only affect a page with the slug of "about."
  • If a page template has a template name, WordPress users editing the page take control over what template will exist used to render the folio.

Uses for Page Templates

Page templates brandish your site'south dynamic content on a folio, e.g., posts, news updates, agenda events, media files, etc. Y'all may decide that you desire your homepage to look a specific way, that is quite dissimilar to other parts of your site. Or, you may want to display a featured paradigm that links to a mail service on one role of the page, have a list of latest posts elsewhere, and use a custom navigation. Yous 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-cavalcade
  • two-column with a sidebar on the right
  • two-column with a sidebar on the left
  • three-column

Top ↑

Page Templates inside the Template Bureaucracy

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

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

Alert: There is also a WordPress-defined template namedpaged.php. It isnon used for the page post-type just rather for displaying multiple pages of archives.

Top ↑

Page Templates Purpose & User Control

If yous program on making a custom page template for your theme, you should make up one's mind a couple of things before proceeding:

  • Whether the page template will be for one specific page or for whatever page; and
  • What type of user control yous want available for the template.

Every page template that has a template name tin be selected past a user when they create or edit a page. The list of available templates can be found atPages > Add together New > Attributes > Template. Therefore, a WordPress user can choose any page template with a template proper name, which might not be your intention.

For example, if y'all want to have a specific template for your "About" page, information technology might not be appropriate to proper name that page template "About Template" every bit it would be globally available to all pages (i.due east. the user could use it to any page). Instead, create a unmarried apply 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 accept. 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 fashion the file is named and whether or not is has a specific annotate.

Annotation: Sometimes it is appropriate to have a template globally available even if it appears to be a single utilise case. When you're creating themes for release, it can be hard to predict what a user will proper noun their pages. Portfolio pages are a cracking example as not every WordPress user will name their portfolio the same thing or have the aforementioned page ID and all the same they may desire to apply that template.

Elevation ↑

File Organization of Folio Templates

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

Warning: A specialized folio template file (those created for only 1 fourth dimension apply) 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 Use

Sometimes you lot'll want a template that can be used globally by any page, or by multiple pages.  Some developers volition grouping their templates with a filename prefix, such aspage_two-columns.php

Warning: Of import! Do not use page- as a prefix, every bit WordPress volition interpret the file as a specialized template, meant to apply to merely one page on your site.

For data on theme file-naming conventions and filenames y'all cannot use, encounter reserved theme filenames.

Tip: A quick, safety method for creating a new page template is to make a re-create ofpage.php and requite the new file a distinct filename. That way, y'all commencement off with the HTML structure of your other pages and y'all can edit the new file as needed.

To create a global template, write an opening PHP comment at the top of the file that states the template'southward name.

<?php /* Template Proper name: Case Template */ ?>


It's a good thought to cull a name that describes what the template does as the proper noun is visible to WordPress users when they are editing the folio. For example, yous 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 * * @bundle WordPress * @subpackage Twenty_Fourteen * @since Twenty 14 i.0 */


basics-page-templates-03In one case y'all upload the file to your theme'south folder (e.g., page-templates), become to thePage > Edit screen in your admin dashboard.

On the right manus side underattributesyou'll see template.  This is where users are able to access your global page 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 I Specific Page

As mentioned in the Template Bureaucracy page, you can create a template for a specific page.  To create a template for one specific page, copy your existing page.php file and rename information technology with your page's slug or ID:

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

For example: Your Most folio has a slug of 'nearly' and an ID of 6. If your active theme's binder has a file namedpage-about.php orfolio-6.php, so WordPress will automatically find and use that file to render the About page.

To be used, specialized page templates must be in your theme's binder (i.due east./wp-content/themes/my-theme-name/ ).

Top ↑

Creating page templates for specific post types

By default, a custom folio template will exist available to the "page" mail type.

To create a page template to specific postal service types, add a line nether the template name with the post types you lot would like the template to back up.

Instance:

<?php /* Template Name: Full-width layout Template Postal service Type: post, page, outcome */ // Page code here...

Alert: This ability to add page templates to post types other than "page" postal service type is supported only from WordPress 4.7

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

Backward Compatibility:

Let's say you want to publicly release a theme with support for post type templates. WordPress versions earlier 4.7 will ignore the Template Postal service Type header and bear witness the template in the listing of page templates, even though it only works for regular posts. To forestall that, you can hook into the theme_page_templates filter to exclude it from the list. Here'southward an example:

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

Expand total source codeCollapse full source lawmaking


That manner you tin can support custom post blazon templates in WordPress 4.7 and beyond while maintaining full astern compatibility.

Note that theme_page_templates is actually a dynamic theme_{$post_type}_templates filter. The dynamic portion of the hook name, $post_type, refers to the mail type supported past the templates. Due east.g. you can claw into theme_product_templates to filter the listing of templates for the product post type.

Height ↑

Using Provisional Tags in Page Templates

You tin can make smaller, page-specific changes with Provisional Tags in your theme'southfolio.php file. For case, the beneath case code loads the file header-home.php for your front page, but loads another file (header-about.php) for your Most page, and then applies the defaultheader.php for all other pages.

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


Y'all tin can larn more than about Conditional Tags here.

Height ↑

Identifying a Page Template

If your template uses thebody_class() function, WordPress will print classes in thetorso tag for the post type class proper noun (page), the folio's ID (page-id-{ID}), and the page template used. For the defaultfolio.php, the form name generated ispage-template-default:

<body class="page page-id-6 page-template-default">

Note: A specialized template (page-{slug}.php orpage-{ID}.php) also gets thepage-template-default grade rather than its ain body class.

When using a custom page template, the classpage-template will print, along with a class naming the specific template. For example, if your custom folio template file is named equally follows:

<?php /* Template Name: My Custom Page */ ?gt;


Then so rendered HTML generated volition be as follows:

<trunk class="page folio-id-vi page-template folio-template-my-custom-page-php">


Find the page-template-my-custom-page-php class that is applied to the body tag.

Height ↑

Folio Template Functions

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

  • get_page_template() returns the path of the folio 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 course).
  • is_page_template() returns truthful or fake depending on whether a custom page template was used to render the folio.
  • get_page_template_slug() returns the value of custom field _wp_page_template (null when the value is empty or "default").If a folio has been assigned a custom template, the filename of that template is stored as the value of a custom field named'_wp_page_template' (in thewp_postmeta database tabular array). (Custom fields starting with an underscore practice non display in the edit screen's custom fields module.)