Home / WordPress / How to add custom class in body tag in WordPress

How to add custom class in body tag in WordPress

Published On: May 23rd, 2020|Categories: WordPress|Tags: hooks|3 min read|

Did you know there’s a built-in WordPress hook that filters the classes in <body> tag in your site? I’m talking about the body_class WordPress hook. It filters the list of CSS body class names for the current post or page.

Adding additional body classes is useful when you want to differentiate the post/page: if the user is logged in or not, if the device is mobile or dekstop, if the user uses specific browser like Chrome, if the user is subsriber. The list goes on and on… you name it. Lets see how to use body_class hook.

PHP Snippet: How to add new class to body tag if the user is not logged-in.

For demo purpose lets add body class ‘not-logged-in’ if :D the user is not logged-in. Add the following code to your child theme’s functions.php.

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

    if ( !is_user_logged_in() ) {
        $classes[] = 'not-logged-in'; // your custom class name
    }

    return $classes;
}

PHP Snippet: How to add new class to body tag if the user is subscriber.

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

    $user = wp_get_current_user();

    if ( in_array( 'subscriber', $user->roles ) ) {
        $classes[] = 'class-name'; // your custom class name
    }

    return $classes;
}

If you remove the IF statement the class ‘not-logged-in’ will be added in both scenarios when the user is logged and when the user is not (which is not very usefull though).

PHP Snippet: add usefull body classes to WordPress

The following function adds CSS classes that may be useful:

function my_body_class( $classes )
{   
    $include = array
    (
        // browsers/devices (https://codex.wordpress.org/Global_Variables)
        'is-iphone'            => $GLOBALS['is_iphone'],
        'is-chrome'            => $GLOBALS['is_chrome'],
        'is-safari'            => $GLOBALS['is_safari'],
        'is-ns4'               => $GLOBALS['is_NS4'],
        'is-opera'             => $GLOBALS['is_opera'],
        'is-mac-ie'            => $GLOBALS['is_macIE'],
        'is-win-ie'            => $GLOBALS['is_winIE'],
        'is-gecko'             => $GLOBALS['is_gecko'],
        'is-lynx'              => $GLOBALS['is_lynx'],
        'is-ie'                => $GLOBALS['is_IE'],
        'is-edge'              => $GLOBALS['is_edge'],
        // WP Query (already included by default, but nice to have same format)
        'is-archive'           => is_archive(),
        'is-post_type_archive' => is_post_type_archive(),
        'is-attachment'        => is_attachment(),
        'is-author'            => is_author(),
        'is-category'          => is_category(),
        'is-tag'               => is_tag(),
        'is-tax'               => is_tax(),
        'is-date'              => is_date(),
        'is-day'               => is_day(),
        'is-feed'              => is_feed(),
        'is-comment-feed'      => is_comment_feed(),
        'is-front-page'        => is_front_page(),
        'is-home'              => is_home(),
        'is-privacy-policy'    => is_privacy_policy(),
        'is-month'             => is_month(),
        'is-page'              => is_page(),
        'is-paged'             => is_paged(),
        'is-preview'           => is_preview(),
        'is-robots'            => is_robots(),
        'is-search'            => is_search(),
        'is-single'            => is_single(),
        'is-singular'          => is_singular(),
        'is-time'              => is_time(),
        'is-trackback'         => is_trackback(),
        'is-year'              => is_year(),
        'is-404'               => is_404(),
        'is-embed'             => is_embed(),
        // Mobile
        'is-mobile'            => wp_is_mobile(),
        'is-desktop'           => ! wp_is_mobile(),
        // Common
        'has-blocks'           => function_exists( 'has_blocks' ) && has_blocks(),
    );
 
    // Sidebars
    foreach ( $GLOBALS['wp_registered_sidebars'] as $sidebar ) 
    {
        $include[ "is-sidebar-{$sidebar['id']}" ] = is_active_sidebar( $sidebar['id'] );
    }
 
    // Add classes
 
    foreach ( $include as $class => $do_include ) 
    {
        if ( $do_include ) $classes[ $class ] = $class;
    }
 
    // Return
 
    return $classes;
}
 
add_filter( 'body_class', 'my_body_class' );

PHP snippet: Remove an existing body class in WordPress

The body_class hook can be also used to remove an existing body class by un-setting the key from the $classes array.

// Removes a class from the body_class array.
 
add_filter( 'body_class', function( $classes ) {
    if ( isset( $classes['class-to-remove'] ) ) {
        unset( $classes['class-to-remove'] );
    }
    return $classes;
} );