WordPress allows you to give different styles to different categories in a range of ways. You can style a category page: this means that every category page can have its own unique style. For example, let’s say you have a site about vegetables, where every vegetable is a category. You can style the Tomato category page so that the headers are all in red, the Carrot category page so that the headers are all orange, etc.

You can also make sure that when you visit a single post page in a specific category, that page also has a unique style. So if someone clicks on your post about Delicious Tomato Sauce, the headers on that page can be styled red, while the single post page for the article on Creamy Carrot Soup will have orange headers.

And finally, I just found out that you can style posts on the index, home page, search results page, or any page with posts from multiple categories, with their own style depending on their category.

Let’s go through each styling method one-by-one:

Styling Category pages

  1. Find out what the id number is of the category you want to style. To do so, go to Manage > Categories, find the category in question, and look at the left-hand column. Let’s say that your Tomato category has an id of 5.
  2. Create a file called category-x.php, where x is the id number of the category. In the case of the Tomato category, your file will be called category-5.php. The best way to do this is to copy you index.php file, and rename it category-5.php.
  3. Now modify your file at will. For example, if you want all h2 text to be red, find where it says <h2> in your file, and replace it with something like <h2 class="tomato-red">. Then, in your style.css file, create a class called tomato-red, and give it the right styles. In this case, you would add the following to your style sheet:
    .tomato-red {
    color: #FF0000;
    }
  4. The method described above in Step 3 is ok if you want to customize the styles for one or two categories. But if you have more than that, it can become annoying to manage a zillion category-x.php files. Ryan Hellyer, a devoted WordPressGargage reader and most frequent commenter, gave the following more efficient way of doing this. He said to create one category.php file, and put the following code in it:
    <h2
    <?php
    if (is_category('tomato'))
    {echo 'class="tomato-red"';}
    if (is_category('cucumber'))
    {echo 'class="cucumber-green"';}
    ?>
    Etc. Brilliant!

Styling single post pages for different categories

See my previous post titled “Displaying single post pages differently in specific categories” for detailed instructions on styling single post pages for different categories. It’s all there.

Giving posts from different categories different styles on a multi-category page

I love how there’s always something new to learn about WordPress! Abhijit Nadgouda has written a post on Lorelle’s blog explaining how you can apply unique styles to posts in different categories. He explains how you can use the category slugs to create styles that can be dynamically called to give different styles to posts from certain categories.

Why is this useful? Let’s take our vegetable site example. By giving each category its own style, a reader on the home page could easily identify all posts about tomatoes by picking out the posts with red headers, and carrot posts would have orange headers. This could also create a very colorful and eye-catching page.

Another way to use is if you have a category of feature articles. You want these articles to stand out in some way, either by giving them some kind of badge, or a background color, for example. By using this method, you can ensure that your feature articles are always more prominent, and don’t get lost in the crowd.

So there you have it – three ways to make sure your posts in different categories stand out all across your site. Hurray for WordPress!