Beginner's Guide for WordPress / Start your WordPress Blog in minutes

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

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;

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.

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

9 CommentsLeave a Reply

  1. 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!!!

  2. 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.