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

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact Us

This could be the beginning of something great 🙌

"*" indicates required fields

Name*
Hidden
Hidden

By submitting this form: You agree to the processing of the submitted data in accordance with WP Dynamics Privacy Policy.

Contact Information
You can also write us an email or contact us by telephone.
Telephone +45 71 74 71 21

Support For support inquiries, please refer to our support section.

Recent Articles

Faust.js – A Headless Framework for WordPress

Faust.js is a Headless WordPress Framework that provides a set of tools for building front-end applications based on WordPress ...

How to Load (Enqueue) and Handle Assets and Dependencies in WordPress

In WordPress, instead of adding assets such as styles and JavaScript to the header, you can and should use ...

An Introduction to Google Tag Manager Server-side Tagging

WordPress has come a long way since its launch in 2003 - from a blogging tool to a full-fledge ...