Pro Blog Design

WordPress’s popularity and usefulness as a multi-purpose content management system, continues to grow, and the more people flock to using this CMS the more an understanding of some of the basics of how it operates becomes necessary.

In that vein, I have put together this post that examines the WordPress template hierarchy and the use of conditional statements. Technically you only need two files for a WordPress theme to work, index.php and style.css.

However, if you would like to make your theme a bit more unique and have some variance in the way different content is presented, you will want to use some other template pages. Now this is where the hierarchy comes into play, because WordPress runs off a Template Hierarchy.

What this means is that it will automatically look for a particular file when retrieving a page in the active theme directory. If, for whatever reason, it cannot find that file, WordPress will then look for the next filename in the hierarchy and so on until it finds a match.

Below I will go over different additions that can be made, that will not only add to the complexity of the overall site, but each one will also impact the site’s hierarchy. With each entry below, I will tell the benefits of having that particular template page as part of your site and how each will alter the hierarchical structure of your WordPress theme.

Home

Establishing a home.php file will give you a custom home page for your WordPress site that varies from your index. This could also be accomplished with conditional tags but I only recommend that for minor changes from the original index.php page to keep size and complexity to a minimum. So if you plan to have major changes in the home page for your site, then adding a home.php is the route to pursue.

The Hierarchy

1. home.php
2. index.php

Single

Given that a good number of WordPress installs are used for blogs, you will most likely have a single.php template for your individual posts. This will allow the posts on the blog to have a distinctively different set-up than the other pages on the site, as well as allowing a section for comments.

The Hierarchy

1. single.php
2. index.php

Archive

This addition to the template pages effects several other hierarchies for the site. Archive.php controls the presentation of your archived data, such as categories, tags, dates & authors. The addition of an archive.php will be called upon in the absence of the next few template pages that are discussed. Adding this to your templates aids the users in finding the content that is generated for the website with ease.

The Hierarchy

1. archive.php
2. index.php

Category

This is a great template to add to your site for the benefit of your user’s and for more specific site and content navigation. You can also go even further and set up a specific look for each individual category that you have your site’s content divided into by creating a category-id.php. Also know that any -id.php template will take top hierarchical priority if it is included.

The Hierarchy

1. category-id.php
2. category.php
3. archive.php
4. index.php

Tag

Some users in the blog design community opt to focus more on tags rather than categories for separating and organizing the content for the site. If this is the case for the WordPress site you are designing, then you will want to include the tag.php template. And once again, you have an option to style each tag individually by adding the tag-id.php template.

The Hierarchy

1. tag-id.php
2. tag.php
3. archive.php
4. index.php

Author

If you are designing a blog that is going to have multiple authors contributing, then you can add an author.php template to allow site users to search the site by the authors. You also have the option of adding an author-id.php template if you would like to style each author’s page for that specific author for a more personal feel. Say altering the colors specifically for that author, or however you choose for their page to stand out from the others, you can do that with this template.

The Hierarchy

1. author-id.php
2. author.php
3. archive.php
4. index.php

Date

Another searchable content element that you can add to the site for the sake of your user’s navigation is allowing them to browse your content by the date that it was published on the blog. If this is needed for your WordPress site, simply add a date.php template to allow this functionality.

The Hierarchy

1. date.php
2. archive.php
3. index.php

Search

Whenever a user searches your site, you can set up a search.php template to control the way that the site delivers the search results to the content seeker. Style it differently than the other templates on the site for a unique delivery and presentation to make it stand out.

This isn’t required and a lot of sites leave it out, but it can always be a nice stylish touch for the site. The default search results from an index.php file look nothing like what a user would expect from a search page!

The Hierarchy

1. search.php
2. index.php

404

Style-matching, helpful 404 error pages are an extremely popular way to manage user navigation when errors occur. This helps to ensure that the user who has gotten lost in the site does not necessarily leave out of frustration.

Simply add the 404.php template to make this possible for the client. Here are some ideas to get you started with 404 pages.

The Hierarchy

1. 404.php
2. index.php

Page

In order for your site to have multiple pages (i.e. about, contact, etc.) which most will, you need to add the page.php template. Again, this is an area where you can actually individually set up your pages with a page-id.php template addition.

Pages can also have custom templates, the most common use for custom templates is an archives.php page (not to be confused with archive.php. You can read more on how to create a great archives.php file here.

To create a custom template simply place this at the top of the pagename.php file, where ‘pagename’ is whatever name you have chosen.

The Hierarchy

1. custom.php
2. page-id.php
3. page.php
4. index.php

Conditional Tags

Conditional Tags are another tool at the coder’s disposal when assembling the WordPress framework you are putting together for your client. With conditional tags you can tell WP to only present content if a certain page is being displayed.

For example, is-home() is a conditional tag telling WordPress to only display the selected content on the home page. If this is in your index.php file, that content will only be shown on the home page and not any other pages that default to index.php.

The following is an example of a conditional statement.

if (is_home()) {
   echo 'Welcome to my blog, I hope you enjoy what you read here!';
}

Conditional tags are best used when you only want a minor variation for certain content types, e.g. if you just wanted to display the words "Search Results" at the top of your search pages, you could just add a conditional tag to the index.php file. That way if you update something in the index.php file, you don’t need to worry about updating the search.php file as well.

For larger changes though, conditional comments get messy and you’ll find template files make things easier to manage!

There are a variety of different conditional tags and tons of uses for each. For a complete list and description of each see the WP Codex Conditional Tags Entry

The Visual

Download the PDF

Your Turn

That concludes my look at WP hierarchies, but I would love to hear your thoughts and suggestions in the comment section below on any areas that you need further clarification or that you would do a little bit differently.