How to Display Content for Mobile or Desktop Only Using WordPress

This WordPress snippet will 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.

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.

/* Ofofonobs Developer... */<?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

/* Ofofonobs Developer... */<?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;
}
}
?>