Add Unlimited Custom Sidebars

Add Unlimited Custom Sidebars

More themes nowadays give site owners the ability to add their own unlimited sidebars. So the site owner can create as many sidebars as they want and assign a specific sidebar to a specific page.

In this tutorial I’ll go through with you the while process to get this feature done. Please note that this post assumes you have basic knowledge of javascript, PHP and WordPress development skills. If not, it’s may not suitable for you.

Before going to the codes part, we should know that the sidebar information is stored in a global variable $GLOBALS['wp_registered_sidebars']. If we dump the values, you should see an array with all the registered sidebars like this:
register-sidebars-array

For each sidebar, it contains the info like name, id,description, etc. This is the basics we need to know before moving to following tutorial.

As a first step, we need to determine where we can add the custom sidebars. This depends on your needs. For me, I choose to see the “Add New Sidebar” link in the widgets page so whenever I create a sidebar, I can drag widgets to it without going to another page. You can also place it in a submenu in the dashboard, you make the call.

Let’s get to the widgets page (Appearance > Widgets). For this tutorial, I’ll add the “Add New Sidebar” link to the page title. After I click the link, there would be a form to let us enter the sidebar information incl name, description as aforementioned. Before I provide the codes, below is the screenshot how it will look like.

add-custom-sidebar-link

To make this, I’ll use javascript. So let’s create a separate js file custom-sidebars.js. And we only want to load this file in widgets page widgets.php so add below codes to your functions.php.
custom-sidebar-js-enquene
You’ll notice that we also load a css file which we’ll use to stylish the add sidebar form.

Then in the custom-sidebar.js, we’ll use blow codes to add the “Add New Sidebar” link and form.

add-sidebar-form

The codes is self-explanatory. Once the js file is loaded, it will add a “add new sidebar” link to the wrap (here is the page title), and the form tags will also be added after the link. We don’t want the form to automatically appear, so in the css file, add some styles to hide it.

.sidebar-info {
    display: none;
}
.sidebar-info.show {
    display: block;
}

We only want it to show after click the link. Add below to the custom-sidebar.js.

$('.add-sidebar-btn').on( 'click', function() {
                $('.sidebar-info').toggleClass('show');
            });
            cancel_btn.on( 'click', function() {
                $('.sidebar-info').removeClass('show');
            });

Now we’ll need to store the form information after entered the name & description and clicked the Add Sidebar button. I am going to use ajax for this.

In the js file, add below codes.

add-sidebar-ajax-js

For the ajax handler, add this to your functions.php.
add-sidebar-ajax-php

Here I store the sidebar information to an option “pfun_sidebars“. We will use this later.

After above steps, we have the “Add New Sidebar” link in the widgets page and can save the custom sidebar information. Now let’s use the stored information to register our custom sidebar.

To register a sidebar, we have to call register_sidebar. And this function should go with the widgets_init action.

Put below to your functions.php. (If your theme already has the widgets_init action, just put the wrapped part to it. You don’t need 2 functions for the same action.)

register-sidebars

You see, we use foreach to register all sidebars stored in option pfun_sidebars. before_widget, after_widget, before_title and after_title can be changed to match your theme’s structure.

So far, we’re almost done. You can now add unlimited sidebars in the widgets page. I am attaching all the working codes in my pfun theme for your easy use.

What I don’t cover in this post are how to remove and update custom sidebars, how to assign those custom sidebars to a specific page, but I hope this post is enough to help you get started.

Save

Author: Leo

My name is Leo who's behind this blog. I've been working with wordpress since 2010. I'll write about themes, plugins, tutorials and all about wordpress here. Hope you find it useful!

Leave a Reply

Your email address will not be published. Required fields are marked *