Do you want to hide a specific WordPress widget for mobile users?
Widgets are dynamic content that is often added to the sidebar or footer of the website. Sometimes a widget can display well on desktops, but you can hide them on mobile devices.
In this article, we'll show you how to conditionally hide a WordPress widget on mobile devices (without writing any code).
Note: On the most responsive WordPress themes, the sidebar appears below the content when you are on mobile devices. This is why often website owners want to hide certain widgets on mobile to speed up their website speed.
How to hide a widget on mobile in WordPress
For the sake of this tutorial, we'll be hiding the search widget on our test website, but you can also use it to hide any WordPress widget.
On our test website, the search widget appears at the top of our footer, and it works great on desktop.
However, on a phone, the sidebar widgets appear below the content instead of the sidebar:
We're going to hide the Search widget so that it only shows on desktops, not mobile devices.
Please note: : In this tutorial, the term "Computer" includes laptops as well as desktops.
First of all, you need to install and activate the Widget Options plugin . For more details, check out our step by step guide on how to install a WordPress plugin.
After activation, go to the page Appearance »Widgets in your WordPress admin area.
On this page, you will see your active widgets placed in the widget ready areas of your website.
Let's go and edit the Search widget by clicking on the widget name:
In the widget settings, a new section will be added by the Widget plugin Options. Here you just have to click on the small mobile icon and then choose on which device you want to hide the widget.
Don't forget to click on the “Save” button to save your changes.
Now go and view your website on a mobile device. This widget will no longer appear in your widget area:
But, what if you want to hide a widget on desktop devices, but show it on mobiles?
Let's take a look at how to do it.
How to make a mobile version of a widget in WordPress
Sometimes you might want to have one version of a widget for desktop visitors and another for mobile visitors.
For example, you can display your five most recent publications on the desktop, but only three posts on mobile devices.
It's also easy to do with the Widget Options plugin. You can just create two widgets and set one widget to show only on desktop, and the other to show only on mobile devices.
First, add or open the widget you want to display only on desktop. Then click on the small mobile icon. After that, just check the boxes " Tablet ' and " Mobile" to hide the widget on these devices:
Don't forget to click on the button Save to store your changes.
Now add or open the widget that you only want to show on mobile devices. Repeat the same process, but this time click on the checkbox 'Desktop' to hide the widget on desktop devices:
Here. You now have a desktop version and a mobile version of your widget.
Discover also some themes and premium WordPress plugins
You can use other WordPress plugins to give a modern appearance and to optimize the handling of your blog or website.
We offer you here some premium WordPress plugins that will help you do that.
1. WordPress Speed Optimization Plugin
Are you struggling to manage multiple website speed optimization plugins? Are you worried that they are hampering the execution speed of your website? then, this WordPress plugin will be the ultimate solution for all your worries.
This plugin is designed to give you almost 6 to 8 features WordPress plugins different. Just install and configure it to see a marked improvement in the loading of your pages.
We would like to point out that this is not a cache plugin or CDN, but the result it offers is nevertheless impressive. Do not hesitate to try this WordPress plugin to see what it is capable of.
Download | Demo | Web hosting
2. Social Share & Locker Pro
The Social Share & Locker Pro extension has been designed to help your website be more visible on social networks. With just a few clicks, you can either set the position of your social icons or lock your content by requiring sharing on one of the social networks offered by you.
You have 10 predefined themes and this should cover the most common wishes. All her themes are Retina and work wonders.
Also, with Social Share & Locker Pro, you will be able to display the full name of social networks or just the icon. It will depend on your design, the available space, or your wishes.
Download | Demo | Web hosting
3. WordPress PDF Images Lightbox
WordPress Image PDF Lightbox is a WordPress extension premium which allows you to create viewers of PDF files. A PDF viewer is a collection of photos that can be saved as PDFs.
With this extension, you can create as many PDF viewers as you want. For each viewer, the administrator can set some options like:
- The cover image: which will be added as the first page of the user-created PDF
- Maximum images per viewer
- A watermark image: to be applied on PDF pages
- Sending by email: if this feature is activated, a Contact form will be offered just after the image gallery. Through this form, users will be able to email the created PDF to anyone.
Download | Demo | Web hosting
Recommended Resources
Find out about other recommended resources to help you build and manage your website.
- How to add double-factor authentication to WordPress
- How to Build a Complete Website with Elementor
- 10 Automation Tools for Small Business Marketing
- 5 CDN recommended to boost the performance of your WordPress blog
Conclusion
Here ! That's it for this tutorial. We hope this article has helped you learn how to hide a widget on mobile devices. You can also see our ultimate guide on how to speed up WordPress performance for beginners.
However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.
Do not hesitate to share with your friends on your favorite social networks. And if you have any suggestions or remarks, leave them in our section Comments.
...
