How to Display Content for Mobile or Desktop Only Using WordPress “wp_is_mobile”.

Did you know that you can use WordPress built-in “mobile detect” function wp_is_mobile to create a simple shortcode that can hide certain parts of your content from mobile visitors and-/or desktop visitors. The wp_is_mobile function returns true when your site is viewed from a mobile browser. Using this function you can create adaptive-/responsive WordPress themes based on visitor device.

Method 1 instructions
Simply use IF conditions in your templates.

<?php if( wp_is_mobile()){ ?>
   <span>mobile stuff goes here</span>
<?php } else { ?>
   <span>desktop stuff goes here</span>
<?php } ?>

Method 2 instructions
This snippet will allow you to use shotcodes the [desktoponly] desktop content [/desktoponly] or [mobileonly] mobile content [/mobileonly] to determine what content should be returned to the visitor.

Add this code to your functions.php

<?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; 
      }
   }
?>

Related links:
https://codex.wordpress.org/Function_Reference/wp_is_mobile