Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
25 Million+
Websites using our plugins
Years of WordPress experience
WordPress tutorials
by experts

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

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

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?

Your website may look great on full-sized computer screens, but that doesn’t necessarily mean it will look good on smaller screens, too.

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

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, the sidebar widget appears below the content when viewed on a smartphone.

This means visitors will need to scroll to the very bottom of the page in order to search your blog posts, WooCommerce products, or other content.

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

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

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

13 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Hajime says

    Thank you for the easy to understand guide. However, in my AvadaTheme, the device selection tab and checkboxes do not seem to appear.
    My AvadaTheme is V7.6.1. Is there a difference in specifications between versions?

    • WPBeginner Support says

      There may be a conflict between the plugin and your theme, we would recommend checking with the plugin’s support and they should be able to assist!


  3. FRB Dogs "Rich" says

    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!

    • WPBeginner Support says

      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.