scottsweb / mobble

✅ WordPress plugin that provides conditional functions for detecting a variety of devices.

mobble

• Status: ✔ Active
• Contributors: @scottsweb
• Description: Helper plugin that provides conditional functions for detecting a variety of mobile devices & tablets.
• Author: Scott Evans
• Author URI: http://scott.ee
• License: GNU General Public License v2.0
• License URI: http://www.gnu.org/licenses/gpl-2.0.html

About

mobble provides mobile related conditional functions for your site. e.g. is_iphone(), is_mobile() and is_tablet().

CSS media queries are great for creating responsive web designs but they do not always provide enough control. There are times when not all of the content, JavaScript or CSS on a page is relevant for a particular device. With the mobble functions you can make these kind of tweaks to your theme.

mobble can also add device information to the body class of your theme allowing you to easily target your CSS for different gadgets.

Installation

To install this plugin:

• Upload the mobble folder to the /wp-content/plugins/ directory
• Activate the plugin through the 'Plugins' menu in WordPress
• You can now use <?php is_mobile(); is_tablet(); // etc ?> functions in your themes/templates
• If you want you can also disable the device specific body classes in the WordPress Admin->Settings->mobble setting section

Visit WordPress.org for a comprehensive guide on in how to install WordPress plugins.

Hooks & Filters

...

Frequently Asked Questions

###What functions are available?

The most useful ones are:

<?php
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)
?>

You can also use:

<?php
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();
?>

Inspecting Mobile_Detect.php will also reveal some other useful tools.

###Do you have any examples?

Yup. This first example disables the sidebar for mobile/phone devices:

<?php
if (!is_mobile()) {
	get_sidebar();
}
?>

This second example loads a specific stylesheet for Apple devices (iPhone, iPod and iPad):

<?php
if (is_ios()) {
	wp_enqueue_style('ios', get_template_directory_uri() . '/ios.css');
}
?>

###Caching Please note that in certain setups caching will cause undesired behaviour. If your cache is set too aggressively PHP will be skipped and the device detection will not work.

Changelog

####1.6

• Mobile Detect 2.8.24
• Add edge body class (props Luca Speranza)
• Add filters to functions (props Matthew Keasling)

####1.5

• Add German translation (props @rpkoller)
• Minor PHP improvements
• Mobile Detect 2.8.17

####1.4

• Run through PHP tidy
• Mobile detect update to 2.8.13

####1.3

• Update mobile detect library to 2.7.6
• Small CSS change for 3.8

####1.2.1

• Small bug fix on is_mobile()
• Moved screenshots out of trunk

####1.2

• Now uses mobile-detect (http://mobiledetect.net/) which provides more accurate and varied detection
• Mobiles can now be graded (A,B,C) using the mobile-detect API (see mobile-detect.php) or mobiledetect.net
• is_palm, is_lg, is_nokia will be removed soon - check depricated notices
• New check for is_kindle - feedback on this one appreciated as I cannot test it

####1.1

• Correction to the PHP.
• New body class of .desktop for anything not handheld
• Tested on 3.2+

####1.0

• Initial release.

mobble's Issues

Mobify the body class isn't working

Hi I've tried the Mobify body class option. But unfortunately nothing is added. The body tag remains in its initial state. But the mobble plugin itself is working. A simple test with

if (is_mobile()) {
  print_r('It is a mobile device');
}

works flawlessly. The output shows on my smartphone while nothing is showing on my desktop. So only the adding of the body class is failing. I am running mobble 1.4 and WordPress 4.3 using a custom template with Timber 0.2.19. If you need any further infos let me know. Best regards r.

Not recognising iPad 3/4

Hi Scott,

I've been using mobble for a few years now and it's a great plugin. Many thanks for your hard work. Not sure if this is the place I should be posting this but...

I've just one question: I've used the plugin extensively on http://palmerslodges.com and all works fine other than testing on iPad 3/4 shows 'mobile' code, not 'tablet'. If you visit the domain in Chrome and change Emulation from iPad1/2/Mini to iPad 3/4 you'll see that the images are 'mobile' resolution and the booking box doesn't show. I'm using the latest version of mobble downloaded from here, even taken the latest version of mobile-detect (2.7.7) but still no luck.

This is the body class on iPad1/2:
<body class="home blog logged-in handheld ios tablet ipad safari cat-170-id js-ready"

& this is it on iPad3/4:
<body class="home blog logged-in handheld mobile ios iphone safari cat-170-id js-ready">

Mobile see's Firefox 35.0.1 as "Mobile"

I am using the below code :

    <div><?php if (!is_mobile()) { the_post_thumbnail('full'); }  else { the_post_thumbnail('banner_mobile'); } ?></div>

And on DESKTOP 2550x1440 I am getting the banner_mobile size.

Opera Mini

Hi,

Can you add Opera Mini specific class? It's different between Opera and Opera Mini. But i don't know with opera mobile, but i think it's not Opera Mini.

Thanks a lot.

Push the latest version to the WordPress SVN

Hello,

thanks for this awesome plugin, saved me some time from having to write my own solution, so really appreciated.

Any chance you could push the latest version to the WordPress plugin repository? It's much more handy to have it installed/updated like that than uploading a zip from GitHub :)

Thanks!

mobble and wordpress wp rocket cache

@scottsweb doesn't seem to play nicely anymore with the preloaded cache. It should be working with wp rocket which triggers is_mobile when using mobile and desktop cache separated.

So the element to display on a desktop should show on desktop and mobile on mobile. But it seems to be something that isn't playing nice anymore.

As wp rocket is triggering two different user agents and two different cache files it should be working and display the correct things for wp rockets preloader and store those rules in the cache. Then the PHP conditions won't work as the cache is cache and don't involve PHP. But that's not the issue, the issue is it seems to not play as it should with wp rockets preload of the cache.

Any idea?

Still maintained?

This is the most interesting method I've seen for responsive thumbnails. Are the techniques still current and any plans to continue with the WordPress plugin?

Updated mobile detect lib

German translation

Hi are you interested in getting your plugin translated into german? Wouldn't be that many strings to translate. I could quickly set it up and place a pull request. Only a few questions upfront. How should the mo and po file folder be called? lang or languages? And which textdomain would you wanna use? mobble? Cheers r.

Feature Request: Secondary Option To Use Browscap

Love your work on this! Thank you.

It would be great if there was a secondary option
to use Browscap with this plugin. http://browscap.org/

Screen size for is_mobile/is_smartphone

Hi, loving your plugin.

I have a question because I encountered some unexpected behaviour.

I used is_mobile/is_smartphone and when I used the Chrome responsive view, the content was hidden immediately.

I expected it to be hidden on a smaller screen size. Can u enlighten me a bit more ?

Trying to hide Primary Menu Nav bar for mobile

I've been unsuccessful putting in CSS to disable it. I think the child/parent theme is just over riding it. I keep beating my head on this, so any suggestions out there?

Mind you I do not have a mobile navigation menu selected. Only the primary menu as primary.

Here's the header php:

> <title>Blue Coral Swimwear | Designer Women's Swimsuits and Bikinis</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> <script> !function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '534382196734733'); fbq('track', 'PageView'); </script>

function hide_pop() {
document.getElementById('def_pop').style.display="none";
}

//$(window).load(function() {
//var result = document.getElementById('header').offsetHeight;
//alert(result);
//});

$(function(){
/*
$(window).scroll(function(){
var result = document.getElementById('header').offsetHeight;
var scrolltop=$(window).scrollTop();
if($(window).scrollTop()>=result){
$("#navigation").addClass( "fixed_nav" );
$('.menus').attr('id', 'wrapper');
}
else {
$("#navigation").removeClass( "fixed_nav" );
$('.menus').removeAttr('id');
}
});
*/

});

$( document ).ready(function() {
$("#navigation").addClass( "fixed_nav" );
});
</script>

> <script> fbq('track', 'Purchase'); </script> <script> fbq('track', 'Lead'); </script> <script> fbq('track', 'AddToCart'); </script> <script> fbq('track', 'InitiateCheckout'); </script>

<div id="inner-wrapper">

<?php woo_header_before(); ?>

<header id="header" class="col-full">

	<?php woo_header_inside(); ?>

</header>
<?php woo_header_after(); ?>

If need be here's the Top Nav/ Header/Primary Nav code in the functions php file:

// Top Navigation
$options['woo_top_nav_font'] = array( 'size' => '1.5', 'unit' => 'em', 'face' => $open_sans, 'style' => 'normal', 'color' => '#999' );

	// Header
	$options['woo_font_logo'] = array( 'size' => '1.5', 'unit' => 'em', 'face' => $roboto, 'style' => '300', 'color' => '#000000' );
	$options['woo_font_desc'] = array( 'size' => '1.5', 'unit' => 'em', 'face' => $open_sans, 'style' => 'normal', 'color' => '#999999' );

	// Primary Navigation
	$options['woo_nav_font'] = array( 'size' => '2.5', 'unit' => 'em', 'face' => $open_sans, 'style' => 'normal', 'color' => '#ffffff' );
	$options['woo_nav_bg'] = '#6ec095';
	$options['woo_nav_hover_bg'] = '#4C5567';