Someone asks you to hide a paragraph of text for smartphone users. You figure it’s a two-minute job. You dig into the WordPress codex and find a built-in function called wp_is_mobile.
You wrap your text in a quick shortcode, test it on your phone, and it works perfectly. You push it live and move on to the next ticket.
Then the emails start coming in.
Half your mobile users are seeing the desktop text. Desktop users are seeing nothing. The layout is a mess, and the client is annoyed.
Here is the problem with wp_is_mobile: it evaluates on the server side.
If you run any kind of serious page caching—and if you care about site speed, you definitely do—the first person to hit that page dictates what everyone else sees.
If a user on a Macbook loads the URL first, the server caches the desktop version. The next thousand people on iPhones get served that exact same desktop cache.
It’s a nightmare.
The Old Way: The PHP Shortcode (Use With Caution)
If you run a dynamic membership site with caching disabled, or you specifically exclude the pages where these shortcodes live, the PHP method still functions.
You drop this into your child theme’s functions.php file or a snippet manager like WPCode.
// [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;
}
}
Now, you can wrap any text that should only be visible in the mobile browser with the [mobileonly] shortcode.
Example:
[mobileonly] This text will only appear on mobile devices. [/mobileonly]
Similar patterns apply to the desktop-only version:
[desktoponly] This text will only appear on desktop computers. [/desktoponly]
The Right Way: CSS Media Queries
We don’t rely on the server to guess the device anymore. We let the browser do the heavy lifting.
CSS executes on the user’s end. That means it bypasses your server cache completely. It doesn’t care who visited the page first. It just works.
Drop this into your WordPress Customizer (Appearance > Customize > Additional CSS):
/* Hide on screens smaller than 768px (Mobile) */
@media only screen and (max-width: 767px) {
.desktop-only {
display: none !important;
}
}
/* Hide on screens larger than 768px (Desktop/Tablet) */
@media only screen and (min-width: 768px) {
.mobile-only {
display: none !important;
}
}
Now, open the Block Editor. Click on the paragraph, image, or container you want to hide.
Go to the right-hand settings panel, expand the Advanced section, and type mobile-only or desktop-only into the Additional CSS class box.
Done.
No broken caches. No frantic debugging sessions. Just a site that actually responds to the device looking at it.