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.

device body class

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.

Get 50% OFF the fastest WordPress hosting for the first 3 Months.

Expiration Date: Expires 1/1/15 WP Engine hosting Rules: Only valid for new customers with Personal, Professional, and Business Plans. Not intended for internal use by wpengine affiliates.

Comments

  1. Oksana Frewer says

    Thanks Brad!

    I’ve solved this by leaving only one logo. It stil looks great on mobile devices.

    Thanks for the article!

    • Brad Dalton says

      Based on what conditions?

      You can use media queries for this if you want to display a different logo on a specific sized screen.

      How have you added the mobile conditional tags?

  2. Oksana Frewer says

    Hi, Brad! Can you help me with my logo, please?

    I have a clickable logo function:

    //* Add Clickable Logo To Header
    function special_site_logo() {
    ?>
    <a id="sitelogo" href="”><img src="/images/logo.png” />

    <a id="sitelogo" href="”><img src="/images/logo2.png” />
    <?php }
    }

    How to combine them together in one function? I just don't know how to do this …

    Thank you in advance!

    • Brad Dalton says

      You could use wp_is_mobile but it doesn’t target specific mobile devices people are using to view your site.

      Really depends on what you want to do but i wouldn’t be messing with the core functions.

Leave a Reply

Your feedback is always appreciated.

Your feedback is always welcome & appreciated however you must be logged in to get solutions for questions asked in the comments.