A complete guide of WordPress Template Hierarchy.

It really needs to understand how WordPress renders a page, if you would like to be a master in WordPress. When WordPress renders a page, it checks first from which page it should render and then it does. So the WordPress template hierarchy is very important and everyone who wants to understand WordPress should know about this and how it works.

Most importantly if you want to customize an existing WordPress site of yours then it’ll help you to customize your site. And you’ll get the idea which files to edit.

The WordPress Template Hierarchy in detail.

If you would like to see a visual example you can check this out: A visual example

Would you like to interact with the diagram?

If you do then you can also interact with the diagram

Home Page.

By default, WordPress sets your site to display recent blog posts on your homepage.

First check home.php exists or not. If not then WordPress renders the posts from index.php

1. home.php
2. index.php

Note: If front-page.php exists then home.php won’t work. Because it’ll be overridden.

Frontpage.

It needs to understand carefully. First of all, WordPress will look up if you choose any static page to show a home page ( settings → reading ). If not set then it’ll look up if front-page.php exists or not, if it’s then it’ll render your homepage from front-page.php. And if not it’ll use home.php. If even home.php doesn’t exist then it’ll show render your homepage from index.php.

1. front-page.php  can be used for both ( your latest or static page ).
2. home.php if front-page.php doesn’t exist or if you don’t set a static page then WordPress render homepage from it.
3. index.php if both pages ( mention above ) doesn’t exist then WordPress renders your homepage from index.php.

WordPress page ( single page )

First of all, WordPress lookup page.php to render a page ( page is also a post type ). If page.php doesn’t exist then WordPress renders your website’s page from index.php.

Let’s take a look at how WordPress template hierarchy works on page

1. page.php is normally used to render your website page.
2. page-{id}.php is used to render a specific page. Such as if you would like to customize a specific page then you can make a page providing its id such as page-22.php. It’ll render only a page that contains ID of 22.
3. page-{slug}.php you can set a custom slug to render a specific page that contains that slug. Such as a page contains ( our-latest-event ) slug. So you can make a page of page-our-custom-event.php which will render only that page.
4. singular.php is used to render a page if page.php doesn’t exist.
   Custom Template file for more details, check out this: custom page in WordPress site

WordPress post ( single post )

A single post template is used to render a single post. It can be either a blog post or a custom post type.

By default, WordPress shows any kind of a single post from single.php but we can also specify a template for a specific post type.

1. single-{post-type}.php if you want to specify a single template for a post type, then you can follow this way → single-custom-post-type.php ( just need to use post type slug ). That’s it. It’ll render this custom post type from this page.
2. single-{post-type}-{slug}.php is used to render a specific slug of a specific post type. Such as you have a custom post with ‘hello-world’ slug. Then you can use a template to render this post only in this way: single-your-post-type-hello-world.php
3. single.php WordPress renders single post from this template if the above-mentioned files don’t exist.
4. singular.php WordPress renders a single post from this template if page.php even doesn’t exist.

WordPress category and tag page ( Tag and Category )

To understand the WordPress template hierarchy it’s really important to know how tag and category page works. I’ve combined them together so that you can easily understand.

category.php is used to render the category of your site and tag.php is used to render all of the tags of your site. But we can customize them too.

1. category-{slug}.php is used to render a specific category with slug such as I have a category slug event so we can follow this way: category-event.php  and tag-{slug}.php are also like that to render a specific tag. Such as tag-your-slug.php.
2. category-{id}.php is used to render a specific category with slugs such as category-33.php and tag-{id}.php works also like that, such as tag-44.php.
3. If these above-mentioned files don’t exist then WordPress renders category from category.php similarly for the tag, WordPress renders tag from tag.php

WordPress author page.

Accordance with WordPress template hierarchy WordPress looks after a file called author.php to render author archive. But we can customize it as we want.

1. WordPress renders author post from author.php by default.
2. We can specify the author page with author’s nickname such as author-nickname.php
3. We can also use author ID such as author-3.php
4. If any of above-mentioned page doesn’t exist then WordPress renders author archive from archive.php
5. If archive.php doesn’t exist then WordPress renders author archive from index.php

WordPress search result

1. If you want to specify a page for only search result then you can make a template called search.php
2. If this page doesn’t exist then WordPress renders search result from index.php

WordPress 404 not found page.

1. 404.php is used to render if the user visits accidentally any wrong page.
2. If it’s not found then WordPress renders it from index.php

Do you know how to work with WordPress Post excerpt?
Here we have written an article on how to work with WordPress post excerpt

Found this article useful?
please follow us on Facebook and Instagram