This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

Understanding WordPress Template Hierarchy for Faster Development

Updated on December 17, 2021

5 Min Read
wordpress template hierarchy

Creating a WordPress theme is no rocket science. You can quickly delve into WordPress theme development if you start with the basics. But before you engulf into the hardcore development stuff, you must understand the WordPress template hierarchy and WordPress theme hierarchy.

The pages on a WordPress website are built using a single template file or a combination of template files requested on a particular web page area.

The WordPress template hierarchy files reside in the wp-content/themes/theme-name folder. There are a lot of WordPress template structure files, but only two files are necessary for a WordPress theme to function, they are index.php and style.css.

A few examples of WordPress template hierarchy files are:

  1. Index.php
  2. Sidebar.php
  3. Header.php
  4. footer.php

Also, functions.php (not considered a template file) is a required file containing functionalities of a theme. We can use various template files within the WordPress theme hierarchy to add a more custom look to our website and feel.

First, to understand how it renders a page and moves up the WordPress template hierarchy, consider this example.

A visitor visits a testimonials page on your WordPress site, and you have made a custom page template known as page-testimonials.php; WordPress will then load page-testimonials.php.

If, however, page-testimonials.php doesn’t exist, then WordPress will fall back and load page.php, and if page.php doesn’t exist in theme files, then WordPress will load the index.php.

I will break down the template files into sections so that it is easier to understand their purpose and where they are used.

Basic WordPress Template Hierarchy

The basic WordPress page hierarchy includes:

  • index.php
  • header.php
  • footer.php
  • sidebar.php
  1. index.php

As I mentioned earlier, index.php is amongst one template file in the WordPress page hierarchy necessary for a WordPress theme to function. index.php is most commonly used to render the home page of a WordPress theme. Whenever a template file doesn’t exist, e.g., single.php or post.php, then WordPress loads the index.php.

The index.php usually contains other template files like header.php, footer.php, and sidebar.php, which includes the head section of the site, the footer area, and sidebars with widget areas, respectively. It also includes a loop that displays the posts or pages on the template.

  1. header.php

The header.php contains the head section of a WordPress site, and it is commonly called at the start of all the template files. It usually contains the header information, analytics, calls to CSS files, site navigation, page titles, site logo, etc.

  1. footer.php

Similarly, footer.php in a file in the WordPress page hierarchy is used to build the footer section of a WordPress theme and called in the footer section of all the template files. The footer.php generally contains the copyright information, calls to JS files, widget areas that commonly have site navigation.

  1. sidebar.php

Whereas the sidebar.php, as the name suggests, is used to build the sidebar of a site and is called in template files like index.php, page.php, single.php to call in the sidebar. It generally contains widget areas for easy customization.

Homepage Display Pages

  1. front-page.php
  2. home.php
  3. page.php
  4. index.php

Homepages of WordPress sites display either the latest blog posts or a static page. It depends on the settings under the WordPress Dashboard Settings -> Reading.

If it is set to the latest posts, it will display the latest blog posts on the home page, and when it is set to a static page, it will load a template from the WordPress template hierarchy such as page.php or front-page.php.

If front-page.php exists, WordPress will use this template file for both the settings “latest blog posts” and “static page.” The home.php will be loaded if front-page.php doesn’t exist and “latest blog posts” are set in the reading settings of WordPress.

If in Settings -> Reading a static page with posts page is selected, WordPress will look for the page.php template to render the homepage.

If front-page.php, page.php, and home.php don’t exist, WordPress will fall back to index.php to render the homepage.

Single Post Pages

  • single.php
  • singular.php
  1. single.php

In WordPress, single blog posts are rendered using the single.php file. In WordPress version 4.3 and up, a new WordPress template file, singular.php, was added.

For WordPress custom post types we can use single-{post-type}.php. E.g., our post type is animals, then WordPress will look for single-animals.php, and it will take precedence over single.php. If the post-type file doesn’t exist, it will use single.php to render the page.

  1. singular.php

The singular.php is used in cases where page.php and single.php generally have the same code. If single.php doesn’t exist, then WordPress will look for singular.php.

Static Pages

Pages are rendered in the following order:

  1. page templates
  2. page-{slug}.php
  3. page-{id}.php
  4. page.php
  5. singular.php
  6. index.php

As stated above, if we want to have a similar look for single.php and page.php, then it is better to create a singular.php.

Archive Pages

  1. author.php
  2. category.php
  3. taxonomy.php
  4. date.php
  5. tag.php
  6. archive.php

Archive pages in WordPress are those pages that are used to grab posts from specific authors, categories, taxonomies, dates, tags, and so on.

We can have a single archive template, that is, archive.php. But to drill down into more templates, we have author.php, category.php, taxonomy.php, date.php, tag.php, and all of them are pretty self-explanatory.

We can further make customized templates, e.g.

  • category-{slug}.php – if the slug of a category is cute-kittens, then WordPress will look for category-cute-kittens.php; if it doesn’t exist, category.php will be used.
  • category-{id}.php – if id = 3, then WordPress will look for category-3.php to render the page. Else it will load category.php

Similar theory of {slug} and {id} applies to “Tag” page

For custom Author templates we can use author-{nicename}.php or author-{id}.php. If the author’s name is Andy, WordPress will look for author-andy.php; if it doesn’t exist, WordPress will fall back to author.php to render the page.

Other WordPress Template Files

search.php

Search results in WordPress use the template file search.php. If it doesn’t exist, then search results are rendered from index.php.

attachment.php

This template file is used to render attachment pages, such as images and videos. image.php and video.php are used to render photos and videos, respectively. If these files don’t exist, then attachment.php is used.

404.php

Not found pages in WordPress are rendered from 404.php. If the 404 doesn’t exist, it renders the page from index.php.

comments.php

It is a template of comments; it is called in template files like single.php or page.php to add the comments section.

Final Words

Understanding the WordPress template hierarchy is beneficial if you want to develop custom WordPress themes and customize the WordPress theme file structure. You will have an easy time finding the right template files to edit and customize.

The good thing about WordPress template hierarchy is that it follows a strict naming convention. It makes it a breeze to create WordPress themes once you get a hold of them. You can refer to the WordPress theme hierarchy for a quick and visual reference for theme development.

Q. What is the WordPress template hierarchy?

WP Template Hierarchy is the order in which your template files are loaded on your WordPress website. This helps WordPress search for files to determine when to load which file on your browser.

Q. Why does the WordPress template hierarchy exist?

WP Template hierarchy makes it easier for WordPress developers to design and change their themes.

Q. What are WordPress template files?

WordPress template files are used to design and create WordPress pages. Some examples of template files are headers and footers.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Customer Review at

“Beautifully optimized hosting for WordPress and Magento”

Arda Burak [Agency Owner]

Ahsan Parwez

Ahsan is the Community Team Manager at Cloudways - A Managed Cloud Hosting Platform. He loves to solve problems and help Cloudways' clients in any aspect he can. In his free time, you can find him playing RTS PC games.

×

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!