How to Display Content for Mobile or Desktop Only Using WordPress “wp_is_mobile”.
| Published 13.07.2017 by | Last modified 19.11.2019 |
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()){ ?>
// mobile stuff goes here
<?php } else { ?>
// desktop stuff goes here
<?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
not works!
it shows:
Your PHP code changes were rolled back due to an error on line 467 of file wp-content/themes/sydney/functions.php. Please fix and try saving again.
syntax error, unexpected ‘<', expecting end of file
Hi Eds,
sounds like you have a syntax error in your functions file. The snippet works, but be sure to remove the enclosure tags “” from the code snippet above – before you paste it in to your functions.php file – since your functions.php file already have the enclosure tags in the beginning and in end of the functions.php file.
Also, you can check (lint) your code to check for errors in some code editors – or use an online service, such as: https://phpcodechecker.com/
Hi. Thank you very much for your helpful code. It’s worked fine in my WP theme.
Id like to say yes it works however In my case i’m using a short code to add a styled header, when I apply the [desktop] only short code to my header short code (encapsulating it) then it removes the styling of the header. It does only display on desktop though, just not displaying the short code style.
Works like magic. Thanks!
Hi,
Beginner here. I found a code snippet to hide breadcrumbs only from category pages and shop pages on Woocommerce (the code has to be added to functions.php) and I tried to add if( wp_is_mobile()){ at the beginning to use the said code only on mobile devices. I end up with this, which doesn’t work:
if( wp_is_mobile()){
add_filter( ‘woocommerce_before_main_content’, ‘remove_breadcrumbs’);
function remove_breadcrumbs() {
if(!is_product()) {
remove_action( ‘woocommerce_before_main_content’,’woocommerce_breadcrumb’, 20, 0);
}
}
}
Anybody knows why?
Thank you!
I want to show different slider according to device with metaslider.
My code doesn’t work.
Any advise?
add_shortcode( ‘sliderbydevice’, function() {
if ( wp_is_mobile() ) : ?>
[metaslider id=”46112″]
[metaslider id=”2703″]
<?php endif;
}
);