• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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

Reader Interactions

Comments

  1. Oksana Frewer says

    October 11, 2013 at 9:09 pm

    Thanks Brad!

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

    Thanks for the article!

    Log in to Reply
    • Brad Dalton says

      October 12, 2013 at 1:51 am

      Glad to hear it.

      Log in to Reply
  2. Oksana Frewer says

    October 8, 2013 at 12:04 am

    hi, Brad!

    Only two, normal one, and small one, for mobile devises.

    Log in to Reply
    • Brad Dalton says

      October 8, 2013 at 12:42 am

      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?

      Log in to Reply
  3. Oksana Frewer says

    September 17, 2013 at 7:35 pm

    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!

    Log in to Reply
    • Brad Dalton says

      September 17, 2013 at 8:40 pm

      How many logos do you want to display?

      Log in to Reply
  4. Rudd says

    June 29, 2013 at 8:38 pm

    Maybe you should mention that the conditional tag we need to use for the first code is wp_is_mobile() 😉

    Log in to Reply
    • Brad Dalton says

      June 30, 2013 at 1:29 am

      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.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.