One of the most repeated doubts in the support of our themes for WordPress is how to hide a certain widget or even the entire sidebar on a particular page, very often on the homepage. Let’s see how we can show or hide a widget without juggling or creating a specific sidebar for each page or file type.
Hiding widgets on selected pages with Widget Visibility
The correct option to hide the widget or group of widgets of a page set is to use some of the plugins called “Widget Visibility.” They will allow us to establish a set of rules for each widget according to the pages where we want to show the widget or not. For example, do not show in categories or on the home page. Or just show on individual posts…
To see a live example of this, you can consult the site demo of our template Paulie. As you can see, the Home has no sidebar, while individual posts do.
There are several plugins that do this work, we will see some options.
Jetpack Widget Visibility Module
If you are a user of the Jetpack plugin you can activate this module from the settings panel. (If you are using WordPress.com, it will already be active by default.) In Jetpack> Settings we use the search engine to find this module with the keyword Visibility. We click on activate and we get the result.
This module activates an additional box under each widget, which allows us to establish the above rules to hide or show it for each page, as appropriate. This setting will be available from the administrator widgets panel (Appearance> Widgets):
But it will also be available from the Customizer, accessing from Appearance> Customize> Widgets
All that remains is to establish the necessary rules to hide or show the widget according to which pages. Following the example we will hide the search widget of our main area of widgets in the home page and categories.
Other plugins to hide Widgets
If you do not have Jetpack installed or you prefer to use another alternative as a plugin, in the official repository you have some interesting options. I collect several for you:
- Widget Visibility
- Widget Context
- Visibility Without Jetpack Widget
- JP Widget Visibility (no maintenance)
The operation is very similar to the Jetpack module, in fact some of these plugins are based on Jetpack, and so the above instructions are sure to serve you.
Hiding a widget by CSS
This is perhaps the fastest and simplest form, but nevertheless the least advisable. The process is very simple, we simply need to know in which page or group of pages we want to hide the widget, and which widget we want to hide. We will therefore need two classes to compose our CSS and add it correctly.
Suppose we want to add the text widget on the main page. With the help of our browse inspector we will capture the necessary classes and identifiers and compose our CSS rule, in our case .home #text-3 { display: none; }
It is a quick method to hide a widget, but nevertheless little effective, as the code of the widget will continue loading in the HTML and will only be shown for the user view. Anyway, if your template is thought of two columns (content + sidebar), hiding all widgets will not focus the content. The space for the sidebar will still be reserved for it. If your theme allows it, better to use a full-width template without sidebar for these cases. 😉
What other utility can have hiding widgets per page?
Speaking of practical cases, it can be very useful to use this function if we have a multilingual blog and some content or articles are in other languages and we want the widgets associated with it to go in the same language. Or if we have several separate blogs or sections within the same WordPress installation (here’s a tutorial on how to do it in Spanish.)
Finally, if we monetize our blog or web, it may be interesting to show ads on some pages or to look for sponsor options for certain sections and to use the filtering of widgets to show one or another ad. In short, you already know the tools, now only need to be creative.
And you, what use are you giving or do you want to give to your Widget display options?
