How to Hide a WordPress Widget on Mobile (Easy for Beginners)

Do you want to hide a specific WordPress widget for mobile users?

Widgets are dynamic content that is often displayed in the website sidebar or footer. Sometimes a widget may look good on a desktop computer or laptop, but not on smaller mobile devices.

In this article, we’ll show you how to hide a WordPress widget on mobile devices, without writing any code.

Why Hide a Widget on Mobile in WordPress?

Just because your website’s layout looks good on full-sized computer screens, doesn’t mean it will automatically look good on smaller screens.

When viewing the mobile version of your WordPress site, you may realize the layout looks cluttered. One easy solution is to hide certain widgets on smartphones and tablets.

Even if the layout doesn’t immediately look cluttered, it’s important to always scroll to the very bottom of your site when testing it on mobile devices.

In most responsive WordPress themes, widgets will be displayed in different places depending on the size of the visitor’s screen. Often, WordPress themes move widgets to the very bottom of the page.

Let’s look at an example.

The following image shows how our site looks on a desktop computer. As you can see, the search widget appears at the top of our sidebar.

However on a smartphone, the sidebar widget appears below the content instead of next to it.

This may not be very helpful. For example, in the following image visitors will need to scroll to the bottom of the page to do a search.

Even worse, sometimes this behavior may result in two identical widgets appearing next to each other. For example, many website owners place a ‘Recent Posts’ widget in both the sidebar and the footer. If the sidebar widgets are moved to the bottom on smartphone and tablets, then mobile visitors may see the same exact widgets next to each other.

This looks like bad design, or even an error that’s causing duplicate content. With that being said, let’s see how you can easily hide a widget on mobile in WordPress.

How to Hide a Widget on Mobile in WordPress

In our guide, we’re going to hide the Search widget so that it only appears on desktops, and not on mobile devices.

The easiest way to do this, is using the Widget Options plugin. This plugin lets you show different widgets depending on the date, user role, device, and more.

First, you need to install and activate the Widget Options plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, go to the Appearance » Widgets page in your WordPress dashboard.

On this screen, you’ll see all the widgets you’ve added to your website.

To edit a widget, simply click on that widget’s name.

In the widget settings, you’ll see some new sections added by the Widget Options plugin.

Here, simply click on the small mobile icon and then choose which device or devices you want to hide this widget on. You’ll typically want to check the box next to ‘Tablet’ and ‘Mobile.’

After that, click on the ‘Save’ button to store your changes.

Now, go ahead and visit your site using a mobile device. The widget should no longer show up in the widget area.

How to Make a Mobile Version of a Widget in WordPress

Sometimes, you might want to show one version of a widget to mobile visitors and a different one to desktop visitors. For example, you might want to show your five most recent posts on desktop, but only three posts on mobile devices.

To do that, you simply need to add two separate Recent Posts widgets to your site. For more information, please see our step-by-step guide on how to add widgets in WordPress.

You can then configure one widget to appear on desktop computers, and another to appear on mobile devices.

First, open the widget that you only want to display on the desktop. Then, click the small mobile icon, and check the boxes next to ‘Tablet’ and ‘Mobile.’

Now, you can make any changes to the widget. For example, we’re typing ‘5’ in the box next to ‘Number of posts to show.’

When you’re finished, don’t forget to press the ‘Save’ button to store your settings.

After that, open the widget that you only want to display on mobile devices.

You can now repeat the same process described above, but this time check the box next to ‘Desktop’ to hide the widget on desktop devices.

You can now make any changes to your mobile widget, such as typing ‘3’ into the ‘Number of posts to show’ box.

As always, click on ‘Save’ when you’re finished. You now have a desktop version and a mobile version of the same widget.

We hope this article helped you learn how to hide a widget on mobile devices in WordPress. You might also like to check out our list of the best drag and drop WordPress page builders to customize your site, or how to create a custom theme in WordPress without writing any code.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.