WordPress – Customization with WP Body Class Function

by Matthias Gallo

The following function can be added to a WordPress theme or plugin. Its purpose is to add CSS classes to the body element of a webpage, which can be useful for targeting specific browsers/platforms or pages with CSS.

Let’s see an example:

<body class="liin-p-type-project liin-p-id-44 liin-is-browser-chrome liin-is-platform-macosx liin-is-locale-en_GB">
...

By incorporating the function, we can distinguish the following:

Agent Browser: in the example above chrome
Agent Platform: in the example above macosx
Locale: in the example above en_GB
Post Type: in the example above project
Post ID: in the example above 44

function liin_add_body_css_classes() {

    $body_css_classes = [];

    /* POST TYPE */
    $post_type = get_post_type();
    if ( $post_type != false ) {
        $body_css_classes[] = 'liin-p-type-' . $post_type;
    }

    /* POST ID */
    $post_id = get_the_ID();
    if ( $post_id != false ) {
        $body_css_classes[] = 'liin-p-id-' . $post_id;
    }

    /* TEMPLATE NAME */
    $post_template = substr( basename( get_page_template() ), 0, -4);
    if ( !empty($post_template) ) {
        $body_css_classes[] = 'liin-p-' . $post_template;
    }

    /* BROWSER */
    $browser = get_browser(null, true);
    if ( is_array($browser) && array_key_exists('browser', $browser) ) {
        $body_css_classes[] = 'liin-is-browser-' . str_replace(' ', '-', strtolower($browser['browser']));
    }

    /* PLATFORM */
    if ( is_array($browser) && array_key_exists('platform', $browser) ) {
        $body_css_classes[] = 'liin-is-platform-' . str_replace(' ', '-', strtolower($browser['platform']));
    }

    /* LOCALE */
    if ( is_array($browser) && array_key_exists('platform', $browser) ) {
        $body_css_classes[] = 'liin-is-locale-' . get_locale();
    }

    /* BOT AND CRAWLER */
    if ( isset($_SERVER['HTTP_USER_AGENT']) && preg_match('/bot|crawl|slurp|spider|mediapartners/i', $_SERVER['HTTP_USER_AGENT']) ) {
        $body_css_classes[] = 'liin-is-agent-bot';
    }

    return $body_css_classes;

}
add_filter('body_class', 'liin_add_body_css_classes');

In WordPress, the body_class hook is a filter that adds classes to the body element of the page. This hook allows developers to modify the default classes added to the body element of a page, or to add custom classes based on various conditions or criteria.

Credits

Image by Aron Visuals on Unsplash

WordPress – Customization with WP Body Class Function

Related

WordPress – Disabling the Theme and Plugin Editor Panel

WordPress – Limit Login Attempts Without Plugin