Creating Custom WordPress Themes: Part 2 – Custom Templates

Yesterday, I talked about starting your WordPress themes by identifying them and setting up a base for all your themes. Today, I’d like to talk about using custom templates within WordPress’s dynamic structure.

Most people assume that since WordPress is dynamic and based off three main templates, single.php, index.php and archives.php, that every page of your site has to look the same. Guess what? It doesn’t.

If you want a live example of this, check out the site you’re looking at right now. (That’s mine, right?) If you look at my portfolio, blog and testimonial pages, you’ll find that all three are actually using the archives.php template, and all three look the same! I’ve also got custom sidebars in each section, as well as a couple of different single.php looks going on. The only page that’s static is my contact page.

What are these templates?

There are four main templates in WordPress that control the bulk of your posts, one template for the static pages and several “smaller” templates, that we won’t touch in this post.

  • index.php – While this template doesn’t have to actually be the index of your site, (you can change this under Settings > Reading to a static page) it’s the default homepage and most sites that are used mainly for blogging use this template. The main page for your blog “posts” is the only page that index.php affects.
  • single.php – This template is used for displaying the full post for all your posts.
  • archives.php – This template controls a major portion of your WordPress site. It’s used to not only display your regular archives when a user clicks an archive link, but also your tags and categories as well.
  • search.php – This obviously displays the search page.

WordPress is super smart to make our lives easier

WordPress includes lots of extra classes based off of post IDs, category IDs and so on that you can control with CSS (which is how my single.php template in my portfolio section is altered). But what if you want to completely change the code of one category from another, so you need different HTML and PHP?

If you take a look at my portfolio page, you can see that the category “Portfolio” page is a lot different than my category “blog” page. How do we do that?

WordPress has a built in automatic template detector. For categories, it works something like this:

category-6 > category > archives > index

All this means is that when loading your category page (with an ID of 6), this means it will first look for a page specifically built for its (category-6.php). If there isn’t one, it will look for a general category.php page, if there isn’t that either, it will look for archives.php, and then finally, index.php.

This means you can have a separate template for all your categories, for only category 6 (or whatever ID) or have it completely the same as your index.php page by deleting all of them. Pretty nifty.

Other pages work similar:

about > page > index

search > index

image > attachment > index

For a full list of the hierarchy, check out the diagram at the WordPress codex.

What About Targeting All Posts in One Category?

Customizing the single.php page via the type of post is much more difficult to do than the above templates. The best way to do this is to break up your code on the single.php page using if else statements. Therefor, if we wanted to have an h1 tag in any post within the “Cool” category and an h2 tag everywhere else, you could use this:

<?php if (in_category('Cool')) { ?>
<h1>Cool Posts</h1>
<?php }; else  { ?>
<h2>Non-Cool Posts</h2>
<?php };  ?>

I’m Lost Somewhere in Blog Land!!

The coolest thing about WordPress is the amount of support it has in the community. I don’t think I’ve ever run across a WordPress question that I couldn’t get the answer to by Googling it. So don’t be afraid to poke around – there are thousands of blogging developers there to help you at a moment’s notice.

I also picked up a copy of Chris Coyier’s Digging Into WordPress. While this book was awesome, I admit it’s still super easier to just Google the problem. 😉

Theme is a Flyin’

Have a question about WordPress that’s not covered? Ask it here and I’ll make Part 3 for reader questions!

All Parts to Creating Custom WordPress Themes