How to Display Mobile or Desktop Only Content Using WordPress Function

By using WordPress’s built-in mobile browser detection function “wp_is_mobile”, you can create a shortcode that displays or hides text on smartphones.

WP_is_mobile is set to “true” when a visitor visits via a mobile browser, allowing you to display or hide information depending on the device.

The code snippet allows using shortcodes [mobileonly][/mobileonly] and [desktoponly][/desktoponly] to tag specific text.

How to use the “wp_is_mobile” function

The code for this needs to be inserted into functions.php of the (active) theme. Always try to use a child theme when making such changes and take a backup before doing so.

// [desktoponly] shortcode
add_shortcode('desktoponly', 'wp_snippet_desktop_only_shortcode');
function wp_snippet_desktop_only_shortcode($atts, $content = null){ 
    if( !wp_is_mobile() ){ 
        return wpautop( do_shortcode( $content ) ); 
    } else {
        return null; 
// [mobileonly] shortcode
add_shortcode('mobileonly', 'wp_snippet_mobile_only_shortcode');
function wp_snippet_mobile_only_shortcode($atts, $content = null){ 
    if( wp_is_mobile() ){ 
        return  wpautop( do_shortcode( $content ) ); 
    } else {
        return null; 

Now, we can wrap any text that should only be visible in the mobile browser with the shortcode [mobileonly][/mobileonly].


[mobileonly] This is a mobile only text. [/mobileonly]

Similar patterns apply to the desktop-only version as well.


[desktoponly] This is a desktop only text. [/desktoponly]

Video: Showing WordPress Mobile Only Content Using Plugin

If you liked this post, please consider sharing it with your friends:


Leave a Comment