design wordpress theme: Understanding the WordPress template hierarchy

Now that you know how the different templates in a theme are stitched together using different modules, I'm sure you're wondering how WordPress knows which template to use for what content and how you can identify which template is currently being used for what you are looking at. This is all controlled by what's known as the WordPress template hierarchy, and it looks like this. Every time you visit a page on a WordPress site, the application works with the database to figure out what template file will be used. The process starts on the left and ends up on the right, and the first appropriate available template in the theme is selected for each page.

So, if you're visiting a single post and your theme has a template file called single.php, that template file is used. Here's how that process works step by step. You visit a page and WordPress needs to know what type of page this is. The page is identified as a singular page,meaning it can be either a post or a static page. This is a post, so now we have to find out what type of post it is, either an attachment, a custom post type, or a standard blog post.

It's a blog post, so now WordPress looks for the single-post.php template in the theme. When it can't find single-post.php, it looks for single.php instead. And, if it can't find single.php either, it would default to index.php. In fact, no matter where you go on the site, if no template is available, WordPress will always default to index.php. Knowing how to use the WordPress template hierarchy means you can quickly identify what template is being used for a page or post or index page on your site.

It also means you can create custom templates that kick in for specific scenarios. This works the same way in child themes as it does in regular themes. Looking at the template hierarchy, you notice that for categories, you can create custom template files for individual category slugs or IDs. You can have custom, single templates for custom post types, you can create various custom templates for your front page, and the list goes on and on. As we start working with individual templates in this course, I urge you to go back and check this diagramevery once in a while to figure out what's going on and which templates we are currently working with.

Show Current Template

This will also give you a better idea of how you can take what we're doing and expand it to more custom templates and custom situations.To help identify the templates we are currently working on, we'll also use a plugin called Show Current Template, and I want you to install that plugin right now. Show Current Template is available from the WordPress plugin directory. You can find it by going to Plugins, Add New,and search for Show Current Template, and then when you find it, simply install it into your site.

Once Show Current Template is activated,and you go to the front page, you'll see we get a new feature up here in the WordPress toolbar that shows us what template files are being used for every individual view you're on.

So, right now, you can see on the index page, we are using footer.php, functions.php, header.php, custom-header.php, and so on and so on and so on. And at the very top, it says Template relative path: themes/popperscores/index.php. That means this is the main template and all these other files are being called in by that main template. We can go to a single post. Here again, we have Template: single.php, and if you hover over it, you see a full list of all the different files that are being called in by this particular template.

This will become really useful as we start creating custom template files to make sure that things are being called in correctly and I encourage you to use this feature to understand how everything fits together within your theme as you build it. Before moving on to the next movie and whenever you're planning to build a new template or wondering what template is currently displaying your content or why that template is currently displaying your content, go check out the Template Hierarchy page at developer.wordpress.org. This page will always be up-to-date with the latest information about all available templates in the hierarchy and it also contains this useful graphic.