Plugin Review: WP Mobile Detect

One of my clients came to me with an interesting issue.  She was embedding ads into her blog posts. they were wide ads 728 x 9 px and these looked great on desktop devices, but terrible on mobile devices.  Most of the ad was being cut off.

She wanted a way to easily embed both mobile and desktop versions of her ads in her posts.

You Can Code it up

It’s a relatively simple job for a code monkey like me to write some scripts to do this, WordPress has a built-in function call wp_is_mobile that does exactly that.

My client wanted to do this easily without coding so following my mantra of “there’s always a plugin to do that” I went hunting.

Enter WP Mobile Detect

The solution to the problem was WP Mobile Detect https://wordpress.org/plugins/wp-mobile-detect/.

What this clever little plugin does is to provide a series of short codes that let you show or hide content based upon the device a user is using .

You can target phones, desktops or tablets.  You can target operating systems like Android, iOS or Windows mobile.  You can also have combinations of them too.

How It works

You add a short code into your post wrapping the content you want to change, I’m not using the plugin on my site but here is an example

[phone]

This text would be displayed on phones

[/phone]

[notphone]

This text would be displayed on desktops and tablets

[/notphone]

Other Short Code Available

As I have mentioned there were other combinations available, here is a list of what you can do.

• [phone]Put content here that you only want displayed on Phones NOT Tablets or Desktops[/phone]
• [tablet]Put content here that you only want displayed on Tablets NOT Phones or Desktops[/tablet]
• [device]Put content here that you only want displayed on Phones OR Tablets NOT Desktops[/device]
• [notphone]Put content here that you only want displayed on Tablets OR Desktops NOT Phones[/notphone]
• [nottab]Put content here that you only want displayed on Phones OR Desktops NOT Tablets[/nottab]
• [notdevice]Put content here that you only want displayed on Desktops NOT Phones OR Tablets[/notdevice]
• [ios]Put content here that you only want displayed on iOS devices[/ios]
• [iPhone]Put content here, that you only want displayed on iPhones[/iPhone]
• [iPad]Put content here, that you only want displayed on iPads[/iPad]
• [android]Put content here, that you only want displayed on Android devices[/android]
• [windowsmobile]Put content here, that you only want displayed on Windows Mobile devices[/windowsmobile]

Not Just For Ads

You can wrap any type of content in these short codes, for example a mobile friendly contact form as opposed to a long form that would be difficult to fill in on a phone.

You could have a click to call button that only appears on phones that would be useless on desktop.

Outro

I love the fact that the WordPress community is developing solutions for nearly every issue there is and then distributing it as a free plugin.

90% of the time building and maintaining a WordPress site is very easy, it’s the final 10% we are here for.

Photo Credit: eatmorechips via Compfight cc