There are many articles on the web that explain the template hierarchy within WordPress but I wanted to write one about the WordPress Template Hierarchy for developers. Something that drastically opened my eyes to the power the WordPress Core developers have given us. The purpose of a template hierarchy is to not only allow you to develop more quickly and easily but to have backup support in case something happens to one or two of your files. It allows within your development to cover all of your bases or choose to only code the basic necessities. Ultimately, it is the skeleton of your theme and we need to know how to manipulate it and put all the bones in the right place.
Learn The Basics First
The first thing I would recommend doing if you haven’t already is go check out the WordPress template hierarchy on the codex. The explanation they give is really good actually. For some, especially beginners, it may look like lorum ipsum in some spots. After you read through that article, this article will give you a little more in depth information along with things I have experience in my daily theme development.
I would like to list some of the template files I commonly use in all of my developments. Then I will go through and give you more details on what each one does.
Let’s go through these one by one, even though some of them will be very self explanatory.
This is a very important file. Every website you develop needs to have a 404 Error page. This will be the file where you will put what you want someone to see in case they happen to find a dead link. You never want people to get the standard hosting 404 page because it should be an opportunity for you to redirect your visiter back to the information you want them to see. I always recommend adding a search bar and a short description telling people to do something. You could ask them to search for what they were looking for or use a menu close by to get back to what they were looking for.
This page shows a list of dates, usually month and year, that link out to the posts written within that time period. If you create a custom post type, you can add it to the end of the file name to customize the structure and style ( archive-downloads.php ).
If you want to have a page that shows information about the author you would use author.php. You can custom code author pages by adding either the nickname ( author-james.php ) or the author’s ID to the end of the file name ( author-50.php ).
This page is intended to list all posts with a chosen category. An example would be if you had a specific category, let’s say books, you could filter all the posts that were in the books category. Remember that this file is singular not plural. If you need to structure and style a specific category archive, you can use a few useful tricks WordPress has up it’s sleeve. You can you the ‘slug’ of the category you want to be different. For example, if you need ‘books’ to look different you can simple add ‘books’ to the end of the file name ( category-books.php ). The same can be done with the ID of the category.
Any code you want displayed at the bottom of every page will be placed in footer.php. Make sure that you always call the WordPress footer function right before the end of the body and html tags. This section allows WordPress to add the appropriate script tags and anything else that needs to run in the footer ( <?php wp_footer(); ?> ).
This file is essential to make your entire theme function. Here you can create custom menus, register and enqueue your scripts and stylesheets, create widget areas, and much much more.
front-page.php, home.php, index.php
Anyone who has every built a website has worked on a file called index, whether that be index.html or index.php. It was the basic standard you needed in addition to the style.css file. The style.css file hasn’t changed in WordPress but the index page isn’t as high priority anymore. Let’s break down the meat and potatoes needed to make a WordPress theme work. You only need two file to get your WordPress website to recognize your theme and those files are:
- Your template file
- Your stylesheet
What do we mean by template file? This can be one of three things:
I have found that index.php is needed as a backup in case front-page.php or home.php can’t be found. So when I develop, I always make sure I have an index.php file with the exact same code as front-page.php or home.php. WordPress was originally created for blogging, so their system automatically sets your home page to display your most recent posts. But if you go into your WordPress dashboard, choose Settings from your left sidebar menu, then choose reading, you will be able to change the options. On this page your options are to either show your latest posts or choose a static home page. If you choose to have a static home page you then must choose what actual page you want your home page to be connected to and then what what actual page you want to display your blog articles if any.
Now that you understand these two basic functions of WordPress, we can connect the meaning to the pages listed above. Front-page.php is the page that WordPress looks for first if you have chosen to have a static home page. If you want your recent posts to display on the home page then you use home.php. Then we use index.php as a fall back in case you accidentally delete one of the other two pages or someone hacks your site and deletes a few pages. It happens folks! Once you have decided what you want on your home page you will automatically know what file to create to apply your php to.
This file will hold all the code that will be displayed at the top of every page. Make sure that you include everything that should go inside the head of a website. Much like the footer you need to use the WordPress head function to call all the scripts and stylesheets and anything else WordPress needs to call ( <?php wp_head(); ?> ).
This page displays the content of your pages. You can add the ‘slug’ or ID to the end of the file name to custom code individual pages ( page-full-width.php or page-25.php ).
This page is meant to display search results from a query within the site.
You can customize the look of the search form by simply adding the appropriate code to this file.
Customize the way your sidebar looks using this file. If you want multiple sidebars you can add the name at the end of the file name ( sidebar-blog.php ). Then within your call for the sidebar function you add the name you used at the end of the filename within the parameters ( <?php get_sidebar(‘blog’); ?> ).
This file is used to structure the full blog article. Use the ID or ‘slug’ at the end of the filename to customize an individual post. Plus you can add the custom post type name if you have one ( single-product.php ).
Much like the category.php file, tag.php displays all the posts within the chosen tag. Use the ID and ‘slug’ at the end of the filename to customize the post.
Put It All Together
With this knowledge you can easily take a standard theme and make it more dynamic and customized. No longer do you have to have every category page or single blog post page look the same. Once you get the hang of what everything does, you can quickly put it all together and build powerful themes for your clients or potential buyers. I hope that by explaining the WordPress template hierarchy for developers to developers it will build your knowledge and expand your current level of theming.
If you are a visual person, here is a really good interactive version of the WordPress template for developers to use when they get stuck.