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()){ ?> // 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.