Alex Turnwall designer + developer
Learn, WordPress

Unique styling with custom classes added to the body tag in WordPress


Sometimes when I’m making a site, I need to alter the overall page styles for a whole section, or collection of pages. To do this, I prefer adding a new class to the <body> tag so that I can target all of the children easily using CSS nesting.

Let’s say I’m making a new website for a business with “marketing” pages that have a default style (maybe a white background), and then a “blog” that looks a little different (maybe a grey background), so that readers know they’re in a different place.

If I wanted to alter the appearance of the blog section, I would add an additional class to all of the body tags for every page and post that will be visually part of the blog, like this:

On my HTML templates:

<body class="blog-section">

In my CSS:

body {
    background: white; 
}
body.blog-section {
    background: grey;
}

Then, it makes it easy to select any element on the page with CSS, since every element is a child of the body:

 body.blog-section p { 
    font-family: sans-serif; 
}

(In practice, I’ll end up with a different SASS file where all of the children are nested under the body class, but it ends up compiling to something like the above.)

If I were hand coding a site, I would add specific classes to the body tag on every page and then be off to style. But, if we’re using WordPress as our CMS, we can take a bit of a shortcut and add the class to a whole swath of page templates pretty easily.

Doing it with WordPress Themes

If you’re working with WordPress themes, it’s likely that the code for the <body> tag is in a header template somewhere once, meaning we’re going to have to conditionally override it based on the template being served. Luckily, the body_class filter makes quick work of this.

In your functions.php file:

// Add classes to the <body> element for the blogs
function custom_body_classes( $classes ){
    if ( is_home() || is_singular('post') || is_category() || is_tag() || is_tax() || is_page_template('page-blog-home.php') ) {
        $classes[] = 'blog-section';
    }
    return $classes;
}
add_filter( 'body_class', 'custom_body_classes' );

This function makes use of the body_class filter to add the classes you specify (here blog-section) to the appropriate templates. In the example above, I’m adding the class to my blog homepage, all posts, category archives, tag archives, taxonomy archives and a special page template I’m using to display a custom home page, page-blog-home.php. These pages comprise my simple blog.

So, now I’ve got the blog-section class at my disposal on the body element (as mentioned above in the simplified HTML above) and I can make use of it in my CSS.

That’s all you need to add one distinct class.

Adding another unique section

But, let’s say I’m expanding my site. Now, in addition to “marketing” pages and the blog, my team wants a third section for a help center, and they want the background to be blue now. It’s pretty easy to just add to the existing function:

function custom_body_classes( $classes ){
    if ( is_home() || is_singular('post') || is_category() || is_tag() || is_tax() || is_page_template('page-blog-home.php') ) {
        $classes[] = 'blog-section';
    }
    // Adding a new section for my help center
    elseif ( is_singular('help_article') || is_page_template('page-help-center-home.php') || is_post_type_archive('help_article') || is_tax('help_category') ) { 
        $classes[] = 'help-center-section'; 
    }
    return $classes;
}
add_filter( 'body_class', 'custom_body_classes' );

Here, I’m adding a new class help-center-section to more templates that are a mix of custom post types and custom taxonomies: all “help article” posts, their archives, a custom taxonomy archive called “help category” and a special page template I’m using to display a custom help center home page, page-help-center-home.php. These pages comprise my new help center.

Now in my CSS, I can start styling those pages using the new body class:

body.help-center-section {
    background: blue;
}

There you have it—a simple way to make distinct sections of your next WordPress theme feel custom, while using the same install.

Happy coding.

Leave a Reply

Your email address will not be published. Required fields are marked *