DevTips – How to Add a New Sidebar in WordPress

The other day I was reading a fashion post because its headline was really interesting: “The New Size Is Custom: How Retailers Are Using Personalization To Win Customer Loyalty“. Apparently, the retailing industry has now realized that the idea of people wanting custom-made products is the future… ??

Losers! WordPress users have been enjoying customization for years…. ?

You and I both know that what makes WordPress so cool and has allowed it to get where it is today is its ability to be deeply customized. Themes, plugins, code snippets… That’s all it takes to get a unique WordPress installation that stands out from the rest!

So I was reading that article and thought: why don’t you write yet another example of how cool WordPress is and explain how a WordPress user can further tweak it? And here I am, ready to explain to you how to create your own sidebar to do whatever you want with the widgets of your installation, wherever you want, and however you want.

Sidebars in WordPress

Probably the first thing we should talk about is what sidebars are in WordPress. Because I’m sure you either have no idea what they are, or what you think they are is only partly true. In general, a sidebar is, as its name suggests, an area on your website that appears aside:

And that’s the exact definition we get when we read the Codex:

Sidebar is a theme feature introduced with Version 2.2. It’s basically a vertical column provided by a theme for displaying information other than the main content of the web page. Themes usually provide at least one sidebar at the left or right of the content. Sidebars usually contain widgets that an administrator of the site can customize.

But not all sidebars in WordPress are “vertical columns” that appear “next to the content” as shown in the previous screenshot. WordPress actually defines a sidebar as any area in your theme where widgets can be inserted. Do your posts have a different sidebar than your pages? Then your theme defines two sidebars: one that is only used for posts and another that is only used for pages. Does the footer of your theme have three areas for widgets? Well, those are three extra sidebars!

How to Create a New Sidebar in WordPress

According to the Codex, creating a sidebar is as simple as invoking the register_sidebar function during the widgets_init action. If you have absolutely no idea of what I’m talking about, I recommend that you either read my previous post on how to customize WordPress using code snippets, or opt for the most user-friendly solution: use a plugin to create your own sidebars! ?

And since I assume you’re going to choose this second option….

Custom Sidebars – Dynamic Widget Area Manager

One of the plugins that I like the most to create our own sidebars is Custom Sidebars from WPMU DEV. With this plugin, you’ll simply need to access the Dashboard, go to Appearance » Widgets, and click on the Create New Sidebar button. With this simple action, you’ll have a new sidebar that you can fill with widgets without a problem. Easy peasy!

https://www.youtube.com/watch?v=7kgqwceGynA

Nelio Unlocker

Switch to WordPress safely while keeping your design and content

Improve your SEO today and boost your site speed by converting your pages into HTML, CSS, and WordPress standards. With zero technical knowledge required, you’ll only pay for what you need.

Try It Now

How to Use Your New Sidebar in WordPress

Once the sidebar is created, how can we use it on our website? Well, the answer is a little more complicated.

If, for some reason, you decided to write your own code, you’ll have to edit your theme templates so that the sidebar is shown where you want it to be by invoking the dynamic_sidebar function. If you don’t want to edit the theme itself, you can also further tweak your WordPress and create a new shortcode to print any sidebar on your pages, posts, and custom content. Just follow the Joe Casabona’s example:

If, on the other hand, you decided to use the plugin, I have good news for you: when you create the sidebar using Custom Sidebars you’ll have some settings to decide where and when a certain sidebar should be shown. It’s super easy! ?

Cool But… What’s the Point of All This?

Why would I want to be able to create additional widget areas? ? Well, for example, to be able to put a dynamic ads area within the content of your blog. I’ll explain myself.

Imagine you want to be able to promote a certain product or service on your blog, and you would like its ad to be inside some of your posts, at a specific location between two specific paragraphs. Well, what you could do is create a new sidebar that’ll hold that ad and insert it exactly where you want using the custom code we just discussed. As soon as that area contains a widget with the ad, the ad will be shown in all the posts that use the related shortcode.

“That’s nice but… wouldn’t it have been easier if I had put the ad directly in my post?” Sure! But this solution has a clear advantage: if you now want to promote a different product, just change the widget you have in your sidebar and all the posts will show the new ad. ?

As you can see, there’s an endless stream of possibilities here! So what are you waiting for to implement a new solution and tell us about it in the comments?

Featured Image by Joanna Kosinska on Unsplash.