Understanding The WordPress Template Hierarchy

By , March 27th, 2015 , Tags: , 0 Comments

It’s not just a statistical statement that more than 20% of all websites on the Internet are running on WordPress. It is a bona fide indication of the massive ground this CMS has managed to cover in recent times and how thick and fast has its popularity multiplied – and continues to do so unfailingly.

Now, every individual who is planning to host his or her website on WordPress is not soundly acquainted with this CMS. While it happens to be so massively popular, let’s face it, not every one owning a website or planning to own one is a tech-savvy individual. Understanding The WordPress Template Hierarchy is dedicated to those folks who would like to get a firm understanding of what WordPress is all about, in terms of its underlying structure.

The look and feel of the WordPress website is determined by the means of several template files. These are the files that you can have a look at the backend, in the admin panel of your WordPress dashboard, and these include:

  • home.php
  • index.php
  • header.php
  • sidebar.php
  • footer.php
  • comments.php

These files do not contain the text that your visitors see on your website. What they do contain however are the instructions and set of rules that determine how the content gets displayed on different pages. Throughout these files, there are PHP tags scattered all over and there is also a fair bit of CSS and HTML involved that goes on to dictating the style of the pages.

A typical WordPress setup is constructed in a manner that every page has its own file dedicated to it. Different templates are designed differently in the sense that some represent single page websites while others contain a group of multiple pages.

  • Home Page: Home page is contained in the home.php>index.php file, which contains the complete set of rules for the page’s display and content.
  • The Posts Page: The rules for this page are set by the index.php file
  • Single Posts: These are determined by the single.php » index.php and it adds a new post-type feature.
  • Pages: You can find code for them at  custom template » page-slug.php » page-id.php » page.php » index.php. The page.php are for some specific pages
  • Categories: Most websites are segregated according to the categories of content they contain. And these categories are set via category-slug.php » category-id.php » category.php » archives.php » index.php

The above list encompasses just about everything from within a single website.

Now, when you segue on to viewing the category pages that contain excerpts from the different posts on the site, the output is fetched via the following files:

  • index.php
  • category.php
  • 404.php
  • search.php
  • header.php
  • sidebar.php
  • footer.php

If you are still unfamiliar with a few terms that are a part of the above files, 404 represents a Not Found error. And the Server 404 error page can also be rendered by the index.php file. The header.php file sets the rule for the header that remains the same across the complete website and it can be tailored for including different styles. The search.php file as you would guess implements the search functionality in the website. The sidebar.php file controls the elements that form the part of the sidebar, like widgets, ads and so on while the footer.php dictates the rule for the website’s lowermost section.

A Classic Wordpress Theme’s Code
This is how the code for the classic WordPress theme looks like:

Now, there are minor differences when we compare this classic theme with the current default theme, and you can figure it out by comparing the above code with the following code:

The codes differ in the way they refer to their sections as sidebars and menus respectively. However, the real difference is how their headers and footers are placed.

In the code for the Classic Theme, the header has been placed in the h1 tag, while the footer finds its place in a paragraph tag. On the other hand, in the Default Theme, the header finds its place in a div by the name of “header”, and likewise, the footer lies in the div called “footer”.

Wrapping Up
This concludes the hierarchy of a standard WordPress theme that every webmaster should be aware of. As you work on WordPress and dig around its concepts, you can get familiar with more complex concepts gradually.

As a certified top-notch developer at OSSMedia Ltd, Edward Jones has an impressive expertise in Wordpress & he provide concrete information on wordpress related tips & trends. If you need to hire wordpress developer then simply get in touch with him via his Twitter and Google+ handle. Having gathered a total of 5 years of experience in WordPress Development, Edward has delivered numerous projects within the allotted time-frame.

Want to write for CSS Matter?

If you're interested in becoming part of the CSS Matter team of authors, please send an email to Manish Salunke. It's best if you already have article ideas in mind – but if you don't, he'll help you find a good topic to cover.

Get Updates On Twitter

Do you want to get real-time updates, interesting web links, site news and announcements via Twitter? Follow CSS Matter on Twitter.

Subscribe to the RSS feed Today

The best way to keep up with CSS Matter articles regularly is by putting the CSS Matter RSS feed into your feed reader.