WordPress Body Class CSS for a Variety of Devices

Yesterday we covered a short and sweet way to add a body class to your WordPress theme based on which browser a user was on, and also whether they’re on a mobile device or not. Today we’re going to break that down even further.

We’ll combine my tutorial on creating conditional tags for the most popular mobile devices with yesterday’s, and then take it one step further by adding the user’s operating system to the mix.

Why do we want to add all of these body classes to WordPress?

Well, schools of thought on this vary, but I like to have a CSS class that can allow me to quickly and easily target problem browsers. Sometimes you’ll have 100% valid code but Safari will throw something off. It’s nice to be able to just tweak that tiny thing rather than figure out variant CSS that is often less valid but works around the issue. Other times, the same browser will render things differently across operating systems (Chrome!). Again, now we’re tweaking vs. hacking.

Without further ado, let’s check out the code:

// add conditional statements for mobile devices
function is_ipad() {
$is_ipad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
if ($is_ipad)
return true;
else return false;
}
function is_iphone() {
$cn_is_iphone = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPhone');
if ($cn_is_iphone)
return true;
else return false;
}
function is_ipod() {
$cn_is_iphone = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPod');
if ($cn_is_iphone)
return true;
else return false;
}
function is_ios() {
if (is_iphone() || is_ipad() || is_ipod())
return true;
else return false;
}
function is_android() { // detect ALL android devices
$is_android = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'Android');
if ($is_android)
return true;
else return false;
}
function is_android_mobile() { // detect ALL android devices
$is_android = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'Android');
$is_android_m = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'Mobile');
if ($is_android && $is_android_m)
return true;
else return false;
}
function is_android_tablet() { // detect android tablets
if (is_android() && !is_android_mobile())
return true;
else return false;
}
function is_mobile_device() { // detect ALL mobile devices
if (is_android_mobile() || is_iphone() || is_ipod())
return true;
else return false;
}
function is_tablet() { // detect ALL tablets
if ((is_android() && !is_android_mobile()) || is_ipad())
return true;
else return false;
}

// add browser name to body class
add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
global $is_gecko, $is_IE, $is_opera, $is_safari, $is_chrome, $is_iphone;
if(!wp_is_mobile()) {
if($is_gecko) $classes[] = 'browser-gecko';
elseif($is_opera) $classes[] = 'browser-opera';
elseif($is_safari) $classes[] = 'browser-safari';
elseif($is_chrome) $classes[] = 'browser-chrome';
elseif($is_IE) {
$classes[] = 'browser-ie';
if(preg_match('/MSIE ([0-9]+)([a-zA-Z0-9.]+)/', $_SERVER['HTTP_USER_AGENT'], $browser_version))
$classes[] = 'ie-version-'.$browser_version[1];
}
else $classes[] = 'browser-unknown';
} else {
if(is_iphone()) $classes[] = 'browser-iphone';
elseif(is_ipad()) $classes[] = 'browser-ipad';
elseif(is_ipod()) $classes[] = 'browser-ipod';
elseif(is_android()) $classes[] = 'browser-android';
elseif(is_tablet()) $classes[] = 'device-tablet';
elseif(is_mobile_device()) $classes[] = 'device-mobile';
elseif(strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false) $classes[] = 'browser-kindle';
elseif(strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false) $classes[] = 'browser-blackberry';
elseif(strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false) $classes[] = 'browser-opera-mini';
elseif(strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mobi') !== false) $classes[] = 'browser-opera-mobi';
}
if(strpos($_SERVER['HTTP_USER_AGENT'], 'Windows') !== false) $classes[] = 'os-windows';
elseif(is_android()) $classes[] = 'os-android';
elseif(is_ios()) $classes[] = 'os-ios';
elseif(strpos($_SERVER['HTTP_USER_AGENT'], 'Macintosh') !== false) $classes[] = 'os-mac';
elseif(strpos($_SERVER['HTTP_USER_AGENT'], 'Linux') !== false) $classes[] = 'os-linux';
elseif(strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false) $classes[] = 'os-kindle';
elseif(strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false) $classes[] = 'os-blackberry';
return $classes;
}

Well now that’s a chunk of if statements have I ever seen one! Let’s quickly dissect what we’re doing here.

Firstly, we create some new conditional tags that can pinpoint whether we’re using an iPhone, iPad, iPod or some type of Android device. WordPress has the built in wp_is_mobile() function, but it simply returns true for all types of mobile devices and we want to get more specific.

Next, we check against some built in WordPress variables, user agents and our new conditional tags to see what browser they’re using (and what version in the case of Internet Explorer), then if they’re on a mobile device, we check which one in particular, and finally, we look into the operating system.

We then add the various information to the body_class(). So…if we were using Safari on an iPad, we’d see the following classes appended to the body tag:

  1. browser-ipad
  2. device-tablet
  3. os-ios

If we were using Internet Explorer 6 on Windows, we’d see:

  1. browser-ie
  2. ie-version-6
  3. os-windows

Up Next: Updated Add the User's Browser Name to WordPress' Body Class