Detecting mobile and tablet browsers in WordPress
using the WordPress conditional tag wp_is_mobile

Mobile detection in WordPress

Age of Article Warning:
This article was originally published 41 months ago. The information, tips and techniques explained may outdated. Examples shown on this page may no longer work. Please consider this when viewing the below content.

Even if you are using a responsive website design, sometimes you still need to tweak your styles or scripts on mobile devices. So is there an easy way to do this on a WordPress website?

Well this might be the solution, a little trick that I came across recently, the WordPress conditional tag – wp_is_mobile(). This tag allows you to determine if a visitor is looking at your website on a mobile device such as a phone or tablet, using detection of the browser user agent string – ($_SERVER['HTTP_USER_AGENT']).

Detection is for iPhone, iPad, Android, Silk, Kindle, Blackberry, Opera Mini and Opera Mobi. If you need to style your pages differently for mobile devices then using the wp_is_mobile() conditional tag along with css media queries enables this.

Also if you feel like adapting the device targeting further you could setup your own function as is explained in this StackExchange article.

Using “wp_is_mobile”

Now how to target the mobile device, well if you only want to add something that happens on mobile devices, you could use the following inside a function that you would add to your functions.php file.

if (wp_is_mobile()) {
	//do something on a mobile device
}

As an example, perhaps you might want to disable the auto-detection of phone numbers on mobile devices, so you would want to add the meta format detection to the header of your page when shown on a mobile browser. The following function is for disabling the automatic detection of phone numbers in modern mobile browser.

function add_to_header_mobile() {
     if (wp_is_mobile()) {
          ?><meta name="format-detection" content="telephone=no"/><?php 
     }
}
add_action('wp_head','add_to_header_mobile');

If you are wondering how to add telephone numbers to a website that have a clickable link, when you have disabled the auto detection, then this link will help.

Adding a unique class for styling on mobile browsers

Another way that you could use the mobile detection would be to add a unique class name to the body class of your pages, that only appears when viewed on the mobile device.

function add_is_mobile_bodyclass($classes) {
	//adds a class of "wp_is_mobile" to the body class of the page
	if (wp_is_mobile()) {
		$classes[] = 'wp_is_mobile';
	}
	return $classes;
}
add_filter('body_class','add_is_mobile_bodyclass');

Then you would use the class name “wp_is_mobile” in your css file to target mobile devices. An example could be that on mobiles you want to change the colour of page titles, so it might look something like this:

.wp_is_mobile h1.pagetitle-title { color: #697FB4; }

And if you have a responsive design theme, then you could use the wp_is_mobile class with your css media queries to target tablets and mobile phones differently.

Using the mobile browser detection in jQuery and Javascript

Having a wp_is_mobile class added to the body classes when displayed on a mobile device, means that you could also use this to detect whether to add a particular javascript or jQuery to the page.

jQuery(document).ready(function($) {
     if ($("body").hasClass("wp_is_mobile")) {
          //do something if mobile device detected
     }
     else {
          //do something else
     }
});

Now you have a new tool at your disposal for making your web pages more mobile friendly. What other tips do you use for optimising your WordPress website for mobile devices?

Filed under: WordPressTagged with: , , ,

2 Comments

  1. For device detection purposes, you can also use a third-party solution that makes it more reliable, accurate, and faster than any home-grown option done with PHP, JavaScript, etc.

    Also, the third-party service makes it possible to detect devices that are difficult to detect otherwise, such as iPads. These solutions can be cloud-hosted or deployed locally, and there’s usually a basic free option available.

    Check out, for instance, DeviceAtlas here: deviceatlas.com

    • Thanks Gregory for your suggestion. It is good to be aware of the many options out there to customise your website for different types of devices, especially since devices are updating and changing frequently. A dedicated solution may be necessary for some websites.


Comments are closed for this article!