[Condition] Is Mobile

This tutorial provides the steps to register a custom condition using which elements can be set to be output depending on whether the device being used to view the page is a Mobile or not using Mobile_Detect.php via mobble.

If true is selected, the element will be output or printed on the front end only on mobile devices.

If false is selected, the element will be output only if the device is anything other than a mobile.

For a more comprehensive condition covering detection of more device types like tablet, follow this members-only tutorial instead.

Step 1

Install and activate mobble and Code Snippets plugins.

Go to Snippets > Add New.

Title: [Condition] Is Mobile

Code:

if ( function_exists( 'oxygen_vsb_register_condition' ) ) {

	if ( ! class_exists( 'Mobile_Detect' ) ) {
		return;
	}

	oxygen_vsb_register_condition(
		// Condition Name
		'Is Mobile',

		// Values: The array of pre-set values the user can choose from.
		// Set the custom key's value to true to allow users to input custom values.
		array( 
			'options' => array( 'true', 'false' ),
			'custom' => false
		),

		// Operators
		array( '==' ),
		
		// Callback Function: Name of function that will be used to handle the condition
		'wpdd_is_mobile_fallback',

		// Condition Category: Default ones are Archive, Author, Other, Post, User
		'Other'
	);

}

/**
 * Callback function to handle the condition.
 * @param  mixed 	$value    	Input value - in this case, true or false selected by the user.
 * @param  string 	$operator 	Comparison operator selected by the user.
 *
 * @return boolean 				true or false.
 */
function wpdd_is_mobile_fallback( $value, $operator ) {

	if ( 'true' === $value ) {
		return ( is_mobile() );
	} else {
		return ( is_mobile() ) ? false : true;
	}

}

Set the snippet to run everywhere. Save changes and activate.

Step 2

In the Oxygen editor, select the Section or any element that you wish to apply the condition on, click the Condition Settings icon, Set Conditions, Add your first condition, select “Is Mobile” from the Other category and either select true or false depending on whether the element should be output only on mobile or not.