Skip to content

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; the is_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!

Yay! 🎉 You made it to the end of the article!
Alex Denning
Share:

9 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
imischa
August 7, 2012 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.

imischa
August 2, 2012 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!

Popcorn Design
November 10, 2011 11:53 am

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

Paulo Ramalho
February 24, 2011 4:03 pm

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

Kira
January 29, 2011 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?

Ali
January 20, 2011 2:35 am

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

Remittance Girl
January 11, 2011 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.

Ashfame
February 11, 2010 5:13 pm

Yeps! I totally agree with you, Devin.

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!