Let's Talk

Contact UsLet's Talk Solution

    Web Development

    How to Show or Hide Widgets on Specific WordPress Pages

    How to Show or Hide Widgets on Specific WordPress Pages

    WordPress is an absolute marvel of flexible content management solutions that enables the clients to take their website to whichever way they want in line with their requirements. This is within the feature called widgets that gives the way of adding more features to the site. However, there may be situations when you would like to display these widgets just on some pages while keeping the others blank. The following various ways will explain how you can achieve this to make your WordPress site easy to navigate and well-organized.

    Understanding Widgets in WordPress

    Widgets in WordPress

    Widgets are clickable objects embedded in the application that provide a certain feature. It can be just a search field or can be any HTML code as per the wishes of the programmer. They are within widget areas as the sidebar or in the footer section. Through its own library, WordPress widgets are available and so are those of third party because of its plugins.

    Widgets are controlled either with the help of WordPress Customizer tools or the Widgets tab on the WordPress administration page. However, properly managing the placement of these widgets across the various web pages is somewhat a challenge for anyone using WordPress for the first time.

    Why Control Widget Visibility?

    It is possible to need to show and hide widgets in certain pages for various reasons, for instance.

    Widget Visibility

    1. Better Organisation: Restricting certain web page to only necessary widgets are helpful when it comes to better organisation. For instance, opting to minimize such elements as navigation menus, and other links typical for a site design, and placing them on the side of such a page as a contact page in order to make the contact form more visible.
    2. Consistency of the Website’s Layout: Some of the designs may suite the specific areas of your website. This in turn will help to prevent drift of the design away from its intended presentation on these particular pages and will help to also make sure that only the widgets that are wanted show up on these particular pages.
    3. Performance Optimization: To reduce the page’s loading time for particular other widgets that are not of importance at that specific page, they can be hidden to ensure the users have a better experience and improve on the SEO rankings.

    Methods to Show or Hide Widgets

    Using Plugins

    Plugins are likely the simplest strategies for dealing with the visibility of widgets on a certain page.

    Wordpress Widgets

    Here are some of the most used plugins:

    Widget Logic

    Most of the users can be familiar with Widget Logic plugin that gives the ability to hide widgets according to specific conditions.

    Installation: It is very easy, so go to Plugins / Add new from your WordPress. “Search” and type ”Widget Logic”, install and activate it.

    Configuration: To do this you need to navigate through the WordPress Dashboard to the specific theme’s appearance menu and choose widgets. Select the widget which you want to configure and, they lay down the Widget Logic option.

    General: Settings that can be put include the page, category, user role etc., For instance, you can decide that only the homepage requires the use of the widget.

    Usage: Enter your conditions and then hit on save button of widget. But it will come only on those pages you have designated.

    Conditional Widget Visibility

    Conditional Widget Visibility is another very good plugin which also provides a user-friendly tool for controlling widgets.

    Installation: Like in any other case, search for this plugin in the WordPress plugin directory and install it.

    Configuration: Upon the plugin activation you will be able to configure widget in Appearance > Widgets. All these will have a new attribute for conditional visibility.

    Post options: Select the post types where the widget should be active or inactive.

    Synopsis: They use your conditions and these will go into operation from the time and date stated.

    Custom Code Approach

    However, there are also general strategies that do not involve the use of plugins and include writing custom code to display or hide widgets.

    Using WordPress Conditional Tags

    Conditional statements can be also employed in the `functions.php` file of your WordPress theme There are a number of different WordPress conditional statement tags available.

    WordPress Tags

    You can find the code in the following way: Go to –> Appearance > Theme Editor and then open the end of the file to find the `functions.php` file.

    Code Example:

    “`php

    if ( is_page(‘contact’) ) {

    unregister_sidebar( ‘sidebar-1’ );

    } else {

    register_sidebar( array(

    > ‘name’          => ‘Main Sidebar’,

    ‘id’            => ‘sidebar-1’,

    ‘before_widget’ => ‘<div>’,

    ‘after_widget’  => ‘</div>’,

    ‘before_title’  => ‘<h2 class=”widgettitle”>’,

    ‘after_title’   => ‘</h2>’,

    ) );

    }

    “`

    In this case, the sidebar will be disabled in the contact page.

    Warning: Please bear in mind that you are editing your site and, as such, creating a backup is highly recommended for your site. A single error means it’s closed to the public, and unclosed parenthesis is one common error.

    Using CSS

    In some cases, it is possible to wish to hide the widget without also unregistering it. This can be done using CSS.

    Using CSS

    Access Custom CSS: There is the direct link to the Custom CSS: Appearance > Customize > Additional CSS.

    – Code Example:

    “`css

    .page-id-123 .widget-area {

    display: none;

    }

    “`

    In this case replace `page-id-123` with the actual page ID or any other class/ID of the page which you want to apply this code.

    Limitations: The downside of this technique is that the real widget is still active and is only hidden from sight. It keeps itself in the DOM and may still add a little to the load time.

    Using Widget Visibility in Themes

    Certain themes offer the easy option of hiding or displaying widgets through help from other plugins or even codes.

    Theme-Specific Options

    Check Your Theme: By going to your theme’s customizer, you will find out if there is any specific widget settings embedded in your theme. It is usually found in the Appearance section often referred to as the Customize section.

    Configuration: Some themes have options such as “Hide Sidebar on Pages” or “Show Sidebar on Posts,” as a part of its built-in features.

    Usage: Adjust these parameters as necessary to customize the file and write the changes made.

    Theme Customization

    Theme Customization via Page Builder

    If your theme supports a page builder (which is Elementor, Beaver Builder or WPBakery) there may be an option to set up the widgets as shown on the builder itself.

    Using Page Builders: Go to the section of the page that you would like to edit and check for widgets. In most cases, you are allowed to toggle an object based on the conditions of the specific page.

    Configuration: Within the sole design, use the conditions or visibility settings to allow the definition of which elements belong to which pages.

    Usage: Result The changes made above need to be applied and saved. It is here that other stakeholders will come in handy to help the builder with the rest of the work.

    Showing/Hiding WordPress Widgets on Specific Pages

    Using Widget Options is easy to hide or show widgets on certain pages.  This plugin helps you to manage all of your widgets, and set limits to the ones you can use on which pages, posts and devices.

    If you use a block theme, keep in mind that Widget Options will convert your block-based widget areas into regular widget areas.  Then, the plugin will allow you to display or hide tools on your site.

    The first thing you need to do is to install and turn on the Widget Options app.  To know now, read more on how to install and activate a plugin on WordPress. In the admin area of WordPress, go to Settings » Widget Options as soon as it’s turned on. The app will then show you different ways you can change the appearance of your widgets.

    First of all, make sure that you have turned on the “Classic Widgets Screen” choice. In Widget Options, the ‘Classic Widgets Screen’ option is turned on. This allows you to decide if the buttons you placed in your site should appear or go missing.

    Next, click on “Pages Visibility” and then click on “Configure Settings” button.

    Setting up Widget Options

    From this page, you can choose which tools to show and which not to show.

    By default, the post types tab, the categories tab and the other tabs will already be turned on for the plugin.  You can uncheck the box next to any choice to change which widgets show up on which pages.

    Edit Page Visibility Options

    When you are done making changes, just click on the “Save Settings” button.

    Now, head to your WordPress dashboard’s sidebar and click on Appearance » Widgets.  Then you can just click on any tool which you would want to show or hide.  This will make the widget settings bigger and you will see options for how visible the widget is. You can select “Hide on checked page” or “Show on checked pages” from the dropdown menu next to “Hide/Show.”

    The widget will be hidden by default if the box is checked. This can be changed so that widgets are displayed on checked pages. You can choose to show or hide widget on the pages that are checked by drop down button.

    Finally, let’s have a look at the settings of the “Hide/Show” tool.  Below the menu, there are three tabs.  The tabs that are there are Pages, Post Types, and Taxonomies. To hide or show tools on the home page, front page, blog, archives, 404 pages and search page, click on the “Pages” tab, and choose a page.

    Check the pages where you want to hide or show the widget

    Next, you will go to the “Post Types” tab and select which pages you want the WordPress button to show or hide.

    Next on the screen, click on the ‘Taxonomies’ tab and select groups to show or hide.  In this situation, the widget will be shown or hidden for blog posts in that WordPress area.

    Make sure to click on “Save” when you’re done so you don’t lose your work.

    Wordpress pages

    Choose categories where you want to hide or show the widget

    You can proceed to your site and see how it works now. This shows the “Search” widget on the “Blog” page. On all other pages of our WordPress site, it is hidden.

    Additionally, if you are looking to go a bit further, you may wish to eliminate WordPress tools that are not in use.

    You just changed the WordPress theme and some widgets that you usually see on the left panel have been moved to the “Inactive Widgets” section.  The reason is that those tools don’t fit in the widget areas of the new theme.

    If you have these tools that are not in use, you should get rid of them as they can make your site look bad.  For this, go to your WordPress homepage and click on Appearance » Widgets, scroll down to the bottom and you will see “Inactive Widgets.”

    • The Clear Inactive Widgets button will remove them for good.
    • In basic editor, click the button that says Clear Inactive Widgets.

    Best Practices for Widget Management

    There are many ways of how to implement visibility of widgets on certain web pages of WordPress, however with reference to the best practices the site will be functional and easily navigated.

    1. Simplicity: On each of your Web pages, minimize the number of widgets. Apart from this it also upgrades performance and also satisfaction levels of the users.
    2. Continuous testing: It is advisable to check your site in different devices and browser to check on the appearance of the widget.
    3. Backup before changes: There is always the backup of the site before making changes to the code of a website or installing plugins.
    4. Documentation: Record all the modifications done to make the changes and any reason that might warrant a specific alteration. This is advantageous in future use or perhaps if the management of the site is delegated to a different member.
    5. Updates: All the plugins and themes used in the website designing should be updated because there updates are frequently released to enhance security as well as compatibility.

    Full control of widget visibility in certain WordPress pages can be a handy approach towards improving the level of adaptation of the site. In any case, this can be done using plugins, custom code, or by using available settings provided by a theme. Based on these steps outlined in this guide, you will be able to pin down on your web site well-organized and optimized for your work. It is also important to note that the major principles of widgets management include testing, simplicity, and understanding of the needs of your site.

    Written by Aayush
    Writer, editor, and marketing professional with 10 years of experience, Aayush Singh is a digital nomad. With a focus on engaging digital content and SEO campaigns for SMB, and enterprise clients, he is the content creator & manager at SERP WIZARD.