Mobile browser detection for WordPress – embedded is_mobile() function

Posted by on Mar 7, 2012 in Backend | 5 comments

Lets face it. Responsive design is here to stay and it is the solution to all of our nightmares regarding mobile web design. For those who are not aware of this technique, I invite you to read my other post where I explain what it is. But lets get to the point. Sometimes we need to add conditionals to our WordPress theme in order to detect if the visitor is visiting us from a mobile device, if so, we remove or add content. This is solved by using a custom made function called is_mobile() embedded into our functions.php. Read on for more.

First of all, we need to add the is_mobile() function to our functions.php file inside our theme folder:

function is_mobile()
{
if(preg_match('/(alcatel|amoi|android|avantgo|blackberry|benq|cell|cricket|docomo|elaine|htc|iemobile|iphone|ipad|ipaq|ipod|j2me|java|midp|mini|mmp|mobi|motorola|nec-|nokia|palm|panasonic|philips|phone|sagem|sharp|sie-|smartphone|sony|symbian|t-mobile|telus|up\.browser|up\.link|vodafone|wap|webos|wireless|xda|xoom|zte)/i', $_SERVER['HTTP_USER_AGENT']))
return true;

else
return false;
}

Then you can call this function in any of your template files. Lets say you want to use a totally different stylesheet for mobile devices. You would use something like this:

<?php if (is_mobile()): ?>

<!-- Mobile version or any other stuff you want to add for mobile  -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/handheld.css" type="text/css" media="screen,handheld" />
<link rel="stylesheet" title="mobile_version" href="<?php bloginfo('stylesheet_directory'); ?>/handheld.css" type="text/css" media="handheld, only screen and (max-device-width:480px)" />

<?php else: ?>

<!-- Normal version or any other stuff you want to add for normal display -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/core.css" type="text/css" media="screen" />

<?php endif; ?>

Easy peasy huh? The applications for this are endless, starting from alternate stylesheets to different images, JS files and even content. In fact, you can even redirect users to a mobile landing page using this function. Have fun with it and if you found an interesting application for this function, sound off in the comments below.

  • http://www.handsetdetection.com Richard

    Nice script. The trick is in separating out the tablets from the mobiles..

  • Ghumanz

    Thanks a lot man you saved my lots of time, I spend a whole day to find a proper way to redirect mobile devices. Your script worked like a charm.

  • Uranbold

    That’s really good information! THank you!

  • Simone

    Good, and if i want to display different content for mobile and non mobile?

    I mean mobile users will see an X WordPress page/post, non mobile users will see an Y WordPress page/post.

    Thanks

  • Alexcoder

    Try this http://codecanyon.net/item/themwitch/4764902
    This plugin is easy to install and has more functionality. For example customization sidebars for each theme.