Beginner's Guide for WordPress / Start your WordPress Blog in minutes

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.

Hiding a WordPress widget on mobile devices

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.

The widgets showing in the sidebar on a desktop

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.

The search widget displaying beneath the content on mobile

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.

The widgets section of the WordPress admin

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.

Expand your widget to view the options

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.’

Hiding a widget on mobile and tablet devices

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.

The search widget is now gone from the mobile version of the website

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.’

Displaying a widget on desktops only

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.

Showing a WordPress widget on mobile devices but not on desktops

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

10 CommentsLeave a Reply

  1. This was a great article to quickly allow me to hide extraneous footers that look like duplicates when on a mobile display as the side & footers were on the bottom. I hide one of them on a mobile device and voila! Looks so much more professional. Thank you!

    • For a question like that, you would want to reach out to the plugin’s support and they would be able to let you know the current method being used.

      Admin

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.