Change CSS Styles with Different Categories in WordPress

Recently I needed to set up WordPress to change the background colour of the page with each parent category.

After a bit of Googleing, it appeared no-one had an easy answer, so I turned to my good friend the if statement. I thought I’d combine an if statement with the WordPress template tag IS_CATEGORY. Soon turned out that that wasn’t an option; theis_category template tag only works for archive pages, not posts themselves.

THE SOLUTION

The solution was another template tag, IN_CATEGORY. Combine that with a number of different CSS files, each with a different colour, and I was left with the following:

<link rel="stylesheet" href="<?php bloginfo('template_url')?>/blue.css" type="text/css" media="screen,projection" /> <?
php if( in_category( 1 ) ) { ?> <link rel="stylesheet" href="<?php bloginfo('template_url')?>/blue.css" type="text/css" media="screen" /> <?php } 
elseif ( in_category (2) ) { ?> <link rel="stylesheet" href="<?php bloginfo('template_url')?>/yellow.css" type="text/css" media="screen" /> <?php } 
elseif ( in_category (33) ) { ?> <link rel="stylesheet" href="<?php bloginfo('template_url')?>/black.css" type="text/css" media="screen" /> <?php } 
else { ?> <?php } ?>

And that’s it. Obviously, you’ll need to put the code in the header.php file and have these different stylesheets created, but other than that, done!

Have you noticed WPShout loads super-fast? That's because the site is running on the super-amazing WPEngine hosting.

Fed up of shared hosts that don't work? Give them a try.

About the author

Hello, I'm Alex! WPShout is my collection of WordPress tutorials which I started 4 years ago, just before my 16th birthday. If you need someone to make you WordPress screencasts or documentation for your product or service, get in touch — I'll be able to help you out. You should also follow me on Twitter :)

11 Comments

  • Devin
    on Feb 10, 2010
    at 9:03 pm

    I do this with <a href="http://wordpresstheming.com/2009/12/dynamic-body-classes-wordpress-styling/"dynamic body classes, which means I can style on the basis of category + page, single, archive, date, tag, etc.

  • Devin
    on Feb 10, 2010
    at 9:06 pm

    I do this with dynamic body classes, which means I can style on the basis of category + page, single, archive, date, tag, AND browser etc.

    I think your technique makes sense if there is a huge stylesheet with lots of differences- but if it something simple like just a background color change, styling with the body classes might be the way to go.

    • Ashfame
      on Feb 11, 2010
      at 5:13 pm

      Yeps! I totally agree with you, Devin.

    • Alex Denning
      on Feb 15, 2010
      at 3:37 pm

      Yep. They’re certainly the other way to do it; I had written half a post saying you can do it this way too, but scrapped it as customisation is limited.

    • Kira
      on Jan 29, 2011
      at 8:31 pm

      Devin I have a question with body class… or more “get post class”, Im doing a totally different style (image, text, positioning, etc) for a category post and I want to write this in functions.php so I have no problem in upgrading…

      problem is… I dont quite know how I should list this in functions.php and how to call t in index.php?

      Help?

  • Remittance Girl
    on Jan 11, 2011
    at 8:21 am

    Wonderful, wonderful! THank you so much, this was just what I was looking for to style each of my online novellas differently and not resort to linking to static sites.

  • Ali
    on Jan 20, 2011
    at 2:35 am

    Thanks so much, I’ve been looking for this example for way too long!!

  • Paulo Ramalho
    on Feb 24, 2011
    at 4:03 pm

    Thank you, just a simple way to do hard things.
    It’s what I looking for my new site.
    Thanks Alex

  • Popcorn Design
    on Nov 10, 2011
    at 11:53 am

    Fantastic I’ve been searching this for a while, saved me lots of time, thank you!

  • imischa
    on Aug 02, 2012
    at 9:53 am

    You can also use the is_page if you make use of a Page instead of Posts in Categories.
    Just replace all in_category with is_page and the correct page ID!

  • imischa
    on Aug 07, 2012
    at 10:56 am

    Actually easier is to make use of the Plugin Ninja Pages, Categories, and Tags. This way you can use pages and the same code as Alex!

    Make sure you mark the pages with the correct catagories.