Widgets are drag and drop elements that can be added to blog sidebar and footer sections of your WordPress site. WordPress comes with some default widgets like Text, Archives, Categories, etc and your theme and plugins can add additional widgets. You can view all available widgets in admin interface under “Appearance > Widgets” menu. Generally the widgets added to sidebar section will appear on all blog posts, archives, custom post types, pages, etc. Some users use multiple sidebars to add different widgets on different post types, but there are easy ways to control the widget visibility using Jetpack plugin.
Using Widgets in WordPress Sidebar
With the Gutenberg editor, all widgets are blocks which you can customize using the tools available for blocks. When using block based theme, you will also not see the “Widgets” section appearing under “Appearance” menu in WordPress admin panel. However, most themes still use Widgets and here we will explain with the traditional classic widgets editor and widgets blocks setup.
1. Using Jetpack Widget Visibility in Classic Widget Editor
Widget visibility is one of the free module of Jetpack plugin which helps to control the visibility of individual widgets on different pages of your site. For example, you can show a search widget only on blog archive pages and hide it on sidebar of regular blog posts and pages. First, we will explain using the plugin with classic widget editor.
1.1. How to Activate Widget Visibility?
Install Jetpack plugin and navigate to “Jetpack > Settings” menu. Search for the “Widget Visibility” module and activate it. Otherwise, navigate to “Writing” section and scroll down to find “Widgets” heading. Turn on the option that says, “Enable widget visibility controls to display widgets only on particular posts or pages”.
You will see a success message showing “Updated Settings”.
1.2. How to Use Widget Visibility?
Once the module is activated, navigate to “Appearance > Widget” and add the required widget to your sidebar. Let us take an example of “Search” widget, click on the “Visibility” button to see additional options as shown below:
Basically you will see three dropdown boxes to control the visibility of the “Search” widget on different pages.
- Show or Hide – Choose you want show or hide the widget.
- Condition – Select the type of condition from the dropdown. It can be a category, author, users, role, tag, data or page.
- Page or Post Type – Choose individual page or a post type from the dropdown.
You can click the + icon and add multiple conditions for the widgets to show or hide. Check “Match all conditions” option to apply “AND” logic for all the added conditions.
The function can be used in different scenarios to hide and show the widget on different pages. For example, the “Search” widget can be shown on different pages like below:
- Hide on sidebar of all pages – “Hide” if “Page” is “Page”.
- Show on sidebar of only archive pages – “Show” if “Page” is “Archive Page”.
- Hide on archive page and show on blog posts – “Hide” if “Page” is “Archive Page” and “Show” if “Page” is “Post”.
You can also hide or show the widget for the posts belonging to specific category, taxonomy or tag.
Note: For classic widgets, you can also use other plugins like Widget Controls which offer similar features.
2. Using Jetpack Widget Visibility with Widget Blocks
Jetpack widget visibility will still work if you are using widget blocks with Gutenberg.
- Go to “Appearance > Widgets” section and add your block to the sidebar.
- Select the block and then go to “Block” tab from the right sidebar “Settings” panel.
- Scroll down to bottom and expand “Advanced” section and click on “Add new rule” button showing under “Visibility” heading.
- Select “Show this block” or “Hide this block” option from the dropdown. After that, select the condition from “If” and post type or page from “is” dropdown.
- Add multiple rules if needed and click “Update” button on top right corner to publish your changes.
If you do not want to use plugin or not using Jetpack, then the best option is to use “Additional CSS Class(es)” option to hide pages based on device viewport. For additional controls, you may still need to use block plugins like Spectra.