Web Development: How to Add or Edit a Sidebar With Widgets in WordPress

How to Add or Edit a Sidebar With Widgets in WordPress

Sidebars are a great way to add extra content and functionality to your website, without distracting from its core content.

Most WordPress themes feature a built-in sidebar, which may already contain some WordPress widgets, such as a search bar or a list of your most recent blog posts.

In this quick tip, I’ll show you how to customize your theme’s built-in sidebar, including adding and removing content, and customizing the content that’s already there.

Even if your theme features multiple built-in sidebars, these sidebars may not be the ideal fit for your website. If you’re feeling restricted by your theme, then I’ll also be showing you how to create a custom sidebar, and then place this sidebar anywhere on your website, including areas that aren't supported by your theme.

The Best WordPress Sidebar and Widget Plugins on CodeCanyon

Explore thousands of the best WordPress plugins ever created on CodeCanyon. With a low-cost one time payment, you can purchase these high-quality WordPress plugins and improve your website experience for you and your visitors.

What Is the WordPress Sidebar?

A sidebar is a widgetized area of your WordPress website, where you can display content that isn’t part of the main webpage. This secondary content is added to your website via widgets, for example, you might use a widget to display a list of your most recently-published blogs, a tag cloud, or a search bar.

WordPress supports a range of widgets so you can add extra content and functionality to your website

Sidebars can be useful for helping visitors navigate your website, but they can also provide additional functionality. For example, if you created an online store then you might use the sidebar to display sliders that allow visitors to filter products based on price, category and delivery options. In this scenario, the sliders will always be within easy reach without distracting from the page’s core content. If you’re trying to monetize your website, then sidebars can also be an ideal place to display adverts.

Although the term “sidebar” suggests a vertical column that’s displayed alongside your main content, sidebars can appear in other locations, including above or below your website’s footer.

Sidebars dont have to be vertical bars that run alongside your webpages main content

The location of your site’s sidebars will vary depending on your chosen WordPress theme, but towards the end of this article I’ll show you how to create a custom sidebar that you can place anywhere on your site, including in locations that may not be supported by your WordPress theme.

How to Add, Remove and Edit Sidebar Widgets

You can customize the sidebar via the Dashboard, or via WordPress’ Customizer.

How to Edit the Sidebar With Customizer

Let’s start with the Customizer method:

Log into your WordPress website, if you haven’t already. Then, in the left-hand menu, select Appearance > Customize. This will launch the Customizer tool.

In the left-hand panel of the Customizer, select Widgets.The panel will now display a list of all your website’s widgetized areas. The naming conventions may vary depending on your theme, but the sidebar will typically have the word sidebar in its title. When you find the sidebar widget, give it a click.

You can add and remove widgets from your websites sidebars using the Customizer tool

WordPress will now display a list of all the widgets that are currently housed within your sidebar. From here, you can perform the following tasks:

1. Bring Some Order to Your Widgets

You can change the order widgets appear in the sidebar, by grabbing a widget, dragging it to a new position, and then dropping it into this new location.

When you’re happy with your changes, click Publish.

2. Tweak a Widget’s Title

You can edit the text that appears above each widget, or even remove a widget’s title text entirely. To do so, just find the widget with the title that you want to edit, and then give it a click to expand this section.

You can edit each widgets title or even remove it entirely using WordPress Customizer

Make your edits to the Title text.
Click Done.
Make your edits public, by clicking Publish.

This widget will now be updated to display the edited title.

3. Remove Any Widget From the Sidebar

To remove a widget from the sidebar, click it to expand its section and then select the red Remove text.

Not a fan of a particular widget You can remove any widget from your websites sidebar

The selected widget should now disappear. To make this change permanent, click Publish.

4. Enhance Your Sidebar, With Extra Widgets

Is the sidebar looking a little empty? WordPress supports a wide range of different widgets that you can add to your sidebars:

Select the Add a widget button.
Browse the list of available widgets. When you find a widget that you want to add, give it a click.
Give this widget a title and complete any other configuration options that appear in the left-hand panel. Note that configuration may vary, depending on the widget you’re working with.
Rinse and repeat for every new widget that you want to add to the sidebar.
When you’re happy with your selection, click Done.
To save your changes, click Publish.

The sidebar will now update to include all your new widgets.

If you want more widgets than what are included with vanilla WordPress you can try a WordPress widget plugin. These can let you add call to action buttons, calendars, weather forecasts, and more.

Customize the Sidebar From the Dashboard

You can also edit the sidebar from WordPress' Dashboard.

In WordPress’ left-hand menu, select Appearance > Widgets, find the Sidebar section, and then give it a click to expand. You should now be able to see all the widgets that make up this particular sidebar.

From here, you can make the following changes:

Rearrange your widgets. You can change the order these widgets appear in the sidebar, using drag and drop.
Change a widget’s title. Click to expand the widget’s corresponding section, edit the title text as required, and then click Done.
Delete a widget. Click to expand the widget’s corresponding section, and then give the Delete link a click.
Add a widget. In the Available Widgets section, find the widget that you want to add to the sidebar, and then drag and drop it onto the Sidebar section. Note that wherever you drop the widget, is where it’ll appear in the sidebar.

Want More Widgets?

Your WordPress account comes with a number of built-in widgets, but you can access even more widgets by installing WordPress plugins.

If you want more widgets to choose from, then check out our guide to the best WordPress widgets.

WordPress

Best WordPress Widgets for 2018

Eric Dye

Not a Fan of WordPress’ Built-in Sidebars?

Many WordPress themes include some form of sidebar functionality, but you’ll be constrained by how the theme chooses to position its sidebars. If you feel restricted by your theme’s default sidebar(s), then you can add a custom sidebar to your WordPress website, with the help of a third party plugin.

In this section, I’ll show you how to create an entirely new sidebar, using the free Custom Sidebars plugin.

Install and Activate the Sidebar Plugin

To setup the Custom Sidebars plugin:

In WordPress’ left-hand menu, select Plugins > Add New.
Search for Custom Sidebars, and when the Custom Sidebars – Dynamic Widget Area Manager plugin appears, click Install Now.

You can create entirely custom sidebars using a third party WordPress plugin

When prompted, click Activate.

You’re now ready to create your custom sidebar!

How to Create a Custom Sidebar

Let’s create a custom sidebar, and place it on our website:

In WordPress’ left-hand menu, select Appearance > Widgets.
Select the Create a new sidebar button.

You can create a sidebar in WordPress regular Appearance Widgets menu

In the subsequent popup, give your sidebar a name and enter a description.
Click Create Sidebar and the new sidebar will appear under a dedicated Custom Sidebars heading.

You can now add widgets to the sidebar, by dragging them from the Available Widgets section. You can also remove, and edit your existing widgets, in exactly the same way you modified WordPress’ built-in sidebars.

When you create a custom sidebar, it won’t appear on your website until you give it a home! To position your sidebar, click Sidebar location.

In the subsequent popup, select where this sidebar should be placed on your website, and whether it should only appear on specific posts or pages. For example, you might choose to display your sidebar in Footer 1 for Posts only, or in Footer 2 for all Posts that are categorized as News.

When you’re happy with how your sidebar is configured, click Save Changes.

Your custom sidebar will now appear on your website. Alternatively, when you’re editing an existing Page or Post, or creating a new one, you can specify which sidebar to use:

When you’re editing the Page or Post, find the Sidebars section in the left-hand menu.

You can assign custom sidebars to individual pages or post during the editing process

Click to expand the Sidebars section.
Use the dropdowns to specify which sidebar should be placed on this webpage, and where it should appear onscreen.

Now, when you press the Publish or Update button this webpage will go live, complete with your chosen

Conclusion

In this quick tip, we covered how you can edit your theme’s built-in sidebar, by adding, removing and tweaking WordPress’ wide range of widgets.

If you’re not a fan of your theme’s default sidebar, then I also showed you how to create an entirely new, custom sidebar, using a third party plugin.

The Best WordPress Themes and Plugins on Envato Market

Explore thousands of beautiful WordPress themes on ThemeForest and useful WordPress plugins on CodeCanyon. Purchase these high-quality WordPress themes and plugins and improve your website experience for you and your visitors.