How to Add a Sidebar in WordPress

Sidebars are highly useful and customizable areas on a WordPress website. They can contain lots of elements to make the site easier to navigate and use. They can also improve sales and other types of conversions. Fortunately, sidebars are easy to add to WordPress websites. In this post, we’ll see how to add a sidebar in WordPress. We’ll look at several methods so you can add and build them with any WordPress theme.

A sidebar is a widget area where you can place widgets and blocks. You can use the widgets and blocks built into WordPress and you can add more with plugins. The sidebar is in a fixed location on the right or left of the content area. Sidebars are useful for adding features to make the site easier to use. Sidebars can scroll with the page or remain floating, depending on the settings available in your WordPress theme or plugins.

The WordPress sidebar is an excellent location for email signup forms, ads, blog or product categories, navigation menus, featured products, categories, tags, social media icons, a search bar, and lots more. Every sidebar can be fully customized to fit the website’s needs. Based on the theme or plugin options, you can even display a different sidebar based on the user’s status, such as logged in, logged out, and membership level.

Most themes include a sidebar on the right, left, or both. Several themes only provide the sidebar on the blog and archive pages. Some give you the option to enable or disable them. Some themes, such as Divi, include a sidebar builder where you can name the widget area and start adding widgets or blocks.

You can also build multiple sidebars and show them on specific post types. For example, you can take advantage of the different pages for eCommerce websites. This allows you to show your product categories, a product search, featured products, an email form, etc., on the home page, and then provide widgets such as price filters, color filters, etc., on product pages.

The sidebar design should follow basic website design principles. Keep the sidebar clean and easy to understand. The sidebar should be simple and intuitive. Don’t place important links with distracting ads. Keep ads to a minimum. If the sidebar is just ads, it will get ignored. Use the sidebar for your most used features. Don’t add too many features and add space between them so they stand apart. Decide how important every feature is to your website’s design and how much it adds to the website in the sidebar. Keep in mind that not every page, or even every website, needs a sidebar.

You can add sidebars to themes that don’t have them. You can also add more sidebars even if your theme does have them. This allows you to choose a specific sidebar for certain pages or posts. There are several ways to add them. Let’s look at a few options for creating custom sidebars.

Add a Sidebar Widget Area with the Gutenberg Editor

The Gutenberg editor can add columns and widgets to those columns. This works for any content made with the Gutenberg editor and any theme using the Gutenberg editor, and it can be saved as a template to reuse with any page or post.

To create a sidebar with Gutenberg, first, create a page or post. In the content area, add columns.

You have several options for the sizes of the columns. I recommend choosing a column layout where the right or left sidebar is 33 and the content is 66. If you want two sidebars, then select the column layout with 25 / 50 / 25.

Next, click the + icon within the sidebar area and click Browse All to see the widgets. Alternatively, if you know the name of the widget you want to add you can enter its name in the search field.

Finally, click on the widget you want to add to the sidebar. You can also drag it to the sidebar. Hovering over the widget shows how it will look within the content.

To add another widget to the sidebar, click the plus icon at the bottom of the area under the first widget. This opens the field where you can add a new widget. Next, choose the plus icon to add your widget. You can also simply type /, the name of the widget, and click the enter key to add the widget.

Make the Sidebar Global

You can make the sidebar for a single page or post, or you can use the same sidebar on multiple pages or posts. To do this, you can create a reusable template. You’d need to add it to every page or post where you want to use it, but if you make a change to the template the change is reflected on every page or post that uses that template. To make a reusable template, create a template in the Site Editor or from any page or post. For the site editor, go to Appearance > Site Editor in the dashboard.

Click the Editor in the upper left corner and select Templates. Choose a blank template. You’d then edit the template as you would any page or post.

Alternatively, you can create a page or post and click on the template option in the settings on the right. Then, choose the link named Add Template. This is my preferred method because it lets us name the template.

Add a name and select Create.

Let’s see how to build the template. Click the plus icon and select Browse.

Click Blocks and choose Columns. Choose a 33 / 66 column layout.

Next, add the widgets and blocks you want in your sidebar. In the larger column, add a Post Content block. This will show the content of the page or post.

In the smaller column, add the widgets for your sidebar. If the template added a Post Content at the top, you should delete it. Save the template.

Using the Template

To use the template, create a post or a page. In the settings on the right of the screen, open the section called Summary. Click the link labeled Template and choose your template from the list.

Finally, add your content and publish the page. You won’t see the template in the editor, but it will show on the front end. The editor will only show the content you’re creating.

Here’s the page on the front end. It shows the new sidebar. I’d also add padding if this were a real template, but this gets the point across. The page shows the template with the sidebar I chose, and the content added to the page.

Add a Sidebar Widget Area to a WordPress Theme with Plugins

If your WordPress theme doesn’t include sidebars, or if you want to add more sidebars, you can add them with a plugin. You can also manage them, specify locations, etc. Here are a few WordPress plugins that help you create and manage your sidebars in WordPress. You’ll only need one and any of them can build amazing WordPress sidebars.

Custom Sidebars – Dynamic Sidebar Widget Area Manager

Custom Sidebars – Dynamic Sidebar Widget Area Manager lets you create and manage custom sidebars to replace the standard WordPress sidebars and widget areas. Display different sidebars on different pages and posts, archive pages, category pages, and custom post types. Create unlimited configurations, set the widget’s visibility based on conditions, show them for specific authors, and more. It only works with the widget screen in WordPress 5.7 and below. If you’re using 5.8 and above, you’ll need to install the Classic Widgets plugin.

Lightweight Sidebar Manager

Lightweight Sidebar Manager lets you create multiple sidebars and display them based on conditions including the page, post, taxonomy, and a custom post type. You can also display them based on the user roles. This is great for displaying WooCommerce widgets on WooCommerce product pages. Create unlimited sidebars and place them in the right, left, or footer widget areas.

Lightweight Widget Area Plugin – Content Aware Sidebars

Lightweight Widget Area Plugin – Content Aware Sidebars replaces your theme’s sidebars based on conditions. You can also insert widget areas with shortcodes. The conditions include the post type, tags, categories, taxonomies, authors, page template, bbPress profiles, forums, topics, languages, PODs pages, etc. Other conditions include data in the Advanced Custom Fields, meta box data, the sending URL, the publish date, BuddyPress groups, and more. Add unlimited sidebars, schedule and disable them, and customize them to match your website with the Widget Area Designer.

SMK Sidebar Generator

SMK Sidebar Generator lets you generate unlimited sidebars with a custom sidebar generator and place them on any page or post. It can replace the default sidebars globally by selecting the sidebar you want to replace, or with detailed conditions. You can sort the sidebar position by dragging it. It works with multiple post types.

There are several ways to add widgets to any sidebar. We’ve already seen how to add them with the Gutenberg editor. Now, let’s look at how to add widgets if you’re using the sidebar built into the WordPress theme or one you’ve added to the theme.

WordPress Theme Customizer

This method works with themes that do not have full site editing. In the WordPress dashboard, select Appearance > Customize. This takes you to the front end with the customizer open. You can also open the customizer from the front end by selecting Customize in the top menu bar.

In the customizer, select Widgets. This image shows the Twenty Seventeen theme. I chose it because it has a blog sidebar and several footer widget areas.

Depending on the theme, you might have multiple sidebar areas that you can select from. Choose the sidebar you want to edit.

Now, you can add or remove blocks and widgets to create your sidebar.

Finally, publish the customizations and your site will display the widgets and blocks you’ve added to your sidebar. Add, remove, or edit the same as you would with the Gutenberg editor. For my example, I removed several blocks that I already have installed. Now I have just the blocks I want in the sidebar.

WordPress Widget Area

This method works with themes that do not have full site editing. To add widgets in the WordPress widget area, go to Appearance > Widgets in the dashboard menu. Next, choose the sidebar you want to edit.

Click the plus icon to open the widget window. Search for the widgets you want and add them to the sidebar. You can drag and drop them in the order you want them to display within the sidebar.

Update the widgets and your website will now display your new sidebar. For my example, I’ve removed a widget and edited a few of the widgets.

Here’s how the new sidebar looks on the front end.

That’s our look at how to add a sidebar in WordPress. There are several options for adding custom sidebars with the Gutenberg editor, regular theme settings, and plugins. You can add them globally, individually, based on the page’s content or post type, based on conditions such as user roles, and lots more. Custom sidebars add a lot of functionality to a WordPress website. Using the methods we’ve covered here, it’s easy to create any sidebar you need.

We want to hear from you. Have you added a sidebar in WordPress? Let us know about your experience in the comments.