How to create or add custom page templates in wordpress

Getting StartedTheme BasicsTemplate FilesTemplate Files SectionPartial & Miscellaneous Template FilesTheme FunctionalityCore-Supported FeaturesMediaTheme Options – The Customizer APITheme SecurityAdvanced Theme TopicsReleasing Your ThemeReferencesCredits

Page templates are a specific type of template filethat can be applied khổng lồ a specific page or groups of pages.

Bạn đang xem: How to create or add custom page templates in wordpress

Note: As of 4.7 page templates tư vấn all post types. For more details how to mix a page template lớn specific post types see example below.

Page templates are used khổng lồ change the look & 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 havea highlevel of specifithành phố, targeting an individual page or group of pages. For example, a page template namedpage-about.phpis more specific than the template files page.php or index.php as it will only affect a page with the slug of “about.”If a page template has a template name, users editing the page have control over what template will be used lớn render the page.

Uses for Page Templates #Uses for Page Templates

Page templates display yoursite’s dynamic nội dung on a page, e.g., posts, news updates, calendar events, truyền thông files, etc. Youmay decide that you want your homepage lớn look a specific way, that is quite different to otherparts of your site. Or, you may want khổng lồ display a featured image that liên kết khổng lồ a post on one part of the page, have sầu a list of latest posts elsewhere, và use a custom navigation. You can use page templates khổng lồ achievethese 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-columntwo-column with a sidebar on the righttwo-column with a sidebar on the leftthree-column

Top ↑

Page Templates within the Template Hierarchy #Page Templates within the Template Hierarchy

When a person browses to lớn your website, selects which template lớn use for rendering that page. As we learned earlier in theTemplate Hierarchy, looks for template files in the following order:

PageTemplate —If the page has a custom template assigned, looks for that file và, if found, uses—If no custom template has been assigned, looks for and usesa specialized template that contains thepage’s—If a specializedtemplate that includes the page’s slug is not found, looks for và uses a specialized template named with the page’s—If a specialized template that includes the page’s ID is not found, looks for and uses the theme’s default page template.singular.php — If page.php is not found, looks for & uses the theme’s template used for a single post, irregardless of post type.index.php—If no specific page templates are assigned or found, defaults bachồng lớn using the theme’s index file khổng lồ render pages.

Alert: There is also a template namedpaged.php. It isnotused for the page post-type but rather for displaying multiple pages of archives.

Top ↑

Page Templates Purposevà User Control #Page Templates Purposevà 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; andWhat type of user control you want available for thetemplate.

Every page template that has atemplate namecan be selected by a user when they create or edit a page. The menu of available templatescan be found atPages > Add New > Attributes > Template. Therefore, a user can choose any page template with a template name, which might not be your intention.

For example, if you want to have sầu a specific template for your “About” page, it might not be appropriate lớn name that page template “About Template” as itwould be globally available lớn all pages (i.e. the user could apply it to lớn any page). Instead, createa single use templatevà will render the page with the appropriate template, whenever a user visits the “About” page.

Conversely, many themes include the ability khổng lồ choose how many columns a page will have. Each of these options is a page template that is available globally. To give sầu your users this global option, you will need to create page templates for each option & give sầu each a template name.

Dictating whether a template is for global use vs. singular use is achieved by the way the file is named và whether or not is has a specific phản hồi.

Note: Sometimes it is appropriate to lớn have sầu a template globally available even if it appears to be a single use case. When you’re creating themes for release, it can be hard lớn predict what a user will nametheir pages. Portfolio pages are a great example as not every user will name their portfolio the same thing or have sầu the same page ID and yet they may want khổng lồ usethat template.

Top ↑

File Organization of Page Templates #File Organization of Page Templates

As discussed in Organizing Theme Files, recognizes the subfolder page-templates. Therefore, it’s a good idea to lớn store your global page templates in this folder lớn help keep them organized.

Xem thêm: Hướng Dẫn Woocommerce - Hướng Dẫn Cài Đặt Và Kích Hoạt Plugin Woocommerce

Alert: A specialized page template tệp tin (those created for only one time use) cannotbe in a sub-thư mục, nor, if using aChild Theme, in theParent Theme’s thư mục.

Top ↑

Creating Custom Page Templates for Global Use #Creating Custom Page Templates for Global Use

Sometimes you’ll want a template that can be usedglobally by any page, or by multiple pages. Some wpuonline.coms will group their templates with a filename prefix, such aspage_two-columns.php

Alert: Important! Do not use page- as aprefix, as will interpret the file as aspecialized template, meant to lớn apply lớn only one page on your site.

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

Tip: A quichồng, safe method for creating a new page template is to make a copy ofpage.php và give the new tệp tin a distinct filename. That way, you start off with the HTML structure of your other pages and you can edit the new tệp tin as needed.

To create a global template, write an opening PHP. bình luận at the top of the tệp tin that states the template’s name.

It’s a good idea khổng lồ choose a name that describes what the template does as the name is visible to lớn users when they are editing the page. For example, you couldname your templateHomepage, Blog, or Portfolio.

This example from the TwentyFourteentheme creates a page template called Full Width Page:

Once you upload the file to lớn your theme’s folder (e.g., page-templates), go khổng lồ thePage > Editscreenin your admin dashboard.

On the right hand side underattributesyou"ll see template. This is where users are able khổng lồ access your global page templates.

Top ↑

Creating a Custom Page Template for One Specific Page #Creating a Custom Page Template for One Specific Page

As mentioned in theTemplate Hierarchypage, you can create a template for a specific page. To create a template forone specific page, copy your existing page.php file and rename it with your page’s slug or ID:


For example: Your About page has a slug of‘about’and an ID of6. If your active theme’s folder has a file namedpage-about.phporpage-6.php, then will automatically find and use that tệp tin lớn render the About page.

To be used, specialized page templates must be in your theme’s thư mục (i.e./wp-content/themes/my-theme-name/ ).

Top ↑

Creating page templates for specific post types #Creating page templates for specific post types

By mặc định, a custom page template will be availablelớn the “page” post type.

To create a page template to specific post types, add a line under the template name with the post types you would lượt thích the template to lớn tư vấn.


Alert: This ability lớn add page templates khổng lồ post types other than “page” post type is supportedonly from 4.7

When at least one template exists for a post type, the ‘Post Attributes’ meta box will be displayed in the baông chồng over, without the need to add post type support for ‘page-attributes’ or anything else. The ‘Post Attributes’ label can be customzied per post type using the ‘attributes’ label when registering a post type.

Backward Compatibility:

Let’s say you want khổng lồ publicly release a theme with tư vấn for post type templates. versions before 4.7 will ignore the Template Post Type header and show the template in the list of page templates, even though it only works for regular posts. To prsự kiện that, you can hook into lớn the theme_page_templates filter to exclude it from the list. Here’s an example:

param array $post_templates Array of page 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">, "4.7", "
Expand full source codeCollapse full source code

That way you can tư vấn custom post type templates in 4.7 & beyond while maintaining full backward compatibility.

chú ý that theme_page_templates is actually a dynamic theme_$post_type_templates filter. The dynamic portion of the hook name, $post_type, refers lớn the post type supported by the templates. E.g. you can hook inlớn theme_product_templates to filter the list of templates for the product post type.

Top ↑

Using Conditional Tags in Page Templates #Using Conditional Tags in Page Templates

You can make smaller, page-specific changes withConditional Tagsin your theme’spage.php file. For instance, the below example codeloads the tệp tin header-home page.php for your front page, but loads another tệp tin (header-about.php) for your About page, & then applies the defaultheader.php for all other pages.

if ( is_front_page() ) :get_header( "home" );elseif ( is_page( "About" ) ) :get_header( "about" );else:get_header();endif;You can learn more about Conditional Tags here.

Top ↑

Identifying a Page Template #Identifying a Page Template

If your template uses thebody_class()function, will print classes in thetoàn thân tag for the post type class name (page), the page’s ID (page-id-ID), and the page template used. For the defaultpage.php, the class name generated ispage-template-default:

Note: Aspecialized template (page-slug.phporpage-ID.php) also gets thepage-template-defaultclass rather than its own toàn thân class.

Xem thêm: Hướng Dẫn Ghost Win 7 64Bit “Full Driver”, Ghost Win 7 64Bit

When using a custom page template, the classpage-templatewill print, along with a class naming the specific template. For example, if your custom page template tệp tin is named as follows:

Then then rendered HTML generated will be as follows:

Notice the page-template-my-custom-page-phpclass that is applied lớn the toàn thân tag.

Top ↑

Page Template Functions #Page Template Functions

These built-in functions và methods can help you work with page templates:

Chuyên mục: Theme wordpress