Select Page

Do you want to add a class to the tag in WordPress based on what browser and operating system a visitor uses?
Adding a class called Windows or macOS to the body tag allows you to add styles to your website that are only shown to those operating systems. You can also show different elements on your page based on the user’s browser.

Place this code in your theme’s functions.php file or create a custom plugin with this code:

// Add the function to the 'body_class' filter
add_filter( 'body_class', 'wp_obsessed_add_browser_os_classes' );

// Function to add browser and Operating System classes to WordPress Body Class
function wp_obsessed_add_browser_os_classes( $classes ) {
    // Get the browser User Agent
    global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
    
    // Set up variables to hold browser and OS classes
    $browser_class = '';
    $operating_system_class = '';
    
    // Check for the browsers
    if($is_lynx) $browser_class = 'lynx';
    elseif($is_gecko) $browser_class = 'gecko';
    elseif($is_opera) $browser_class = 'opera';
    elseif($is_NS4) $browser_class = 'ns4';
    elseif($is_safari) $browser_class = 'safari';
    elseif($is_chrome) $browser_class = 'chrome';
    elseif($is_IE) $browser_class = 'ie';
    else $browser_class = 'unknown-browser';

    // Check for Operating systems
    if(stristr($_SERVER['HTTP_USER_AGENT'],"Mac")) $operating_system_class = 'mac';
    elseif(stristr($_SERVER['HTTP_USER_AGENT'],"linux")) $operating_system_class = 'linux';
    elseif(stristr($_SERVER['HTTP_USER_AGENT'],"windows")) $operating_system_class = 'windows';
    else $operating_system_class = 'unknown-os';
    
    // Add the browser and Operating system classes to the WordPress Body Class
    $classes[] = $browser_class;
    $classes[] = $operating_system_class;
    
    // Return the modified WordPress Body Class
    return $classes;
}

This code adds browser and operating system classes to the WordPress body class. It does this by adding a function to the ‘body_class’ filter, which is a WordPress hook that allows you to add custom classes to the body element of a WordPress site.

The function first defines global variables containing information about the visitor’s browser. It then sets up some empty variables called $browser_class and $operating_system_class, which will be used to store the classes that are added to the body element.

Next, the function checks for the visitor’s browser using a series of if statements. If one of the variables is true, the corresponding $browser_class variable is set to the browser’s name. If none of the variables are set, the $browser_class variable is set to ‘unknown-browser’.

The function then checks for the visitor’s operating system by looking at the HTTP_USER_AGENT string in the server variables. If the string contains the word “Mac”, the $operating_system_class variable is set to ‘mac’. If it contains the word “linux”, it is set to ‘linux’. If it contains the word “windows”, it is set to ‘windows’. If none of these conditions are met, the $operating_system_class variable is set to ‘unknown-os’.

Finally, the function adds the $browser_class and $operating_system_class variables to the $classes array and returns the modified array. This will add the browser and operating system classes to the body element of the WordPress site.