How to Add a Sidebar in WordPress
Depending on your theme, you may have one or more sidebars available to customize. If a sidebar region does not contain any widgets, it won’t appear on your pages by default. To display a sidebar on your site, simply add widgets to one.
You can customize your sidebar in the WordPress Customizer tool, or on the Widgets page in the dashboard. We’ll review how to do both below:
To create a sidebar with the WordPress Customizer:
1. From your WordPress dashboard, select Appearance > Customizer.
2. In the customizer, choose Widgets, then the sidebar you want to edit.
3. Click Add a Widget and choose a widget from the menu. The widget will be added to your active widgets list in the left panel and in your live preview.
4. Customize your widget settings. When finished, click Done. Click Delete to clear an unwanted widget.
5. Add as many widgets to your sidebar as you like. To change the order of the widgets, click and drag a widget to a new position in the left side panel, or click Reorder and toggle your widget order with the up/down arrow buttons.
6. When finished, click Publish.
To create a sidebar in the Widgets page:
1. From your WordPress dashboard, select Appearance > Widgets. On the Widgets page, you’ll see all available widgets on the left side. If your theme supports sidebars, you’ll see a Sidebar option to the right.
2. Add a widget to your sidebar by clicking and dragging an available widget from into the Sidebar dropdown. Alternatively, click the down arrow icon on your desired widget, then choose a sidebar from the menu and click Add Widget.
3. Customize your widget settings. When finished, click Done or Save. Click Delete to clear an unwanted widget.
4. Add as many widgets to your sidebars as you like, then preview your changes.
How to Remove a Sidebar in WordPress
Blog sidebars have many benefits, but they’re not perfect for every page or blog design. You may prefer to place your navigation, post recommendations, and CTAs elsewhere.
In this case, removing a sidebar from your WordPress site is straightforward — here’s how to do it in the Customizer and from the dashboard:
To remove a sidebar with the WordPress Customizer:
1. From your WordPress dashboard, select Appearance > Customizer.
2. In the customizer, choose Widgets, then the sidebar you want to remove.
3. Open the first widget listed by clicking the down arrow icon, then choose Remove. The widget will disappear from the sidebar in the preview window.
4. Repeat step 3 for all widgets in your sidebar. Once all widgets have been cleared, the sidebar will disappear from the preview.
To remove a sidebar in the Widgets page:
1. From your WordPress dashboard, select Appearance > Widgets.
2. Open the Sidebar dropdown that you want to remove from your site.
3. Open the first widget in the sidebar and click Delete.
4. Repeat step 3 for all widgets in your sidebar. Once all widgets have been cleared, the sidebar will be removed from your pages.
Enhance Your WordPress Blog With a Sidebar
While sidebars may not work on every blogging website, they’re a mainstay of many blogs today and probably aren’t going away. With WordPress widgets, it’s easy to do testing and on-the-fly reorganization of your sidebars.
So, try experimenting with your sidebar layout and contents to see what keeps users clicking the most. Frequent blog readers will look for a sidebar if they want to find more content or learn more about your brand — make sure you have one that serves them what they need.
Use Elementor to Design Custom Widgets
If you have Elementor Pro, you can use Elementor’s visual, drag-and-drop interface to design content that you include in your sidebar.
To achieve this, go to Templates → Add New and create a new Section template. For example, you could create a template that includes an email opt-in form or a call to action (CTA). Make sure to publish your template when you’re finished.
Next, add the Elementor Library widget to your sidebar where you want your template to appear. Then, use the Choose Template drop-down to choose the specific template that you want to add to your sidebar:
So far, we’ve assumed that your theme already has support for sidebars and gives you built-in settings to control them.
However, what if that’s not the case? Some situations you encounter could be:
- Your theme doesn’t have any built-in support for sidebars. This is true of the Hello theme because Hello aims to create the most lightweight foundation possible.
- Your theme only includes one sidebar area but you’d like to add another one.
Thankfully, it’s pretty painless to create a sidebar. There are two basic steps here:
- You register your custom sidebar with WordPress via a simple code snippet.
- You edit your site to display the sidebar on the front-end (via a plugin or code)
1. Register Your Sidebar
Before you can add widgets to your sidebar and display them on the front-end of your WordPress site, you need to register your sidebar(s) with WordPress.
Once you’ve registered your WordPress custom sidebar, it will show up when you go to Appearance → Widgets and you’ll be able to add widgets using the method from the previous section.
To register your custom sidebar, all you need to do is add a small code snippet to either:
- The functions.php file of your theme (make sure you use a child theme if doing so).
- A free snippet manager plugin like the Code Snippets plugin.
Using the Code Snippets plugin (or something similar) is the simplest solution because it eliminates the need to use a child theme.
Here’s the code snippet that you need:
function my_custom_sidebar() {
register_sidebar(
array (
'name' => __( 'Custom Sidebar Area', 'your-theme-domain' ),
'id' => 'custom-side-bar',
'description' => __( 'This is the custom sidebar that you registered using the code snippet. You can change this text by editing this section in the code.', 'your-theme-domain' ),
'before_widget' => '<div class="widget-content">',
'after_widget' => "</div>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
)
);
}
add_action( 'widgets_init', 'my_custom_sidebar' );
And here’s what that snippet looks like in the free Code Snippets plugin:
2. Display Your Sidebar
Once you’ve registered your sidebar, you should see it show up as an option when you go to Appearance → Widgets. If you want, you can start adding widgets to your custom sidebar just like we showed you before:
However, you’re not quite finished yet – you still need to configure WordPress so that it displays your custom sidebar (and its widgets) on the front-end of your site.
Here, you have two options:
- Elementor’s Theme Builder – you can use a visual, drag-and-drop interface to configure everything and add your sidebar. You don’t need to know any code.
- Code – you’ll need at least a basic understanding of PHP, HTML, and CSS.
How to Create a Sidebar With Elementor
With Elementor, you can create new templates for any part of your theme. For example, if you create a new template for your “Pages”, all of your pages will automatically use that template.
You can do the same for your blog posts (or custom post types). You can also conditionally apply your templates to different content, which is useful because it lets you add a sidebar to some pieces of content but not others.
To use Elementor to display your custom sidebar, you’ll basically create a new post or page template that includes your sidebar alongside your main content area.
To get started, go to Templates → Theme Builder. Then, choose where you want to add your sidebar first – either Single Post or Single Page:
To save time, you can choose one of the premade templates. Or, you can build your design entirely from scratch. The simplest option is to just choose one of the templates that already includes a sidebar:
If you opt to design your template from scratch, just make sure to use two columns and add the Sidebar widget where you want your custom sidebar to appear.
Then, edit the Sidebar widget and use the Choose Sidebar drop-down to select the custom sidebar that you registered in the previous step.
Once you do that, you should see a live preview of any widgets that you’ve already added:
As you add new widgets via the WordPress Customizer or the dedicated widgets area, they will automatically appear in this sidebar area.
To finish things out, make sure to Publish your template. When you do, you can use display conditions to control where your sidebar template appears. You can either display it on all content (to use your sidebar sitewide). Or, you can use the display rules to only add your sidebar to specific content.
How to Add Your Sidebar With Code
Unless you feel comfortable working with HTML/CSS/PHP, you should stick with the Elementor method above.
To display a WordPress custom sidebar with code, you’ll need to directly edit your theme’s template files. Because you’re making direct edits to your theme, it’s essential that you use a WordPress child theme. This will prevent your changes from being overwritten when you update your theme.
To learn more about child themes and how to create them, you can read the comprehensive guide to WordPress child themes.
Once you’ve created your child theme, copy the single.php file from your parent theme’s folder to your child theme’s folder. Then, edit the single.php file and add the following snippet where you want your custom sidebar to appear:
<?php if ( is_active_sidebar( 'custom-side-bar' ) ) : ?> <div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary"> <?php dynamic_sidebar( 'custom-side-bar' ); ?> </div><!-- #primary-sidebar --> <?php endif; ?>
To make sure the sidebar appears in its own column, you’ll likely also need to add some custom CSS. This is why the Elementor method from above makes a better option if you’re not a developer.
Depending on how you want to set things up, you might also need to add this snippet to additional template files (like archive.php, etc.)
For a deeper look at this topic, you can consult this WordPress Codex entry.
How to Remove A Sidebar in WordPress
Now, let’s go the other direction and talk about how to remove a sidebar that you don’t want to use. For example, maybe your theme comes with its own sidebar, but you’d rather use a full-width template for some or all of your content.
To remove a WordPress sidebar, you have the same two options as creating a custom WordPress sidebar:
- Elementor Pro
- Code
However, before you turn to these options, make sure that your theme doesn’t include a built-in feature to let you disable the sidebar. Many themes give you an option in the WordPress Customizer where you can disable the sidebar without any manual action on your part. Or, your theme might already come with a full-width template, which you can select when working in the WordPress editor.
If your theme doesn’t include this option, here’s how to manually remove your sidebar.
How to Remove a Sidebar With Elementor
To remove your WordPress sidebar with Elementor, all you need to do is create a template that doesn’t include a sidebar area. Then:
- If you want to completely remove your sidebar from all content, you can use this template sitewide.
- If you only want to remove your sidebar from certain content, you can conditionally display your sidebar-less template wherever it’s needed.
To get started, go to Templates → Theme Builder and choose where you want to remove your sidebar first – either Single Post or Single Page:
To save time, you can choose one of the premade templates that don’t have a sidebar. Or, you can also build your design from scratch – just don’t add the Sidebar widget!
Once you’re finished, you can Publish your template and use the display conditions to control where it appears.
How to Remove Your Sidebar With Code
You can also remove a WordPress sidebar by directly editing your theme’s template files and removing the PHP snippet that displays the sidebar.
Because you’ll be editing your theme’s files, make sure to use a child theme. Then, copy over the template files for the content where you want to remove the sidebar. For example, single.php, archive.php, etc.
Edit those files and remove all instances of <?php get_sidebar(); ?> (or similar variations – the code might look slightly different).
You might also need to adjust the HTML and CSS to make sure everything looks right.
If you’re not familiar with PHP, HTML, and CSS, we recommend sticking with the Elementor method because it eliminates the need to use code.
How to Display Different Sidebars on Different Content
In an earlier section, we talked about how to add a sidebar in WordPress even if your theme doesn’t support it.
However, what if you want to take your existing sidebar area, but just display different sidebars on different content? This would let you display different collections of widgets for certain types of content.
For example, maybe you want to use one set of widgets for blog posts in your “Reviews” category and a different set of widgets for blog posts in your “Tutorials” category.
The easiest way to display different sidebars on different content is Elementor. You do this as follows:
- First, create several Elementor templates, as explained above. Each template should have its own sidebar.
- Then, go to conditions and assign each template to the relevant category, page, or other condition.
Additionally, to achieve this functionality, you can use the free Content Aware Sidebars plugin. Once you install and activate the plugin, go to Content Aware → Add New to get started.
First, choose the conditions for when you want to replace your default sidebar with the new sidebar that you’re creating. For example, if you want to use this sidebar for all blog posts in the “Reviews” category, create a Categories condition:
Next, go to the Action tab and choose which sidebar you want to replace. Or, you can also “merge” sidebars to include content from both:
You can peruse the other tabs for some additional settings, but there’s nothing else you need to configure.
Once you’ve made your choices, click Create. Then, go to Appearance → Widgets to add content to your conditional sidebar:
8 Best WordPress Sidebar Plugins to Enhance Your Sidebar
To finish things out, let’s go over some of the best WordPress sidebar plugins that can enhance how you work with sidebars and what content you can include.
Some of these plugins add useful new widgets that you can include in your sidebars, while others adjust the sidebar itself. You’ll also see a few familiar faces from the tutorial sections above.
