[Condition] Device Type

This members-only tutorial provides the steps to register a custom condition using which elements in Oxygen can be set to load depending on the type of device used to view the page.

We are going to use Mobble for device detection.

We shall add these types of devices in our new condition with equal to and not equal to operators:

Desktop
Mobile
Tablet
Handheld (anything other than a Desktop)
iOS
Android

Note: The device detection method used by plugins like Mobble i.e., using the user agent method is not 100% reliable due to caching (host server, plugins etc.) resulting in false positives.

Demo page

(view that page in various devices)

Step 1

Install and activate Mobble plugin.

Step 2

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: [Condition] Device Type

Code:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $599 one-time).

Already a member? Log in below or here.

Posted

Aug 8, 2019

Oxygen, Plugins, Premium

Sridhar Katakam

Tags:

Conditions

Comments

8 responses to “[Condition] Device Type”

logicelf

Sep 15, 2019

Hi Sridhar. Mobble hasn’t been updated in 3 years. Any tips on a replacement, or some alternative snippet code to achieve this?

Reply
1. Sridhar Katakam
  
  Sep 16, 2019
  
  Hi,
  
  You can edit the plugin and replace all the code in wp-content/plugins/mobble/Mobile_Detect.php with the latest version, https://raw.githubusercontent.com/serbanghita/Mobile-Detect/master/Mobile_Detect.php.
  
  This will be erased when there’s an update to Mobble plugin but that shouldn’t be a problem because (hopefully) the update will also include the above.
  
  Reply
  1. logicelf
    
    Sep 16, 2019
    
    Thanks – I saw that, but I’m just a bit nervous about leaving old code lying around on a production site …
    
    Reply
    1. Sridhar Katakam
      
      Sep 17, 2019
      
      The only thing that needs updating in Mobble is Mobile_Detect.php from what I see.
      
      Reply
      1. logicelf
        
        Sep 17, 2019
        
        Fair enough, thanks Sridhar.
[Condition] Is Mobile – WPDevDesign

Sep 22, 2019

[…] a more comprehensive condition covering detection of more device types like tablet, follow this members-only tutorial […]

Reply
prowessio

Dec 31, 2019

Why doesn’t this code work when placed inside of a plugin

Reply
1. Sridhar Katakam
  
  Dec 31, 2019
  
  See https://wpdevdesign.com/how-to-register-a-custom-condition-in-a-functionality-plugin/.
  
  Reply

[Condition] Device Type

Step 1

Step 2

Comments

8 responses to “[Condition] Device Type”

Leave a Reply to Sridhar Katakam Cancel reply