0

Is it possible to change the background color of every post based on its category?

I have tried -

body.term-adb {
background-color: #000;

but this only changes the category page, not the individual posts backgrounds tagged with that category.

Where am I going wrong?

Here is the page I'm currently working on

2

The body_class() is what controls those classes, and does not include the category in single posts. That is why the CSS doesn't work once you click through to a post.

I did find a function that may help, though. Try placing this in your functions.php. This will add the current post's category back to the body class. You should be able to style your pages easier once the class is available. Double the classes on the body tag if it's still not working, and make sure it matches your CSS.

add_filter('body_class','add_category_to_single');
function add_category_to_single($classes) {
    if (is_single() ) {
        global $post;
        foreach((get_the_category($post->ID)) as $category) {
            $classes[] = 'category-'.$category->slug;
        }
    }
    return $classes;
}

References:

  1. https://codex.wordpress.org/Function_Reference/body_class
  • I tried doing this before attempting to change it via css and it just created problems with my header – Social Monster Sep 8 '15 at 22:54
  • The answer is pretty much correct (+1). Problem might be, that the global $post isn't what is expected. You might want to add a if ( property_exists( $post, 'ID' ) ) { before that. The same goes get_the_category(), which returns and array, which could as well be empty (nothing to loop). Also, and this is the only culprit with this answer, you can not echo in a filter callback, which means that you should just concatenate to a string there: $classes[] = "term-{$category->slug} {$category->cat_name}". – kaiser Sep 8 '15 at 23:00
  • I'm also not sure if cat_name is the right property, but this can be looked up with a simple var_dump( $category ) up front. – kaiser Sep 8 '15 at 23:00
  • 1
    Thank you @kaiser, I edited the code before I saw your comments - I got it working on a clean test install of Wordpress 4.3. If there is no category, it will still return a category for "uncategorized". – Curtis Sep 8 '15 at 23:05
  • @SocialMonster let me know if the new code works for you - appears to be working on my test install. – Curtis Sep 8 '15 at 23:10
0

Sure that is possible. Take a look at the output of

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

You get a bunch of taxonomy related classes there:

  • tax-portfolio_category << tax-{$taxonomy_name}
  • term-adb << term-{$term_name}
  • term-22 << term-{$term_id}

Hope that helps.

  • I've tried all of those and it changes just the main category page, not the individual posts tagged under those categories – Social Monster Sep 8 '15 at 22:53
  • @SocialMonster The answer from Curtis above is what you should aim for to get to work. – kaiser Sep 8 '15 at 23:28

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.