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.
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
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:
|
1
|
<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.
[ux_image id=”10898″]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