Themergency

Add Device-Specific Class Names To Body Tag

If you ever wanted to alter the body class on the frontend of a WordPress site, you would use the body_class filter:

add_filter( 'body_class', array( $this, 'add_class_names' ) );

I wanted to add device-specific class names onto the body tag, so that I could then target those classes in my stylesheets and javascript to change the way my site responds on different devices. Perhaps I want to show a popup for all visitors who are using IE. The applications are limitless.

WordPress already has built in global variables for which browser the visitor is using:

global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome;

You can then use these variables and append class names by using the body_class filter:

function add_browser_class_names_to_body($classes) {
    global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome;
    if ($is_lynx) { $classes[] = "lynx"; }
    if ($is_gecko) { $classes[] = "gecko"; }
    if ($is_opera) { $classes[] = "opera"; }
    if ($is_NS4) { $classes[] = "ns4"; }
    if ($is_safari) { $classes[] = "safari"; }
    if ($is_chrome) { $classes[] = "chrome"; }
    if ($is_IE) { $classes[] = "ie"; }
    return $classes;
}
add_filter( 'body_class', 'add_browser_class_names_to_body' );

What About Mobile Detection?

I wanted to take it a step further and also add classes based on the type of mobile device that was being used, e.g. iPhone, Android, Blackberry, etc. There is a great project on Github called MobileDetect which allows you to do just that. Here is a simple way to use the library:

$md = new Mobile_Detect();
$md->setDetectionType('extended');
if ( $md->isTablet() ) { 
    //do stuff for tablet
}
else if ( $md->isMobile() ) { 
    //do stuff for mobile
}
//Specific types of mobile devices
if ( $md->isIphone() ) { 
    //do stuff for iphone
}
if ( $md->isAndroidOS() ) {
    //do stuff for android
}

So combining that code and the body_class filter you can do some pretty cool stuff:

function add_mobile_class_names_to_body($classes) {
    $md = new Mobile_Detect();
    $md->setDetectionType('extended');
    //Tablet, Mobile or Desktop
    if ( $md->isTablet() ) { $classes[] = 'tablet'; }
    else if ( $md->isMobile() ) { $classes[] = "mobile"; }
    else { $classes[] = "desktop"; }
    //Specific types of mobile devices
    if ( $md->isIphone() ) { $classes[] = 'iphone'; }
    if ( $md->isAndroidOS() ) { $classes[] = 'android'; }
    if ( $md->isBlackBerry() ) { $classes[] = 'blackberry'; }
    return $classes;
}
add_filter( 'body_class', 'add_mobile_class_names_to_body' );

A visitor browsing your site with an iPhone will get a body tag that looks similar to:

<body class="mobile iphone">

Bringing It All Together

I wrapped all of the above into a nifty little plugin which you can find on Github called Device Body Class. It automatically adds device specific class names onto the body tag. Classes it will add (if applicable) are:

  • tablet
  • mobile
  • desktop
  • iphone
  • ipad
  • android
  • blackberry
  • windows_mobile
  • samsung
  • kindle
  • lynx
  • gecko
  • opera
  • ns4
  • safari
  • chrome
  • ie