Different background-image by category

by

I am trying to put different body background-image for each category. 

body { 
background-color: #000; 
background-image: url(img/bg.png); 
background-repeat: no-repeat; 
background-position: center top; 
font-size: 14px; color: #555; 
font-family: Arial, Helvetica, Verdana, sans-serif; }

I only want different background-image: url(img/bg.png); for each catecory.

I found one possible method. It’s like that:

<link rel="stylesheet" href="" type="text/css" media="screen,projection" /> 
<? php if( is_category(1) ) { ?> 
<link rel="stylesheet" href="" type="text/css" media="screen" /> 
<?php } 
elseif ( is_category (2) ) { ?> 
<link rel="stylesheet" href="" type="text/css" media="screen" /> 
<?php } 
elseif ( is_category (33) ) { ?> 
<link rel="stylesheet" href="" type="text/css" media="screen" /> <?php } 
else { ?> <?php } ?>

Still, I´m pretty sure it is not the best possible way to achieve my goal, because:

1) It looks for the whole stylesheet
2) It makes queries inside the header.php which might not be the best way considering page speed

My idea is to create different body classes:

body.apple { code here }
body.area { code here }
body.usa { code here }
body.bolt { code here }
body.jennifer { code here }

… or whatever.

I just need php to load different body classes from a single stylesheet for different categories.

Does anyone have a good solution?

4 Answers
4

You can do this using WordPress’s handy body_class() function. Depending on whether and how it is used in your theme, it may already be giving you what you need. Here’s how to find out:

Check the source of your page to see if the <body> tag in your category archive pages has any classes containing your category slug: category-apple, category-area, category-usa, etc. These will typically be included by default.

  • If they are there, you can use these as selectors in your CSS: body.category-apple { /* code here */ }, etc.

  • If not, add the body_class() function to the <body> tag in your theme, probably located in header.php. It works like this:

    <body <?php body_class(); ?>>

Optionally, you can add any extra class you want as a parameter.

Here’s the entry in the WordPress Codex: http://codex.wordpress.org/Function_Reference/body_class

Leave a Comment