How to Add a Custom Body Class Based on Category

WordPress automatically adds category-based body classes on archive pages (e.g. category-travel), but single post pages do not get a category body class by default. This means you cannot target posts by category with CSS unless you add it yourself.

The Snippet

Add this to your child theme’s functions.php:

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

This adds one body class per category the post belongs to, using the same format WordPress uses on archives: category-{slug}. A post in both “Travel” and “Food” categories gets both category-travel and category-food.

Using It with CSS

Once the class is in place, you can target it in Additional CSS or your child theme stylesheet. For example, to disable the drop cap on all posts in the “News” category:

.category-news .aurora-dropcap::first-letter {
    font-size: inherit;
    float: none;
    font-weight: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
}

Or to apply a different sidebar background on a specific category:

.category-recipes .site-sidebar {
    background-color: #fdf6ec;
}

Aurora’s Built-in Body Classes

Aurora already adds several body classes of its own, including vertical-header for vertical header layouts and dropcase-{style} when the drop cap is enabled. The category class above adds to these without conflict. See Aurora’s CSS Variables for other ways to customise specific elements.