elegant themes

Giving different styles to different WordPress categories

| September 7, 2007 | 20 Comments

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!

Tags:

Category: Tips


Comments (20)

Trackback URL | Comments RSS Feed

  1. Ryan says:

    Rather than using seperate category-x.php files, I’d use a single category.php file and serve different classes to the H2 inside that file. That way you don’t have a squillion different files to edit, just one.

    ie: category.php …

  2. [...] Giving different styles to different WordPress categories (WordPress Garage) [...]

  3. [...] Different styles for different categories – Recently I’ve been working on creating a separate page and set of categories on the BlogsWeLuv site in order to host a blog carnival. One of the things I need to do is style the pages for the carnival category a bit differently. WordPressGarage’s tips are some of the most helpful I’ve found on the subject. [...]

  4. [...] Giving different styles to different WordPress categories » WordPressGarage.com 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 ev (tags: design tutorials wordpress css) [...]

  5. I thought this was the post that was going to solve all my problems but after giving it a go I dont think so. But maybe you can help

    I am looking for a way of giving each category its own distinctive sidebar. So that when you call up a single post from a particular category you get a particular set of information in the sidebar that varies for each category.

    The theme I use already calls up a More posts from this category but I am unsure how to take this further

    you can do this really easily with pages by calling a different page template but I have searched around and can’t seem to find a way of doing it with posts

    hope you or your readers might have a simple elegant solution

    thanks – I am learning lots from your site

  6. Miriam says:

    Hi Marcus – glad to see you here at WPG!

    Can you clarify what type of information you would want to have appear in the sidebar? If it’s related to the category that the post is in, there may be a way to have category-specific information appear there.

    Nice implementation of the Mimbo theme, by the way.

  7. Hi Miriam

    Thanks for your quick reply.

    I have progressed a little already but still having problems.

    What I want to do with certain categories is to replace the normal sidebar with a completely different set of information. It may be a set of specific links that relate to that category or it may be some general text that relates to that category – if for example the category is about a specific project there might be a general project description and I might not want the general rest of site stuff. Essentially I want the same flexibility that I can have by choosing different page templates for different individual pages.

    I can see this working in a range of situations but I have a particular site that I am working on at the moment where this would be helpful because some of the categories indicate a kind of sub-publication.

    One way that i can get close to this is by adding in some code to the single.php at the end:

    This does work but there is one problem. Posts with multiple categories. I could live with that and be more discriminating in my category distribution (use tags instead for instance) but in one particular instance this doesn’t work. The mimbo theme uses categories to place the “Lead” and “featured” articles in certain places so these articles will always have two categories.

    My problem with using the above syntax is that it works perfectly if you only want to do it once because the code seems to read

    “if this post is in category x then use this special category x sidebar but everywhere else use the normal sidebar”

    If a lead post (cat-3) is also category x then I get the beautiful category specific sidebar – it seems to ignore the multiple categories.

    However in the above example if I am trying to do it in multiple categories it has problems because if I have a category 18 post as the Lead (also cat-3) and a category 17 post as one of the featured (also cat 4) in the first mentioned category I get both the normal and the special sidebar while in the second mentioned category I get what I want – only the special sidebar.

    Again I gather (I am a real php newbie) this is because the code is reading

    “if this post is in category 18 then use this special category 18 sidebar”

    “”if this post is in category 17 then use this special category 17 sidebar but everywhere else use the normal sidebar”

    And because in this case the post is coded cat 3 and cat 18 I end up with both side bars because the theme is reading the second “everywhere else” as only relating to the last mentioned cat and it thinks – oh cat 3 put the normal sidebar.

    I need code that says

    “if this post is in category x then use this special category x sidebar

    “if this post is in category y then use this special category y sidebar

    “if this post is in category z then use this special category z sidebar

    but if none of the above use the normal sidebar”

    Sorry this was so long!

    I notice on the wordpress forums there are similar questions that are unresolved so if you have a solution I think there are others who would be interested too.

    Thanks

    Marcus

  8. The php code didn’t show up in the comment post I will try removing all of the opening and closing <?

    php if ( in_category(’18’) ) {
    php include (‘sidebar3.php’);
    php }

    php if ( in_category(’17’) ) {
    <?php include (‘sidebar2.php’);
    php } else {

    php get_sidebar();

    php }

  9. Ryan says:

    I’m a little confused. The PHP you have above should work fine, although you may end up with two sidebars if it is in categories 18 and 17, but you should be able to get around that by using an elseif instead of an if for category 17.

    Or maybe I’ve missed what you are trying to do, I’m not sure.

  10. Hi Ryan

    thanks for trying to help I changed the “else” to “elseif” and i ended up with an error message

    I have put up a test site so that you can see what i mean

    http://blogsperiment.com

    if you click on Amiel’s story which is categorised as Lead Story (cat-7) as well as Paper Rock (cat-13) you get what I want – the story with its own sidebar

    but if you click on J Student Blogs for NYT which is categorised as Currently Featured (cat-4) and Tide (cat-16) you ended up with the special Tide sidebar and the normal one below it

    same with the bottom story in the second column Images of Cronulla you get the special News Photography (cat-11) side bar as well as the normal one

    the current code on the single page is

    so the only category that is excluding the normal sidebar is the one closest to the “else” statement

    any ideas?

    thanks so much for the help

  11. Forgot the code wouldn’t print (is there a way around that???)

    php if ( in_category(’16’) ) { ?>

    php } ?>

    php if ( in_category(’11’) ) { ?>

    php include (‘sidebar4.php’); ?>

    php } ?>

    php if ( in_category(’13’) ) { ?>

    php }else { ?>

    php get_sidebar(); ?>

  12. Still not right all the replaced with xx just in case my synatx is wrong

    xxphp if ( in_category(’16’) ) { xx
    xxphp include (‘sidebar3.php’); xx
    xxphp } xx

    xxphp if ( in_category(’11’) ) { xx
    xxphp include (‘sidebar4.php’); xx
    xxphp } xx

    xxphp if ( in_category(’13’) ) { xx
    xxphp include (‘sidebar2.php’); xx
    xxphp }else { xx

    xxphp get_sidebar(); xx

  13. [...] For WordPress users it’s easy to understand that you can change the entire look to your website but changing the theme. But what if you want different themes or styles for different categories or pages? You can create customized category templates that will assume a style for certain categories. [...]

  14. Greg says:

    Regarding the styling as per the original post topic, It might be more useful to put the PHP conditionals into some inline CSS, or set them to include separate stylesheets. Pseudo-code:
    if (category=carrots) {echo style tag with some inline CSS}
    or
    if (category=carrots) {echo a line to include carrots.css}
    The nice thing about doing it that way is that you’re not hard-coding anything into the template. What if your post itself contains H2 tags? In the example for the article, only that top H2 tag, the one that’s part of the template, would be styled. By including some CSS inline or in a separate sheet, you could have it such that ALL H2 tags are styled with the appropriate colour, as well as any other tags (anchor links? strong tags?) that might want additional category-specific styling.
    Regarding the conversation in the comments:
    The independent ifs in the code provided in the comments are going to cause problems. You need to decide the hierarchy of which to include in the event that it belongs to more than one category.
    The pseudo-code would have to look like:
    if (category 1) {include sidebar 1;
    }elseif (category 18) {include sidebar 18;
    }elseif  (category 5) {include sidebar 5;
    }else {include default sidebar;}
    In that example, once it sees category 1, that’s it. If there’s no category 1 but there is category 18, that’s it. If there’s no category 1 or 18 but there is category 5, that’s it. Otherwise it will use default.
    Good ideas all around, though! I apologize if my pseudo-code doesn’t result in any actual practical code! Since I’m working on an implementation myself, if I discover the answer in hard, practical code, I’ll provide it back here. :-)

  15. [...] Giving different styles to different WordPress categories : WP Garage [...]

  16. Marz says:

    why not using a conditional in header.php?
    <?php if ( is_page(array(‘page-name’,’page-name’)) ) { ?>
    <link rel=”stylesheet” href=”/wp-content/themes/theme-name/style-2.css” type=”text/css” media=”screen” />
    <?php } else { ?>
    <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />
    <?php } ?>

  17. Alexcp says:

    Like Marz said, you can use a conditional tag instead. I think this technique is better and you can easily customize it.
    For example I use so I can repeat a template on multiple child category.
     
    To do it, first save the content of the category.php file as category_default.php
    then in category.php delete eveything and replace it with:

    <?php
    $post = $wp_query->post;
    if (in_category(‘catname1′)) {
    include(TEMPLATEPATH.’/catname1.php’);
    } elseif (in_category(‘catname1′)) {
    include(TEMPLATEPATH.’/catname2.php’);
    }
    else{
    include(TEMPLATEPATH.’/category_default.php’);
    }
    ?>

  18. [...] useful link that I referenced to get this blog’s design to work with the different categories:Giving different styles to different WordPress categories.Think outside the [...]

  19. rotem says:

    hi !
    can i do different sidebar in each page ?
    different (text)
    thank you

  20. Tim says:

    Thank you very much……. Your article help me resolve my css problems.

Leave a Reply




If you want a picture to show with your comment, go get a Gravatar.

More in Tips (60 of 95 articles)