Mobile Smart

Description

Mobile Smart (https://www.mobile-smart.co.uk/), using trusty detection from the MobileESP project (https://www.mobileesp.com) allows the following:

• Switch your theme to a mobile-ready theme if a mobile device is detected (you can now enable/disable iPad/tablets)
• Manual Switcher – to allow your user to manually switch between desktop and mobile versions. Available in 3 versions: widget, option to automatically insert into footer, or template tag.
• Template functions to help determine which tier of mobile device (touch/smartphone/other) is viewing your site, to allow conditional content inclusion.
• Adds device and tier specific CSS selectors to the body_class, to allow conditional CSS (e.g. so in the same way you have “.single” that you can target “.iphone” or “.mobile-tier-touch”.)
• Image transcoding – rescale images to fit their device

See the Frequently Asked Questions for guidance on how to use the plugin.

Device support includes iPhone, iPad, Android, Android tablet, Samsung, Motorola, Blackberry, Windows Phone 6 & 7, Symbian, and many more.

Mobile Smart Pro

Check out the Mobile Smart Pro plugin https://www.mobile-smart.co.uk/mobile-smart-pro for support for:

• Domain switching – use a mobile theme to detect mobile devices, and/or redirect to appropriate theme URL (e.g. m.yoursite.com)
• Mobile Pages – mobile versions of posts and pages with the same URL
• Mobile Menus – mobile versions of menus for mobile-specific navigation
• Mobile Widgets – disable selected widgets when viewing your site on your mobile device
• Mobile Plugins – disable selected plugins when viewing your site on your mobile device
• Mobile Home Page – select a different page to be the mobile site’s home page

Contribute

Want to contribute to the project? Checkout the GitHub project at https://www.github.com/dansmart/mobile-smart

Mobile Theme

Mobile Smart comes with a basic barebones (‘boilerplate’) theme that can be used by theme developers to develop for mobile devices.

The Mobile Smart boilerplate theme is based on two projects: https://html5boilerplate.com/mobile/ and https://html5reset.org/#wordpress
with some additional Mobile Smart modifications.

Note: The theme is not designed to be used without developer modification.

Installation

This section describes how to install the plugin and get it working.

1. Upload the mobile-smart directory to the /wp-content/plugins/ directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. Go to Settings->Mobile Smart and choose your theme to display when a mobile device encounters your page.

Go to https://www.mobile-smart.co.uk/installation/ for more details.

FAQ

See https://www.mobile-smart.co.uk/frequently-asked-questions/ for more.

Does this work with other mobile plugins

It would be advisable not to use other mobile theme switching functionality with this unless theme switching is turned off (go to Settings->Mobile Smart to disable).

This has been tested with the WordPress Mobile Pack transcoder and is noted to be compatible, though the list of mobile devices are different between the two.

How to switch and style for Tablets

Go to the Mobile Theme tab in the Settings->Mobile Smart admin page, and enable / disable tablet support.

If you wish to serve up different styles for tablets, you’ll have to modify your template to use the template tags to detect:

<?php
/* add additional stylesheet for certain mobile types */
global $mobile_smart;
// add stylesheets dependent on header
if ($mobile_smart->isTierTablet())
{
  wp_enqueue_style('mobile-tablet', get_bloginfo('stylesheet_directory')."/css/tablet.css");
}
?>

You can use the same template tag (isTierTablet()) to display additional content (such as sidebars, etc).

How do I use the Manual Switcher?

You have the option of the following:
* Mobile Smart Manual Switcher Widget – go to Appearance->Widgets and drop the widget in an appropriate sidebar. If you’re
a theme developer, you can create a new ‘sidebar’ in the appropriate location, e.g. the footer bar, if you don’t want
this option in the standard sidebar.
* Enable Manual Switcher in footer – if this option is enabled (via the Options->Mobile Smart page), this adds
the Manual Switcher link into the wp_footer() call, which means it will be displayed at the bottom of your page.
* Template tag, see below:

<?php
  // get global instance of Mobile Smart class
  global $mobile_smart;

  // display manual switcher link - requires Manual Switching to be enabled
  $mobile_smart->addSwitcherLink();
?>

The Manual Switcher displays the switcher link in a div with an id of mobilesmart_switcher

Do you do domain switching

Go to https://www.mobile-smart.co.uk/ for more information on the Mobile Smart Pro plugin.

How do I enable unique handset body classes

To enable the CSS body classes, ensure that in your mobile theme you have the body_class() function included:

 <?php body_class(); ?>

How do I change stylesheets dependent on device tier

You would do this if you prefer to split out each device tier CSS into separate files. Be aware that this creates an extra function call though.

Use the following PHP code:

<?php
/* add additional stylesheet for certain mobile types */
global $mobile_smart;
// add stylesheets dependent on header
if ($mobile_smart->isTierTouch())
{
  wp_enqueue_style('mobile-touch', get_bloginfo('stylesheet_directory')."/css/touch.css");
}
else if ($mobile_smart->isTierSmartphone())
{
  wp_enqueue_style('mobile-smartphone', get_bloginfo('stylesheet_directory')."/css/smartphone.css");
}
?>

Note: these functions do not test for the Manual Switcher. To test for the manual switcher (in case you are using
these template tag functions in a desktop theme), you should call:

<?php
/* add additional stylesheet for certain mobile types */
global $mobile_smart;
// find out manual switching state
$is_manual_switched_to_mobile = $mobile_smart->switcher_isMobile();
?>

Can you add xxxx-device?

Please email me with details of the device that is not yet supported by Mobile Smart, and I will add it in, and endeavour to release an updated version within the week (if timescales allow).

Where can I get a mobile theme from?

Try the Mobile Smart boilerplate theme if you’re a developer. Also check out the WordPress Mobile Pack
for a good example of a theme that is compatible with XHTML-MP.

Reviews

Doeas what is says

philippenantes October 5, 2017

Using ppro version. It works, and plenty of usefull options , to match various scenarii / situations. Great plugin !

Very handy for app developers to integrate wp in their apps.

wanula March 14, 2017

Very handy for app developers to integrate wp in their apps.

Great Plugin

Jmorley88 September 3, 2016

Thanks this is a great plugin and will be using it again!

Supported and works as advertised

jesseheap September 3, 2016

While the trend for many sites is towards responsive, there are still some valid use cases for delivering an alternative theme based on user agent detection and this plugin fits the bill. Dan has continued to support the plugin over the years which is also an important factor to consider.

It is exactly What I Need

AxelPiskulic September 3, 2016

I am using the free version and I see two very good ideas: – Mobile devices classified just in two groups: phones and tablets (neither problems about visitors browser nor user agent strings). I want to show the desktop version of my site in tablets. – And no mobile theme: I can choose what I like (actually I already had one.) The perfect plugin for this. And it Works fine!

Contributors & Developers

Changelog

= 1.3.16
– Bug fix: latest version of mdetect.php didn’t set tablet version properly. Thanks to Jesse Heap (https://github.com/jesseheap) for this fix.

= 1.3.15
– Security: Updated timthumb.php to the latest version

= 1.3.14
– Update MobileESP mobile detection library – updated the Mobile ESP detection code. New support for: Windows Phone 10, Firefox OS, Ubuntu Mobile OS, Sailfish, Tizen TV, WebOS TV. Removed support for Opera Android Phone and Tablet. Updated DetectTierIphone(), DetectTierTablet(), DetectSmartphone(). See https://blog.mobileesp.com/?p=425
– Remove deprecated function call to get_bloginfo()

= 1.3.13
– Fix admin screen on mobile was showing mobile theme instead of desktop theme

= 1.3.12
– Fix CSS error in admin

= 1.3.11
– Fix errors in dependencies brought across from Mobile Smart Pro – compatible and tested with WordPress 4.4

= 1.3.10
– Fix debug warnings for deprecated functions

= 1.3.9
– Security fix: escape output of add_query_arg (only used in admin and ‘add switcher link’). Thanks to WordPress team for information

= 1.3.8
– Fix for undeclared plugins_url in transcoding

= 1.3.7
– Fixed some code warnings and fixed access permissions for admin page

= 1.3.6
– Debugged tablet switching code

= 1.3.5
– Fix for cookie path
– Updated Mobile ESP to latest version
– Improved tablet tier checking for Android tablets

1.3

Major upgrade:
– Upgrade of MobileESP detection engine – better support for Opera Mini on Android (see https://blog.mobileesp.com/ for latest updates)
– Admin upgrade to tabs
– You can now select to switch for Ipad/tablet or not
– Debugged image transcoding

1.2.1

Vital Security patch (timthumb.php). Please upgrade immediately.

1.2

Added support for child themes

1.1.1

Bug fix where plugin was calling non existent DetectTierTouch() function.

1.1

Includes sample mobile theme – based on Mobile Boilerplate and HTML 5 Reset projects

1.0

Based detector on Mobile ESP project, meaning device detection will stay up to date with latest mobile devices

0.2

Added Manual Mobile Switcher – widget, link, and template tag.

0.1

Initial release, containing mobile device detection, body classes, and mobile tier template tags.