Different background color for each WordPress category?

October 31, 2013 4:55 AM

Just like it sounds above - for some reason this has been much more difficult than expected. More inside, naturally.

I'd like to apply a different colored background to selected categories of a website. It's WordPress based, so I figured it would be easy as pie to find an example that worked...

The goal:
Category A's background color should be #000000.
Category B's background color should be #FF0000.
Category C's background color should be #0000FF.
All other categories should be #123456.

Three hours later, I'm still looking. I started looking at plugins and found this (http://codecanyon.net/item/category-colors/5587892), but there has a simple, free way to do this seemingly simple thing?

posted by chrisinseoul to Computers & Internet (5 answers total)

There are numerous ways to go about it, but my approach would be to add a filter to the body_class() template tag. So you'd add something like this to the functions.php file:

add_filter( 'body_class', 'cat_color_body_class');
function cat_color_body_class($classes) {
if (is_category(1)) {
$classes[] = 'category_A_class';
} else if (is_category(2)) {
$classes[] = 'category_B_class';
} else if (is_category(3)) {
$classes[] = 'category_C_class';
}

return $classes;
}

In the function, category 1 is the category ID corresponding to your first category (A).
You'd then need to create the css for category_A_class, category_B_class etc. in your theme's css file.

I haven't tested any of this, so take it with a pinch of salt.

If you're not happy messing with code, I'm sure a friendly MeFite would oblige.
posted by pipeski at 5:21 AM on October 31, 2013

http://codex.wordpress.org/Category_Templates
http://wordpress.org/support/topic/different-css-based-on-category
posted by yoHighness at 5:25 AM on October 31, 2013

I need to do this for a client site myself to have different header graphics for certain categories. My plan (as yet untested) is to set up a child theme, then spin off edited page templates as needed. I'll keep an eye on this thread.
posted by omnidrew at 7:02 AM on October 31, 2013

I came in to suggest what pipeski did. Should work for you too, omnidrew. Just use the class in your css

body.category_B_class {
background-color: #f00;
}

For omnidrew you might do:

body.category_B_class .entry-content {
background: url('images/bannerB.png') no-repeat;
padding-top: 220px; // banner height + extra space
}
posted by backwards guitar at 9:33 AM on October 31, 2013

Built into WordPress is post_class() - which is a function to return a list of classes for the current post that includes ones based on the category. If your theme implements this for all different pages - front, index, archive, etc, then you'll have no trouble adding a background color on a per post basis.

Where it gets confusing is that posts can be in more than one category, in which case the CSS cascade will be the thing which determines priority for the class. The example the

The WordPress docs gives this example of a div with this function:

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

And what the output should be:

<div id="post-4564" class="post post-4564 category-48 category-dancing logged-in">

As you can see, this will give you the classes you'll need to hook to. by numeric ID of the class names (in case they'll change) or by the name. I suspect .category-category-a .category-categoryb and .category-category-c would be the class names from your example.

Moreover, it's possible if you only want this or the category archive pages, you'd want the same idea for body_class().
posted by artlung at 8:34 PM on November 3, 2013