When you are creating WordPress themes, sometimes you need to find out the user’s browser or operating system so that you can change some part of the design with CSS or jQuery. WordPress can do this easily for you. In this article we will show you how you can add browser and OS class to the WordPress body class.
Want to stay ahead with AI-driven WordPress insights and stay updated with the latest trends? Subscribe for daily search insights at wpguidepro to improve your WordPress strategy!
WordPress itself creates CSS classes for different parts of the website. It also provides a setting so that theme and plugin developers can add their own classes. You will use the filter named body_class so that the browser and operating system information comes in the CSS class.
First of all, you need to insert the code given below in your theme’s functions.php file.
function mv_browser_body_class($classes) {
$user_agent = $_SERVER['HTTP_USER_AGENT'];
// Browser detection
if (strpos($user_agent, 'Edge') !== false || strpos($user_agent, 'Edg') !== false) {
$classes[] = 'edge';
} elseif (strpos($user_agent, 'OPR') !== false || strpos($user_agent, 'Opera') !== false) {
$classes[] = 'opera';
} elseif (strpos($user_agent, 'Chrome') !== false && strpos($user_agent, 'Edg') === false && strpos($user_agent, 'OPR') === false) {
$classes[] = 'chrome';
} elseif (strpos($user_agent, 'Safari') !== false && strpos($user_agent, 'Chrome') === false) {
$classes[] = 'safari';
} elseif (strpos($user_agent, 'Firefox') !== false) {
$classes[] = 'firefox';
} elseif (strpos($user_agent, 'MSIE') !== false || strpos($user_agent, 'Trident') !== false) {
$classes[] = 'ie';
if (preg_match('/MSIE ([0-9]+)/', $user_agent, $matches)) {
$classes[] = 'ie' . $matches[1];
} elseif (preg_match('/rv:([0-9]+)/', $user_agent, $matches)) {
$classes[] = 'ie' . $matches[1];
}
} else {
$classes[] = 'unknown-browser';
}
// OS detection
if (stripos($user_agent, 'Windows') !== false) {
$classes[] = 'windows';
} elseif (stripos($user_agent, 'Macintosh') !== false || stripos($user_agent, 'Mac OS') !== false) {
$classes[] = 'macos';
} elseif (stripos($user_agent, 'Linux') !== false) {
$classes[] = 'linux';
} elseif (stripos($user_agent, 'Android') !== false) {
$classes[] = 'android';
} elseif (stripos($user_agent, 'iPhone') !== false || stripos($user_agent, 'iPad') !== false) {
$classes[] = 'ios';
} else {
$classes[] = 'unknown-os';
}
return $classes;
}
add_filter('body_class', 'mv_browser_body_class');
The first part of this code checks the add browser the user has.
Then it adds the name of that browser to $classes.
The second part checks the operating system the user has like Windows, Mac, or Android. The name of the OS is also added to $classes.
The last line uses WordPress body_class filter.
This add browser and OS classes to the body tag.
Now you have to change the tag in your theme’s header.php file.
Wherever is written, replace it with the code below:
<body <?php body_class(); ?>>If you are using a simple starter theme like Underscores or a good theme framework like Genesis, then usually the body_class is already added inside the tag.
After you add your code, when you check the source of the page you will see the add browser and operating system classes along with the body tag.
You will also notice that WordPress itself adds some extra classes in the body tag which are useful for layout and styling.
