WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Tutorials» How to Hide a WordPress Widget on Mobile (Easy for Beginners)

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

Last updated on August 11th, 2020 by Editorial Staff
107 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
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 are often added in the website sidebar or footer. Sometimes a widget may look good on desktop / laptop devices, but you may want to hide it on mobile devices.

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

Hiding a WordPress widget on mobile devices

Note: In most responsive WordPress themes, the sidebar will appear below your content on mobile devices. This is why often website owners want to hide certain widgets on mobile to speed up their website speed for mobile users.

How to Hide a Widget on Mobile in WordPress

For the sake of this tutorial, we’ll be hiding the search widget on our demo site, but you can use it to hide any WordPress widget.

On our demo site, the search widget appears at the top of our sidebar, and it looks fine on desktop.

The widgets showing in the sidebar on a desktop

However on a mobile phone, the sidebar widgets display below the content instead of alongside it:

The search widget displaying beneath the content on mobile

We are going to hide the Search widget so that it only displays on desktops, and not on mobile devices.

Note: In this tutorial, the term ‘desktops’ includes laptops as well as regular desktops.

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

The widgets section of the WordPress admin

On this screen, you’ll see your active widgets placed in the widget-ready areas of your website.

Let’s go ahead and edit the Search widget by clicking on the name of the widget:

Expand your widget to view the options

On the widget settings, you’ll see a new section added by the Widget Options Plugin. Here, simply click on the small mobile icon, then choose which device or devices you want to hide the widget on.

Hiding a widget on mobile and tablet devices

Don’t forget to click on the ‘Save’ button to save your changes.

Now, go ahead and check out your site using a mobile device. That widget will no longer appear in your widget area:

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

But, what if you wanted to hide a widget on desktop devices but display it on mobile screens?

Let’s take a look at how to do that.

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 a different one for mobile visitors.

For example, you might want to show your five most recent posts on desktop, but only three posts on mobile devices.

That’s also easy to do with the Widget Options plugin. You can simply create two widgets and set one widget to display only on desktop, and the other to only display on mobile devices.

First, add or open the widget that you only want to display on the desktop. Then, click the small mobile icon. After that, simply check the ‘Tablet’ and ‘Mobile’ boxes to hide the widget on those devices:

Displaying a widget on desktops only

Don’t forget to press the Save button to save your changes.

Now, add or open the widget that you only want to display on mobile devices. Repeat the same process, but this time, click the ‘Desktop’ checkbox to hide the widget on desktop devices:

Showing a WordPress widget on mobile devices but not on desktops

That’s it. You now have a desktop version and a mobile version of your 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 & 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.

107 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

6 Comments

Leave a Reply
  1. FRB Dogs "Rich" says:
    Aug 16, 2020 at 8:12 am

    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!

    Reply
    • WPBeginner Support says:
      Aug 18, 2020 at 10:15 am

      You’re welcome, glad our guide was helpful :)

      Reply
  2. Jean-Claude says:
    Aug 15, 2020 at 1:16 pm

    Thank you. Very helpful!

    JC

    Reply
    • WPBeginner Support says:
      Aug 17, 2020 at 3:02 pm

      You’re welcome :)

      Reply
  3. Mamooty Reev says:
    Aug 12, 2020 at 1:08 am

    Does the plugin use php, js, or css to conditionally hide the widgets?

    Reply
    • WPBeginner Support says:
      Aug 12, 2020 at 10:08 am

      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.

      Reply

Leave a Reply Cancel 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.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
WPForms Logo
WPForms
Drag & Drop WordPress Form Builder Plugin. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2020 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2020)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2020)
    • SiteGround Reviews from 4196 Users & Our Experts (2020)
    • Bluehost Review from Real Users + Performance Stats (2020)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2020 – Step by Step Guide
Deals & Coupons (view all)
SendinBlue Coupon Code
Sendinblue Coupon
Get Sendinblue, a powerful marketing automation toolkit for small businesses, for FREE.
StackPath's logo
StackPath (MaxCDN) Coupon
Get StackPath CDN for just $10/month! It's the same service we use to make our site super fast.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).
Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress CDN by MaxCDN | WordPress Security by Sucuri.