Change CSS Styles with Different Categories in WordPress

Posted on 10. Feb, 2010 by Alex Denning in Theme Development

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!

Related posts:

1. Better iPhone WordPress Themes
2. Really Easy Custom Post Backgrounds For WordPress

Enjoyed the post? We'll see you on Twitter or in your RSS reader!