How to Hide and Show WordPress Sidebar Items Using CSS

CSS is a powerful tool. In the hands of designers and developers it gives sites, they’re beautiful appearance, responsiveness, and overall user experience. However, even if you’re not a master of CSS, SASS, or its various other offshoots or counterparts, you can still leverage CSS to make quick adjustments to your site’s layout.

One common difficulty I’ve seen in the past, is creating a more dynamic sidebar in WordPress by showing or hiding specific sidebar items based upon which page you’re on. There are plugins such as Jetpack which can add the ability to show and hide various elements in the sidebar, but the plugin as whole can become a little heavy overall because of all the features (most of which likely never use).

A Couple of Ways to Modify Your Site’s CSS

An alternative is to use CSS. To do so however, you’ll need one of two things: direct access to your theme’s CSS (preferably a child theme if you’re not the originator) or a plugin that enables you to add CSS to your current WordPress theme.

Simple Custom CSS is, as the name suggests, a clean, simple, and lightweight plugin that allows you to add CSS to your site directly from within the WordPress admin.

There are other plugins available, however, if you can “child theme” your current theme, that’s likely the best route. Going plugin-free can lighten the burden on your site.

If you’re not big on FTP and PHP, you may want to have your web developer undertake the child-theming process as its a bit more advanced. Either way, the CSS we’re about to explore can be done with the plugin described above or via child theming.

Special note: This article will be most helpful if you have a basic understanding of CSS principles. Expert status isn’t a requirement by any means, but you may want to do some reading on the basics before messing with your site’s CSS.

Hide a Specific Sidebar Widget on Your Homepage

In different situations, it can come in handy to be more strategic with the content you display on your homepage’s sidebar (if you have one).

For example, if you have a call-to-action at the top of your sidebar that also appears on your homepage, things could become a little redundant or cluttered for users. In this case, it may be best to remove the widget from the sidebar when viewing the homepage.

In this case, it would make sense to keep the sidebar CTA since it’s no longer redundant on all the other pages that don’t contain the prominent CTA on the homepage.

Solution? Let’s remove it with CSS! To do so, we first need to grab some CSS classes from our site’s code to modify. For this, we’ll whip out our browser’s web inspector, finding the body tag, then checking out the classes in use. (WordPress is smart and will change these classes based on the type of page/content you’re viewing)

As we can see in the inspector image above, the classes “home” and “blog” are in use so we can utilize this to ensure our CSS only works on this page.

Similarly, we need to get the CSS class (or ID) specific to the WordPress sidebar widget we wish to target.

In the CSS editor of your choice (whether via plugin or by direct stylesheet editing) here’s the CSS we need to add to remove our widget from the homepage only:

.home #wd_subscribe_widget-2 {
     display: none;
}

And, just that simple, the widget disappears only on the homepage.

With a few lines of CSS, we’ve now successfully made a more dynamic and targeted sidebar.

Have a Widget Appear Only on a Specific Page

Another nice benefit to the quick CSS route is that it enables you to help a typically static blog sidebar to work for a landing page where you want to place a form or CTA.

For example, let’s say you have a special offer or widget that you want to appear only on a specific page. Similar to the example above, it’s simple. Referring to the steps previously followed for obtaining the page’s body classes, we want to find the one that’s specific to the page you wish to target. It should look something like “page-id-4.” The “4” in that example being the actual id of that specific page.

Now that we have our page-specific class, we can write our CSS. For this example, I’ll just use the widget from the previous section:

#wd_subscribe_widget-2 {
     display: none; /* Hide the widget on all other pages */
}
.page-id-4 #wd_subscribe_widget-2 {
     display: block; /* Show the widget on this page only */
}

Upon adding this code, our selected sidebar widget will only appear upon the page with the ID of 4.

Hide All Widgets Except for One

As an alternative scenario, let’s say you have one particular sidebar widget you would like to highlight on your category archive pages.

To do this, we can again follow the process in the first section for obtaining the class we wish to target. In this case, it would be “archive” and “category.” Notice that I’m not targeting a specific category, but all categories. Otherwise, I would have grabbed a class like “category-productivity” or “category-7” which are both partial to a specific category rather than all category archive pages across the site.

Again, now that we have our page (or archive) singled-out, we can write our CSS:

.archive.category .widget {
     display: none; /* Hide all widgets on the category archives */
}
.archive.category #wd_subscribe_widget-2 {
     display: block; /* Show our selected widget only. */
}

Voila! Now we have a widget that only appears in you category archives.

Everything Said

As you can see, in a relatively painless manner, there’s a wide variety of ways we can use CSS to customize our WordPress sidebar. This helps not only for technical aspects but opens up a wide range of possibilities for being more strategic with what sidebar content we display at what instances to our readers.