Conditional Tags For Mobile Devices

WordPress already includes a function for mobile devices in the core wp-includes/vars.php file on line 106. This code is used to test if the browser is being used on a mobile device.

Here’s the code from the core:

/**
 * Test if the current browser runs on a mobile device (smart phone, tablet, etc.)
 *
 * wp-includes/vars.php file on line 106.
 */
function wp_is_mobile() {
	static $is_mobile;

	if ( isset($is_mobile) )
		return $is_mobile;

	if ( empty($_SERVER['HTTP_USER_AGENT']) ) {
		$is_mobile = false;
	} elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false // many mobile devices (all iPhone, iPad, etc.)
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mobi') !== false ) {
			$is_mobile = true;
	} else {
		$is_mobile = false;
	}

	return $is_mobile;
}

Mobile responsive child themes include media queries which change the appearance of your site when viewed on different devices.

Here’s an example of what you’ll find in the style.css file of all Studio Press child themes.

Media Queries

/* Desktops, laptops and iPads (landscape) ----------- */

@media only screen and (max-width: 1024px) {

	#footer .wrap,
	#subnav .wrap {
		max-width: 960px;
	}

	.footer-widgets,
	#wrap {
		max-width: 888px;
	}

}

You can go one step further and install a plugin which adds conditional tags for detecting specifically which mobile device a reader is using to view your site.

Another option is to write your own custom conditional tags for different mobile devices and put the code in your child themes functions.php file.

Plugin Which Adds Mobile Conditional Tags

Lets take a look at the plugin first and see what you can do with it.

Mobble enables you to use different conditional tags which are added when you activate the plugin.

is_handheld(); // any handheld device (phone, tablet, Nintendo)
is_mobile(); // any type of mobile phone (iPhone, Android, etc)
is_tablet(); // any tablet device
is_ios(); // any Apple device (iPhone, iPad, iPod)

Or you can get more specific and use these mobile specific conditionals

is_iphone();
is_ipad();
is_ipod();
is_android();
is_blackberry();
is_opera_mobile();
is_symbian();
is_kindle();
is_windows_mobile();
is_motorola();
is_samsung();
is_samsung_tablet();
is_sony_ericsson();
is_nintendo();

Here’s some examples which you can use or modify:

Adds a different style sheet for mobile visitors:

Mobile/Device Specific Body Classes

This plugin also gives you the option to use a custom body class for styling posts and pages depending on which type of mobile device your reader is using. The custom class is generated and added to the body classes based on the specific mobile device your reader is viewing your site on.

This example simply shows a desktop however the class will change depending on the device which is used to view the page.

Custom Conditional Tags For Mobile Detection

Here’s an example of how to create your own custom conditional tags in your child themes functions.php file:

function is_ipad() {
$is_ipad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad'); 
if ($is_ipad) 
return true; 
else return false; 
}

You could then use the conditional for anything you like. An example maybe displaying a different layout for viewers users ipads.

Check out more conditional statements for mobiles developed by clicknathan.

You could also create a mobile specific page template for use on specific devices based on the size.

Related Content

• Test What Your Site Looks Like On Different Mobile Devices