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?


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

  • Thaks @supertrue, it was really helpful. Beers on me mate ;) – Meigo62 Feb 17 '13 at 20:22

This is already built-in: the function body_class() creates special classes for each category:


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

Output on category "jennifer"

<body class="category-jennifer">

If you theme is using body_class as it should be, then you already have all the classes you need.

For categories, you should have:

  • category
  • category-cat-name
  • category-(id)
  • category-paged-(page number)

If you have a lot of category rules, I'd suggest you conditionally load a stylesheet only for category archives. If you only have few rules it isn't worth it. Just include them in the main stylesheet.

function load_cat_style_wpse_87295() {
   if (!is_category()) return false;
   wp_register_style( 'catstyle', get_stylesheet_directory().'/path/to/stylesheet', false, null, 'all' );
   wp_enqueue_style( 'catstyle' );
add_action( 'wp_enqueue_scripts', 'load_cat_style_wpse_87295' ); 

As said in other answers here, when you're on a category page, the body_class function already provides you with a class for the current category.

However, if you want the background-image to persist also in the category's posts, you can use the code provided by the codex on the body_class function and filter:

// add category nicenames in body class
function category_id_class($classes) {
   global $post;
   foreach((get_the_category($post->ID)) as $category)
        $classes[] = $category->category_nicename;
   return $classes;
 add_filter('body_class', 'category_id_class');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.