Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question

4 Answers 4

up vote 4 down vote accepted

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

share|improve this answer
    
Thaks @supertrue, it was really helpful. Beers on me mate ;) –  Meigo Al Dozary Feb 17 '13 at 20:22

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

PHP

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

Output on category "jennifer"

<body class="category-jennifer">
share|improve this answer

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' ); 
share|improve this answer

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');
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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