Using WordPress ‘body_class()’ PHP function

by

The body_class() WordPress PHP function outputs the class names for the HTML body element. This function aids in applying distinct styles to different parts of your WordPress site.

Usage

Here’s a simple usage of the function where we add a custom class ‘my-custom-class’:

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

In the rendered HTML, this might appear as:

<body class="page page-id-2 page-parent page-template-default logged-in my-custom-class">

Parameters

  • $css_class (string|string[]): Optional. Space-separated string or array of class names to add to the class list. Default is ” (empty string).

More Information

See WordPress Developer Resources: body_class()

Examples

Add a New Class to Body

add_filter( 'body_class', 'wp_body_classes' );

function wp_body_classes( $classes ) {
    $classes[] = 'new-class';
    return $classes;
}

In this example, the ‘new-class’ is added to the body classes.

Add a Class to a Specific Page Template

add_filter( 'body_class', 'custom_class' );

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

Here, the ‘example’ class is added if the current page uses ‘page-example.php’ template.

Add Multiple Classes Conditionally

add_filter( 'body_class', 'wpdocs_custom_class' );

function wpdocs_custom_class( $classes ) {
    if ( is_page_template( 'page-example.php' ) ) {
        $classes[] = 'example';
    }
    if ( wpdocs_another_function() ) {
        $classes[] = 'another';
    }
    return $classes;
}

In this example, ‘example’ and ‘another’ classes are added based on certain conditions.

Remove a Specific Class from Body

add_filter('body_class', function (array $classes) {
    if (in_array('class-to-remove', $classes)) {
        unset( $classes[array_search('class-to-remove', $classes)] );
    }
    return $classes;
});

This example shows how to remove ‘class-to-remove’ from the body classes.

Add Class to Body on Specific Pages

add_filter( 'body_class', function( $classes ) {
    if ( is_page( 'login' ) ) {
        $classes[] = 'login';
    } elseif ( is_page( 'register' ) ) {
        $classes[] = 'register';
    } elseif ( is_page( 'password-reset' ) ) {
        $classes[] = 'reset';
    }
    return $classes;
});

In this example, depending on the page being viewed (‘login’, ‘register’, or ‘password-reset’), a specific CSS class is added to the body tag of the HTML document.