Detect Remote Device Plugin for WordPress

This WordPress plugin is uses the Agent and DeviceDetector PHP libraries to extend wp_is_mobile() to (optionally) exclude tablets and add device-specific filters and shortcodes. It was inspired by Pothi Kalimuthu's Mobile Detect plugin.

Special Thanks

I would like to thank BrowserStack for graciously allowing me to test this plugin's device detection on their platform. If you're looking for seamless application and browser testing for your projects, give them a try:

Requirements

• WordPress 4.7 or higher
• PHP 5.6 or higher

If you're not sure if you meet these requirements, the plugin will tell you upon activation.

TODO

• Add OS-specific detection
• Add [browser_agent_is] shortcode
• Add querystring modifiers
• Add support for getting device type from request headers

Installation

Download the distributable ZIP file from the Releases page and install as you normally do for a WordPress plugin.

Configuration

The following constants are available to modify behavior. They may be defined in your wp-config.php:

• DMD_DISABLE_GLOBAL_FUNCTIONS - If defined as true, global functions will not be created.
• DMD_DISABLE_SHORTCODES - If defined as true, shortcodes will not be loaded. Useful if you only want this plugin to solely act as an autoloader for the Agent and DeviceDetector PHP libraries.
• DMD_ADD_DEVICE_TYPE_BODY_CLASSES - Add device type body classes (default: true)
• DMD_ADD_PLATFORM_BODY_CLASSES - Add remote platform/OS body classes (default: false)
• DMD_BODY_CLASS_PREFIX - If defined, modifies the prefix added to device body classes.
• DMD_MODIFY_WP_IS_MOBILE - Modifies WordPress's built-in wp_is_mobile() function to return false for tablets.

Configuration Examples

define( 'DMD_DISABLE_GLOBAL_FUNCTIONS', true );
define( 'DMD_DISABLE_SHORTCODES', false );
define( 'DMD_ADD_DEVICE_TYPE_BODY_CLASSES', false );
define( 'DMD_ADD_PLATFORM_BODY_CLASSES', true );
define( 'DMD_BODY_CLASS_PREFIX', 'screen' ); // Resulting body classes: screen-mobile, screen-desktop, etc
define( 'DMD_MODIFY_WP_IS_MOBILE', true );

Usage

Option 1 - Create MobileDetect Object

If desired, you can simply instantiate a new instance of Agent or DeviceDetector. See each library's documentation for further usage examples.

$device = new \Jenssegers\Agent\Agent;

if( $device->isTablet() ) {
	// Logic for tablets
} else if( $device->isMobile() ) {
	// Logic for phones
} else {
	// Logic for desktop
}

🚨 NB! The isMobile method returns true for both phones and tablets. In my example above, I check for tablets first, else if not tablet but is mobile, it is a phone. Adjust your logic as desired.

Option 2 - Global Functions

To supplement WordPress's built-in wp_is_mobile() function (which returns true for phone and tablet), this plugin adds functions to specifically detect phones and tablets:

// Built-in WordPress function: Do something for phones AND tablets
if( wp_is_mobile() ) {
	// ...
}

// Custom global functions
if( device_is_phone() ) {
	// ... Phones only
} else if( device_is_tablet() ) {
	// ... Tablets only
} else if( device_is_desktop() ) {
	// ... Desktop only
} else {
    // ...
}

// Get device type as string
echo 'Device type: ' . get_the_device_type(); // Device type: tablet

Option 3 - Use Shortcodes

This plugin adds the following shortcodes:

• [device_is_mobile] - Display content if phone or tablet
• [device_is_phone] - Display content if phone
• [device_is_tablet] - Display content if tablet
• [device_is_desktop] - Display content if desktop
• [device_is type="tablet,phone"] - Display content if type attribute matches. Multiple types may be separated by comma.
• [device_is_not type="desktop"] - Display content if type attribute does not match. Multiple types may be separated by comma.
• More to come!

👌 I realize that these can be consolidated into one shortcode, but I split them out for user semantics. Use them as you wish.

Example Shortcode Usage

[device_is_phone]You're using a phone![/device_is_phone]

[device_is type="tablet,desktop"]You're using a tablet or desktop![/device_is]

[device_is_not type="phone"]You're NOT using a phone![/device_is_not]