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 will 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, this 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. In this case, one 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 a site looks on a desktop computer. As you can see, the search widget appears at the top of the sidebar.

The widgets showing in the sidebar on a desktop

However, on a smartphone, the sidebar widget appears below the content.

This means visitors will need to scroll to the very bottom of the page in order 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 WordPress blog owners place a ‘Recent Posts’ widget in both the sidebar and the footer. If these widgets move, then mobile visitors may see the same widgets next to each other.

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

The easiest way to hide widgets for mobile users is by 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, you need to go to the Appearance » Widgets page in your WordPress dashboard.

The widgets section of the WordPress admin

On this screen, you will see all the widgets you have added to your WordPress website.

To edit a widget, simply click on its name.

Expand your widget to view the options

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

To start, click on the small mobile icon and make sure the ‘Hide/Show’ dropdown shows ‘Hide on checked devices.’

How to hide and show widgets to mobile users

After that, simply check each device where you want to hide the widget.

You will typically want to check the box next to ‘Tablet’ and ‘Mobile.’

Hiding a widget on mobile devices

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

Now, go ahead and visit your WordPress website using a mobile device. The widget will no longer appear 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 users.

For example, you might want to show your five most recent posts on desktop but only three posts on mobile devices so that the screen doesn’t look cluttered.

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 the other to appear on mobile devices.

First, open the widget that you want to show to desktop users. Then, click the small mobile icon, and make sure the ‘Hide/Show’ dropdown is set to ‘Hide on checked devices.’

After that, go ahead and check the boxes next to ‘Tablet’ and ‘Mobile.’

Displaying a widget on desktops only

Now, this widget will only appear to visitors using a desktop computer.

Next, you can make any changes to the widget. For example, we are typing ‘5’ into the box next to ‘Number of posts to show.’

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

Saving widget settings in WordPress

After that, you are ready to make the second widget mobile-only.

Simply 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. For example, you might type ‘3’ into the ‘Number of posts to show’ box.

As always, click on ‘Save’ when you are 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. Here's our editorial process.

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.


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.