Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Add User Browser and OS Classes in WordPress Body Class

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

When developing WordPress themes, sometimes you may need user’s browser and operating system information to modify certain aspects of your design using CSS or jQuery. WordPress is capable of doing that for you. In this article, we will show you how to add user’s browser and OS classes in WordPress body class.

Detecting user platform and browser in WordPress

By default WordPress generates CSS classes for different sections of your website. It also provides filters, so that theme and plugin developers can hook their own classes. You will be using the body_class filter to add browser and operating system information as CSS class.

First thing you need to do is add the following code in your theme’s functions.php file.

        function mv_browser_body_class($classes) {
                global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
                if($is_lynx) $classes[] = 'lynx';
                elseif($is_gecko) $classes[] = 'gecko';
                elseif($is_opera) $classes[] = 'opera';
                elseif($is_NS4) $classes[] = 'ns4';
                elseif($is_safari) $classes[] = 'safari';
                elseif($is_chrome) $classes[] = 'chrome';
                elseif($is_IE) {
                        $classes[] = 'ie';
                        if(preg_match('/MSIE ([0-9]+)([a-zA-Z0-9.]+)/', $_SERVER['HTTP_USER_AGENT'], $browser_version))
                        $classes[] = 'ie'.$browser_version[1];
                } else $classes[] = 'unknown';
                if($is_iphone) $classes[] = 'iphone';
                if ( stristr( $_SERVER['HTTP_USER_AGENT'],"mac") ) {
                         $classes[] = 'osx';
                   } elseif ( stristr( $_SERVER['HTTP_USER_AGENT'],"linux") ) {
                         $classes[] = 'linux';
                   } elseif ( stristr( $_SERVER['HTTP_USER_AGENT'],"windows") ) {
                         $classes[] = 'windows';
                   }
                return $classes;
        }
        add_filter('body_class','mv_browser_body_class');

The first part of this script detects user’s browser and adds it to $classes. The second part detects user’s operating system and adds it to $classes as well. The last line uses the WordPress body_class filter to add classes.

Now you need to add the body class to the <body> HTML tag in your theme’s header.php file. Replace the body line in your template file with this code:

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

Note that if you are working with a starter theme like underscores or well-coded theme frameworks like Genesis, then your theme will already have the body class function in the body tag. Once the code is implemented you will be able to see browser and operating system classes with the body tag in the HTML source. You will also notice that there will be other classes added to the body tag by WordPress.

Adding browser and OS information in WordPress body class

Now you can style the classes for different browsers and operating system or use them as selectors in jQuery. We hope this article helped you detect user’s browser and operating system information in WordPress.

If you are just starting out with WordPress theme development, then you may also want to take a look at our introduction to Sass and WordPress Body Class 101 for new theme designers. Let us know if you have any feedback or questions by leaving a comment below.

Source: Justin Sternberg

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

10 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Mel says

    Hi.. I’ve been a fan of this website for almost 3 years.. by the way any update on this function for edge browser? thanks :)

    More power!!!

  3. Bill Robbins says

    This is a wonderful way to tweak styling for individual browsers. The only major drawback is it can backfire when used with some caching plugins/systems. You’ll end up applying styles intended for one browser to all browsers because the body tag will be cached just like the rest of the content on the page.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.