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.
- What Is WordPress Template Hierarchy?
- Structure of WordPress Template Hierarchy
- WordPress Template Hierarchy Based on Page Type
- What Are Some Important WordPress Template Files?
- How Does WordPress Template Hierarchy Works?
- Purpose of Template Hierarchy in WordPress
- How to Locate and Edit the WP Template Hierarchy
- Child Themes in 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.
WordPress Template Hierarchy Based on Page Type
Most WordPress websites use seven types of pages, as follows:
- Front page template files
- Single posts
- Single pages
- Custom post types
- Search result pages
- Category and tag pages
- 404 error pages
In this section, we will discuss the template hierarchy of each 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:
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.
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:
Similar to single posts, single-page templates can have a complex template hierarchy. The basic template hierarchy of single pages is as follows:
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:
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:
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:
Whereas the basic templates of the tag page look as follows:
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:
What Are Some Important WordPress Template Files?
You can include some WordPress files in almost all page templates, and they are as follows:
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.
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.
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.
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. You can also remove the sidebar from the site if your design requires it.
Some other template files that we generally use but aren’t mandatory are as follows:
Search results in WordPress use the template file search.php. If the file doesn’t exist, search results are rendered from index.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.
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.
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.
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.
- Go to Applications and select your WordPress application by the database name.
- Navigate to public-html.
- Select wp-content.
- Click themes
- Select your theme. Here I’m selecting twentytwentyone.
- You will see a list of all your .php files.
- Open any of the .php files to edit as per your preferences.
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.
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
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.
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.