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.
<?php
// [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].
Example:
[mobileonly] This is a mobile only text. [/mobileonly]
Similar patterns apply to the desktop-only version as well.
Example:
[desktoponly] This is a desktop only text. [/desktoponly]
Video: Showing WordPress Mobile Only Content Using Plugin