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 September 29, 2022

8 Min Read
main

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

And this blog teaches the basics of template hierarchy, its structure, important WordPress template files, and how it all works in great detail. So keep reading to know all about WordPress template hierarchy.

Want to create an aesthetic WordPress theme?

Learn WordPress Template Hierarchy and try Cloudways managed hosting for a hassle-free theme development experience.

What Is WordPress Template Hierarchy?

Since WordPress is a dynamic site, each component has a template, which can vary depending on the theme.

Whenever a query is generated, WordPress loads a page corresponding to that query. This query travels through the template hierarchy to give the desired output.

So, the template hierarchy is a system used by WordPress to determine the order of template files required to display the selected webpage on your website.

Structure of WordPress Template Hierarchy

The following diagram shows which template files are called to generate a WordPress page based on the template hierarchy.

Structure of WordPress Template Hierarchy

Source: WordPress.ORG

WordPress Template Hierarchy Based on Page Type

Most WordPress websites use seven types of pages, as follows:

  1. Front page template files
  2. Single posts
  3. Single pages
  4. Custom post types
  5. Search result pages
  6. Category and tag pages
  7. 404 error pages

In this section, we will discuss the template hierarchy of each page.

Front Page

Your front page is the first landing spot for users. Although the front page layouts vary from site to site, they follow the basic theme. This implies whenever a query string related to the front page is generated, the following files load in order:

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

Front Page

If your theme doesn’t have front-page.php, WordPress will load the second in the order and so forth. When there is no template file, WordPress returns index.php, which is the final stop for every query in the template hierarchy.

Single Posts

The individual articles are considered single posts and use a single post template hierarchy.

The template hierarchy for single posts can be complex depending on your customization options. However, the basic template hierarchy for single posts is as follows:

  1. Single.php
  2. Singular.php
  3. Index.php

Single Posts

Single Pages

Similar to single posts, single-page templates can have a complex template hierarchy. The basic template hierarchy of single pages is as follows:

  1. Page.php
  2. Singular.php
  3. Index.php

Single Pages

Custom Post Types

WordPress lets you create custom post types for your website to give a unique touch to your brand. Custom post types help keep your customers glued to the site and have their own template hierarchy, described in the following order:

  1. archive-{post_type}.php
  2. archive.php
  3. Index.php

Custom Post Types

Although the template hierarchy for custom post types is simple, you can add more elements to it depending upon your own customization levels. Moreover, you can also create a custom page template in WordPress themes.

Search Result Pages

Almost every WordPress site comes with a search feature. The search results page follows a simple template hierarchy, depicted as below:

  1. Search.php
  2. Index.php

Search Result Pages

Category and Tag Pages

WordPress generates collective pages for tags and categories. Category and tag pages can involve many elements, with their own template hierarchy. This is why the template hierarchy of category and tag pages can be versatile and complex.

Here’s how the basic templates of the category page look:

  1. category–{slug}.php
  2. category-{id}.php
  3. category.php
  4. archive.php
  5. index.php

category page

Whereas the basic templates of the tag page look as follows:

  1. tag–{slug}.php
  2. tag-{id}.php
  3. tag.php
  4. archive.php
  5. Index.php

tag page

404 Error Pages

Whenever users try to access a page that doesn’t exist, WordPress returns a 404 error page. Although there isn’t much you can change on the page; you can still customize the template per your needs.

The 404 error page template hierarchy is fairly simple and looks as follows:

  1. 404.php
  2. Index.php

404 Error Pages

What Are Some Important WordPress Template Files?

You can include some WordPress files in almost all page templates, and they are as follows:

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

Important WordPress Template Files

Index.php

Index.php is that template file in the WordPress page hierarchy, which is necessary for a WordPress theme to function. It is most commonly used to render a theme’s home page. Understanding this file will help you pick up the best WordPress themes you may use for your site.

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

Whenever a template file doesn’t exist, e.g., single.php or post.php, WordPress loads the index.php.

Header.php

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

Footer.php

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

Sidebar.php

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

Some other template files that we generally use but aren’t mandatory are as follows:

Search.php

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

Attachment.php

Th attachment.php template file renders attachment pages, such as images and videos. The image.php and video.php files are used to render photos and videos, respectively. And if these files don’t exist or aren’t found, then the system uses attachment.php.

404.php

The 404.php file gives the not found page; if the file doesn’t exist, the error page is rendered from the index.php file.

Comments.php

The comments.php file is a template of comments and is called in template files like single.php or page.php to add the comments section.

How Does WordPress Template Hierarchy Works?

WordPress uses a query string to decide which template or set of templates to use for displaying the page.

In simple words, WordPress searches through the template hierarchy until it finds a matching template file. Here’s how it works:

  • Firstly, WordPress takes the user input or query string.
  • It checks the theme that the particular site currently uses.
  • Then, it matches the query string with the query type to determine which page is requested and fetches the relevant template hierarchy.
  • Check for the availability of the first template file.
  • If it’s available, then display; otherwise, show the next file in order.
  • If nothing is available, display the index.php file.

Workflow of WordPress Template Hierarchy

 

Purpose of Template Hierarchy in WordPress

We need a template hierarchy to customize our WordPress sites easily. Moreover, you may need a template hierarchy for the following purposes:

  • Tell WordPress which template files within a theme to use at any time.
  • It gives you an edge to customize your themes as per your needs
  • It enhances user understanding of the theme
  • It keeps the WordPress system organized

How to Locate and Edit the WP Template Hierarchy

You can easily locate the WordPress template hierarchy by accessing the application’s root folder using a Filezilla FTP Client. Follow the steps below:

  • Use the Master Credentials to connect to the FTP client.

connect to the FTP client

  • Go to Applications and select your WordPress application by the database name.

Go to Applications

  • Navigate to public-html.

Navigate to public-html

  • Select wp-content.

Select wp-content

  • Click themes

Click themes

  • Select your theme. Here I’m selecting twentytwentyone.

twentytwentyone

  • You will see a list of all your .php files.

list of all .php files

  • Open any of the .php files to edit as per your preferences.

edit your .php files

Child Themes in WordPress Template Hierarchy

You can also use child themes in the WordPress template hierarchy, despite them not being much evident in the cheat sheet.

Using a child theme is your best bet if you wish to customize the WordPress theme. It lets you safely edit your themes and adds a second layer to the template hierarchy for any page type you use.

Other than that, you can also use full site editing themes to customize your web pages.

Final Words

Understanding the WordPress template hierarchy is beneficial if you want to develop custom themes and customize the WordPress theme file structure. It will let you easily find the right template files to edit and customize. Once you have set up your WordPress hosting, and have your servers up, you can now understand how template hierarchy works for that.

The best thing about the WordPress template hierarchy is that it follows a strict naming convention. So, you can easily create WordPress themes once you get a hold of the template hierarchy. You may refer to the WordPress theme hierarchy for a quick visual reference for theme development

Frequently Asked Questions

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]

Liza Rajput

Liza Rajput is a Technical Content Producer at Cloudways. Being a software engineer, she loves to play with data and its processes and wishes to grow and excel in Data Science and Big Data Engineering. She has also been an avid reader and exceptional writer, with sufficient experience in technical, research-based, and creative writing.

×

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!

Unleash The Cloud.
Not Budgets.

For 4 Months +
Up To 30 Free Migrations

Cyber Week

SAVINGS
Time Left In Offer
  • 0

    Days

  • 0

    Hours

  • 0

    Minutes

  • 0

    Seconds

40% OFF

On All Plans

GET THE DEAL NOW