WordPress Template Hierarchy

Code Modularity and Code Reusability are the two most important features of WordPress Development. Together, they also improve our code readability.

So, before we code our home page or any other web page using WordPress for that matter, it is essential to understand how WordPress puts together the final Web Page for our website visitors to see. 

The Overview of how WordPress generates a web page’s HTML

It all starts with you typing a website URL and into the web browser and hitting enter. For example https://www.usablewp.com 

1. As soon as you hit enter, Browser checks for the internet connection. If your computer has an internet connection, your computer takes control from the browser and contacts the Domain Name System (DNS) servers and provides them the domain name. 
2. DNS servers act as a phone directory. They have the IP addresses of the all the available web servers in the world and Domain names associated with them. Once they find a match, They provide the matching server IP address to our computer and our computer hands it back to our web browser.
3. Once web browser has the IP address of UsableWP’s web server, it will send it a request asking for a web page. The Web Server receives the URL you entered into the browser along with other request information. It takes a look the URL and checks if there is a file name in the URL. 
4. Since there is no file name in https://www.usablewp.com, Server starts executing the WordPress core starting with the index.php file. From here onwards, WordPress takes the control. 
5. WordPress core accesses the requested URL from the server. It parses the URL by dividing into bits and pieces to figure out what you were trying to access. 
   1. For example, if the requested URL is https://www.usablewp.com, WordPress figures out that you are trying to access the home page.
   2. If the requested URL is https://www.usablewp.com/articles, WordPress figures out you were trying access the Articles page
   3. If the requested URL is https://www.usablewp.com/category/tips, WordPress figures out you were trying access the all the blog posts from the Tips category.
   4.  You get the idea right??
6. Once the WordPress figures out what you were trying to access based on the URL, it pulls out the relevant content from the database. 
   1. If the requested URL is https://www.usablewp.com, WordPress pulls Homepage content from the database. 
   2. If the requested URL is https://www.usablewp.com/category/tips, WordPress pulls all the blog posts that belong to Tips category. 
7. Once the content from the database is retrieved, WordPress uses the Template hierarchy logic to choose a template file from the active theme. WordPress.org gives us a handy template hierarchy reference in the form of an image. Go ahead and open that up. 
   1. If the requested URL is https://www.usablewp.com/category/tips, WordPress finds out that you are trying to access blog posts within “Tips” category and:   
      1. Looks for a template file in the active theme’s directory that matches the category’s slug. In our case, the category slug is “Tips”, So WordPress looks for a template file named category-tips.php. 
         A slug is just a “URL and Database friendly” name of our “Tips” category. The primary motto of a slug is simple. It helps website visitors to guess what a web page is about by taking a glance at the URL.
      2. If category-tips.php is not found, then WordPress looks for a template file named category-{id}.php. Every category in WordPress comes with a unique numerical ID. An ID is generated by WordPress after creating a particular category. For example, if the Tips category has the ID of let’s just say 10, then WordPress looks for category-10.php file   
      3. If category-10.php file is not found, then WordPress will look for a generic category template file, category.php.
      4. If category.php is missing, then WordPress will look for a generic archive template, archive.php.
      5. If archive.php is also missing, then WordPress will fall back to use the default theme template file, index.php. 
   2. If you are looking at template hierarchy reference, you could see that WordPress chooses template files starting from the left-most side of the diagram.
   3. You must use the filenames suggested by the WordPress when creating template files, otherwise, WordPress fails to recognize them, hence it doesn’t end up using them. Don’t worry, you don’t have to memorize them. Instead, bookmark the template hierarchy reference.
   4. Now, I could go through the entire template hierarchy, but that is boring ain’t it? We will go through it in detail as we build our website pages.
8. After choosing the template file, WordPress passes the database content to it and processes the code inside the template file to generate final HTML. 
9. Once the final HTML is generated, the server takes that and sends as a response to the browser.
10. Once the browser gets the HTML, it goes through it line by line and paints the final web page on to the screen.
    
    

That’s all. Nothing complicated. At the end of the day, the browser receives the plain HTML, CSS, and Javascript. 

Unless caching is involved, It is important to remember that, the entire WordPress core files are being executed everytime you access a page, even if you refresh the same page.

For example, let’s just say, you are on the Homepage of UsableWP’s website and have decided to contact us by clicking on the contact link available on the primary navigation of the website. The entire 11 step process that I mentioned above, repeats. 

Basically, That’s how the web works. The web page life cycle starts as soon as the browser receives a response from the server and ends when the user closes the browser tab or browser itself.

The important realization about Template Hierarchy files

It is important to realize that, you don’t have to create every file from template hierarchy reference. You can avoid creating all the fallback files and create only the first preference files like front-page.php and generic template files like page.php. 

For example:

• Most the small business websites will have the same UI design of all the internal pages like About, Contact us etc. In this scenario, you can create page.php and use it render all those internal pages.
• If all the categories like freebies, design tips etc. have the same UI design, use category.php for rendering all those category pages.
• You learn more about these decisions while coding our Dosth App theme

Our choices for the template files differ from project to project. At the end of the day, it all boil downs to Project needs. If you want more control over markup, use template hierarchy reference to create more files for more purposes.  

Now that you understand how WordPress works from a high-level point of view and how it uses templates and template hierarchy for rendering the final web page, you are ready to start coding your WordPress theme. In the next chapter, you’ll learn how to code a WordPress based website’s homepage.