metinsaylan // rogue developer

Shortcode to display content for Mobile or Desktop visitors only

Did you know that WordPress has a mobile detect function already. In this post we will show you how you can use wp_is_mobile function to create a simple shortcode to hide certain parts of your posts from mobile visitors or the other way.


Demonstration

Desktop View

mobile-shortcode-desktop-view

Mobile View

mobile-shortcode-mobile-view


The Shortcode

wp_is_mobile function returns true when your site is viewed from a mobile browser. Using this simple function you can create awesome responsive wordpress themes. Here we will use it to check if we should return content between shortcodes or not.

To use the shortcodes [desktoponly] and [mobileonly] just add following code to your functions.php file:

This code will add required shortcode functions to your theme.


Usage

After you add the shortcode functions. Wrap your content using either [desktoponly][/desktoponly] or [mobileonly][/mobileonly] tags as required:

This post demonstrates usage of <code>mobileonly</code> and <code>desktoponly</code> shortcodes. Below you can see text specific to desktop/mobile only:

[mobileonly]This content is visible to <strong>mobile browsers</strong> only.[/mobileonly]
[desktoponly]This part is visible to <strong>desktop users</strong> only.[/desktoponly]

This part is visible to all.

After you add the shortcode tags as necessary, all you need is to publish. Content inside [desktoponly][/desktoponly] will be visible to desktop/laptop users only. And the text inside [mobileonly][/mobileonly] tags will be visible to phone users only.

Search Shortcode to display content for Mobile or Desktop visitors only on Google