Adding to the Body Class in WordPress

In this short tutorial, we look at the WordPress body class and how we can manipulate it using core API calls.

Specifically, we cover adding body classes, removing body classes, conditionally adding body classes and some use cases.

The Body Class: What Can It Be Used For?

The body class in WordPress is a class or series of classes that are applied to the HTML body element. This is useful for applying unique styles to different areas of a WordPress site as body classes can be added conditionally.

WordPress contains a number of default body classes which are covered in this article.

Adding to the Body Class

There are a few methods available to us for adding new body classes within WordPress. This tutorial is going to cover adding the body class within a theme (usually defined in header.php) using the body_class function and adding classes using a filter.

Editing the Theme: Passing a Body Class Value

This is a really simple way to add body classes and is especially useful if you are creating a theme. The body class is normally included in a theme using the following code:

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

To add your own class to this, you can pass an argument in to the function, like so:

<body <?php body_class( 'my-class' ); ?>>

This would add a body class of my-class on each page of your WordPress site.

Adding Multiple Body Classes

There may be times when you want to add more than one body class. This can be achieved using a simple array:

<body <?php body_class( array( "class-one", "class-two", "class-three" ) ); ?>>

This takes all of the classes in the array, and passes them to the body_class function.

Conditionally Adding a Body Class

You may also want to conditionally add a body class. This is easy with some simple PHP. This example uses the WooCommerce conditional method of is_shop() :

<?php if ( is_shop() ) { body_class( 'is-woocommerce-shop' ); } else { body_class(); } ?>

Note: WooCommerce already adds a class based on this, so note that this is purely an example.

What the above code is doing, is checking that the first function is returning true, if it is true then the body class has is-woocommerce-shop added to it; otherwise, if it's not true then just the default body class is being displayed.

Adding a Body Class by Filter

It's possible to use a WordPress filter to add a body class, too. This method keeps the theme code cleaner and is particularly useful if you want to add a body class from a plugin. This code can either go in your themes functions.php or within your plugin.

add_filter( 'body_class','my_body_classes' );
function my_body_classes( $classes ) {

    $classes[] = 'class-name';
    
    return $classes;
    
}

This adds a class (or classes, depending on your implementation) to the array and returns them.

Adding Multiple Body Classes by Filter

To add more classes to the filter, just add another line that adds another value in to the array:

add_filter( 'body_class','my_body_classes' );
function my_body_classes( $classes ) {

    $classes[] = 'class-name';
    $classes[] = 'class-name-two';
    
    return $classes;
    
}

Conditionally Adding a Body Class by Filter

Conditions can also be used in a filter. Taking the same example that we used earlier, we can achieve the same effect:

add_filter( 'body_class','my_body_classes' );
function my_body_classes( $classes ) {

    if ( is_shop() ) {
    
        $classes[] = 'class-name';
        $classes[] = 'class-name-two';
        
    }
    
    return $classes;
    
}

Adding a Body Class Based on the Page Template

By default, WordPress adds a body class for your page template, but if you are a front-end developer and have naming conventions for your CSS then you may want to change this.

As an example, a page template called "halfhalf" would have a body class of page-template-page-halfhalf-php - not great.

So let's add a new class, using a filter and a WordPress conditional tag:

add_filter( 'body_class','halfhalf_body_class' );
function halfhalf_body_class( $classes ) {

    if ( is_page_template( 'page-halfhalf.php' ) ) {
        $classes[] = 'halfhalf-page';
    }
    
    return $classes;
    
}

This will add the body class halfhalf-page if the page template is page-halfhalf.php.

Removing a Body Class

It's unlikely that you will want to remove a body class, as you are not forced to use them and they add very little to your markup. That said, it is possible to do this using the same body_class filter.

add_filter( 'body_class', 'adjust_body_class' );
function adjust_body_class( $classes ) { 

    foreach ( $classes as $key => $value ) {
        if ( $value == 'woocommerce-page' ) unset( $classes[ $key ] );
    }
    
    return $classes; 
    
}

Credit: this code is modified from this article.

In this example we are looping through the array of class names, unsetting the class name woocommerce-page if it exists, and then returning the classes, minus any that were removed.

That's All Folks!

In this small tutorial we have covered two methods of adding to the WordPress body class:

By using the body_class function within a theme,
And by using a filter.

We have also covered adding body classes conditionally and removing classes, should you ever need to do in future development.

HIGHLIGHTS OF THE DAY