Back to Top

WordPress Template Hierarchy Tutorial

Learn Wordpress Template Hierarchy

WordPress support very useful concept and In this article, I will cover the deeper understanding of the WordPress Template Hierarchy.Template Hierarchy understanding might be trouble for you especially for novice WordPress Developer.

I am sure most of WordPress developers know about Template Hierarchy. And if not, don’t worry. This article will explain about WordPress Template Hierarchy.Template Hierarchy in WordPress is useful to identify template of each page.Template selection is based on the file name, query string and page type.

WordPress first compares each request from Query String and as per that WordPress determines what type of content requested like search page, category page, the home page, etc.Index.php file is essential because it is also useful when requested page template is missing so the user will be redirected to index.php.

WordPress follow the hierarchy to look for the appropriate file in theme and retrieve the template for the current page as per that.If the file exists,will display that, go for the next template.

First, Let’s see the Template Hierarchy of Home Page

The home Page

WordPress provides two templates to access the homepage.

1. Home.php
2. Front-page.php

Home.php is used when the home page shows the latest blog entries and the second is used admin panel settings set as a static page. You can find out settings section in Settings >> Reading in Admin Panel.

If home.php and index.php files are missing, wordpress load the index.php file.

If Static Page option is selected for Home Page display, WordPress first check for the page.php template and if any specific page is selected from there, WordPress first look for that template.If no file exists, it will use index.php

If you are not clear with above explanation, see below image to visualize the flow.

Template Hierarchy of Home page

Following infographics shows the order of WordPress template of Homepage.

Home Page Template Hierarchy

Now, we will see how Template Hierarchy works for individual pages.

Individual pages

Individual Pages have mainly two templates in WordPress:

1. page.php
2. single.php

Here in WordPress, single.php is especially for article detail page and page.php is mainly for the page.php.But before these two templates, WordPress will search for a specific template.To understand the flow of template, Let’s understand the hierarchy of templates available in WordPress.

In the case of the Post, WordPress have following option

  • single-post.php
  • single.php

And for Custom post types:

  • single-${posttype}.php
  • single.php

Finally, in the case of attachments:

  • ${mimetype}.php
  • ${subtype}.php
  • ${mimetype}_ ${subtype}.php
  • attachment.php
  • single.php

Static pages can have a specific template for the single page:

  • ${custom}.php
  • page.php

Or follow the pattern of the hierarchy:

  • page-${slug}.php
  • page-${id}.php
  • page.php

As always, each time if any of the file from all template hierarchy is not exists, WordPress will look for the file index.php.

Hierarchy for Attachment pages

Archive Template Hierarchy

Archive pages

An archive page is a page that list posts, categories by date, alphabetically, etc. You can implement chronological archive page which may contain specific category, tag or a specific taxonomy which belong to created by a certain author or on a certain date.

For all such cases, WordPress provide the specific template and search according to order. Let’s understand the order of template called by WordPress

ArchiveTemplate
Categoriescategory-${slug}.php
category-${id}.php
category.php
archive.php
Authorauthor-${nicename}.php
author-${id}.php
author.php
archive.php
Post typearchive-${posttype}.php
archive.php
Taxonomytaxonomy-${taxonomy}-${term}.php
taxonomy-${taxonomy}.php
taxonomy.php
archive.php
Tagtag-${slug}.php
tag-${id}.php
tag.php
archive.php
Datedate.php
archive.php

Above is the list of template hierarchy.Let me take the example to explain one of the above hierarchy.Let me take first category archive as an example.

WordPress primarily looks for the category-$slug.php file in the theme folder and if the file does not exist, It will look for the next file which is category-$id.php.Here $id is the category id, again if file not found in the folder, look for the archive.php file.If nothing found, It will use the main theme template index.php

See the below infographic visualize the template flow for archive page.

Hierarchy of Individual Page

Template-Hierarchy-Individual-pages

Comments, 404 and Search Page

You can display popup comment by using a comments_popup_script () function and template file used for the pop-up window is comments-popup.php. When searching something, the search.php template is used.
Search Results Page

  • search.php/404.php
  • index.php

Search.php template is used to display search result and 404.php is used when search string not found. The hierarchy of both is if file not found, will redirect the user to index.php.

You can get entire hierarchical template structure on WordPress site or other sites too.So, In this post, I am not going to show entire template structure here and it is easy to understand hierarchical template structure by dividing into parts.

Hope this article will help to understand the WordPress template structure.If you have any query, post your query on the comment section.

Comments (2)

  1. If home.php and index.php files are missing, wordpress load the index.php file.?

    => If home.php and front-page.php files are missing.

    1. sorry it’s my mistake… it means If home.php and index.php files are missing, wordpress load the front-page.php file 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

What are Lambdas and Closures in PHP?

Posted on 7 years ago

Bhumi

How to create Custom regions in Drupal

Posted on 11 years ago

Bhumi

How to use IndexedDB in HTML5

Posted on 9 years ago

Bhumi

Blank Screen of WordPress Admin Panel

Posted on 12 years ago

Bhumi