Hide WP Widgets on Mobile Devices

Hide WP Widgets on Mobile Devices

In this tutorial, we will learn that “How to Hide WP Widgets on Mobile Devices”?

The mechanism for  hiding a widget is similar to the hiding mechanism of the followings;

  • Hiding a div or span
  • Hiding tables
  • Hiding paragraph,  headings, etc.

The main thing we need to do is to find the ID or class link with the widget. When we can insert the special code for hiding ID or class in an additional CSS.

Here, we can see an example performed on Google Chrome.

Step 1:

Select the widget on which you want to hide. Right click on the widget and select the Inspect option.

Hide WordPress Widgets on Mobile Devices
Figure: Hide WordPress Widgets on Mobile Devices

Step 2:

Click on the arrow icon labeled as “Select an element in the page to insert it”.

hide a widget div in wp for mobile screens
Figure: hide a widget div in wp for mobile screens

Step 3:

Select the related widget and note its id or class. Copy the id or class.

hiding a WP widget on mobile
Figure: hiding a WP widget on mobile

Step 4:

Select the appearance and then select the customize option. After it, select the “Additional CSS”.

how to hide a widget or div in wordpress
Figure: how to hide a widget or div in WordPress

Step 5:

Code of hiding a WP Widget

Put the CSS code to hide any widget or any ID or class from mobile devices.

Some of the widget related useful plugins.

Here I am showing a list of some useful  widget related WordPress plugins

  1. Widget Options by By Phpbits Creative Studio

“Facilitate every widget an extra control field commonly knows as “Widget logic”  and this is helpful for you to control the pages that the widget will appear on. The text field is available to help you to entertain with general PHP code or any WP’s Conditional Tags,”.

 

  1. Widget Context By Preseto
  • Assign different contents on your sidebars.
  • Assign different contents on footer.
  • Assign different contents on widgets.

Widget Options adds elegant options on the bottom of each widget to completely control and manage each widgets appearance.

Built with seamlessly integration with WordPress, this plugin is the world’s most  favourite and complete widget management plugin solution yet.”

  1. Widget Logic By Wpchefgadget, Alanft

“This plugin gives every widget an extra control field called “Widget logic” . Widget logic lets you control the pages that the widget will appear on. The text field helps you to use the followings;

  • General PHP code
  • WP’s Conditional Tags.”

Advantages of hiding a widget on mobile devices

There are many advantages of hiding a widget on mobile devices.  

  1. Some of the advantages are mentioned below.
  2. Some widgets do not contain very useful information that is necessary to show on the small size screen.
  3. Hiding a widget from the mobile screen can help to focus only on the content of the website that is actually required by the user.

Conclusion

Your selected widget is hidden on mobile and can be shown on other devices.

 

Add a Comment