Different category with different style

Giving different styles to different WordPress categories

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>. 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!

Displaying single post pages differently in specific categories

You may have certain categories in your WordPress blog that you want to appear differently than other categories. For example, what if you have a category called “Tomatoes” and a category called “Cucumbers,” and you want the titles of every post in the Tomatoes category to be red, and the titles in the Cucumbers category to be green?

There are a few plugins that can help you with this, but they didn’t work so smoothly. The best solution I have found is one provided by Lorelle on her Taking Your Camera on the Road blog. In her post titled “Different Category – Different Look: Creating Multiple Single Posts Looks for Different Categories,” she gives the following directions:
We began by making two back up copies of the single.php page called single1.php and single.2.php.

Inside of the original single.php, delete everything and replace it with this:

<?php
$post = $wp_query->post;
if ( in_category('9') ) {
include(TEMPLATEPATH . '/single2.php');
} else {
include(TEMPLATEPATH . '/single1.php');
}
?>

In the most simple terms, the PHP code issues a query that says “Check the post. If the post is in category ID number 9, display single2.php. If not in category ID number 9, displaysingle1.php.”

In the in_category(), we set the category ID number to 9, the one that holds all of my web page design articles and experiments.
So basically, your main single.php file becomes a conditional file that tells WordPress which template file to use in certain categories. Lorelle also gives the following code you can put in the single.php file that will allow you to create multiple styles for multiple categories:

<?php
$post = $wp_query->post;
if ( in_category('9') ) {
include(TEMPLATEPATH . '/single9.php');
elseif ( in_category('12') ) {
include(TEMPLATEPATH . '/single12.php');
elseif ( in_category('42') ) {
include(TEMPLATEPATH . '/single42.php');
} else {
include(TEMPLATEPATH . '/single1.php');
}
?>

Now you have to get the styles you want to apply to the correct category. Do the following for every category you want to have a certain style for:

  1. Create a new style sheet and call it style-9.css (9 is the category ID, but your category ID will likely differ. You can still call it style-9.css, but this is confusing!) If the changes you are making are minor, like changing certain colors or fonts, you should probably just copy style.css and rename it to style-9.css. In that style sheet, create the styles that you want, so for example if you want all h2 items to be red, make those changes in your new style sheet.
  2. Style sheets are called in your header.php file. Which means that we need to create a header file that will call your new style sheet. So copy your header.php and rename the copy header-9.php (or whatever you want).
  3. In your new header-9.php file, find the lines that look something like this:
    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style.css" type="text/css" media="screen" />
    and change where it says style.css to style-9.css.
  4. Then, in your single2.php file, replace the following line (which is probably the first line):
    <?php get_header(); ?>
    with this
    <?php include ('header-hebrew.php'); ?>

The result: http://www.thecoolhunter.net/