Change CSS Styles with Different Categories in WordPress
Posted on 10. Feb, 2010 by Alex Denning in Art Direction
THE PROBLEM
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!
Enjoyed the post? We'll see you on Twitter or in your RSS reader!
WPShout is hosted by the fine folks at WPWebHost.
You can get exactly the same hosting as WPShout has for $7.95/month with WPWebHost's Freedom Plan.
Plus get 30% off the Freedom Plan with the code WPSHOUT.
Alex Denning is the founder of WPShout. A WordPress developer from London, Alex is a keen musician and freelance writer and developer.
You can find Alex on Twitter.
9 Responses to “Change CSS Styles with Different Categories in WordPress”
Leave a Reply
- WordPress Theme Design Basics
- Create An Advanced Options Page in WordPress
- Premium Frameworks Reviewed
- Creating A Tumblog With WordPress
- 10 Practical WordPress Security Tips
- A to Z of WordPress .htaccess Hacks
- WordPress Theme Design Basics
- 10 WordPress Plugins That Every Blog Needs
- 10 Awesome Things To Do With WordPress' Custom Fields
- How To Stop An Eithical Hacker Breaking Into Your WordPress Site
Get The Hosting
WPShout is hosted by the fine folks at WPWebHost who ensure everything runs smoothly.
You can get exactly the same hosting as WPShout has for $7.95/month with WPWebHost's Freedom Plan.
Plus get 30% off the Freedom Plan with the code WPSHOUT.
Get The Look
WPShout uses the WooFramework in order to ensure everything looks lovely and runs properly.
You can get the WooFramework with all WooThemes from $15/month and use the same code as WPShout.
Devin
10. Feb, 2010
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
10. Feb, 2010
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
11. Feb, 2010
Yeps! I totally agree with you, Devin.
Alex Denning
15. Feb, 2010
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
29. Jan, 2011
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
11. Jan, 2011
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
20. Jan, 2011
Thanks so much, I’ve been looking for this example for way too long!!
Paulo Ramalho
24. Feb, 2011
Thank you, just a simple way to do hard things.
It’s what I looking for my new site.
Thanks Alex
Popcorn Design
10. Nov, 2011
Fantastic I’ve been searching this for a while, saved me lots of time, thank you!