Register and Show Sidebars in WordPress

Register and Show Sidebars in WordPress

This is a detailed post on how you can register and show Sidebars in WordPress. It also contains other useful things you need to know about WordPress sidebars.

Sidebar is a theme feature which was introduced in WordPress version 2.2. It’s basically a widget-ready area which can contain widgets. Widgets are used to show additional information or content alongside the main content.

Sidebars are generally shown on the right side or left side of the main content. You can also use other areas in your site as sidebars or widget-ready areas. For example, footer is a common place to put your widgets. You can show a list of your popular posts, recent posts, email subscription forms, your social media profiles or anything you like in a sidebar.

Now-a-days, almost all WordPress themes provide at least one sidebar or multiple sidebars(widget-ready areas) that allow drag and drop modules to be placed in them. You can control your widgets from Appearance > Widgets. 

If you are developing a custom WordPress theme or your theme doesn’t have enough sidebars, you can register your own sidebars or widget-ready areas. In this post, I will show you how to register and show sidebars in WordPress.

Register a Dynamic Sidebar in WordPress

Before using widgets and sidebars, we have to register a Sidebar and make WordPress aware of it. WordPress provides register_sidebar() function to register your desired sidebar. Check out the code below.

register_sidebar() functions accepts an array of arguments. These arguments define how the sidebar should be handled. Let’s take a look at the arguments it accepts.

  • name – This is the name of the sidebar which will be shown on WordPress Admin. By default, it is ‘Sidebar’. You can name it whatever you want. Here, we named it Main Sidebar.
  • id – Sidebar ID must be unique and all lower case with no spaces. This is an essential argument. You will use this ID to load the sidebar and assign widgets to the sidebar. By default, it is a numeric auto-incremented ID, i.e sidebar-1, sidebar-2 etc. Here, We used main-sidebar.
  • description – This defines a human-readable description for your sidebar. You can use this to describe the sidebar, what it is, where it is. By default, it’s an empty string. This description is shown on the widget management screen.
  • before_widget – This contains an HTML element which will wrap the widgets assigned to the sidebar.  By default, WordPress shows them as list items and use this : <li id=”%1$s” class=”widget %2$s”>. Here we used <div id=”%1$s” class=”widget %2$s”>.
  • after_widget – This contains the HTML element which will close the wrapper assigned to the sidebar. This closes the HTML element which was set in before_widget argument. By default, WordPress uses </li>. Here, we used </div>, because we used div tag in the before_widget argument.
  • before_title – Users can set a title from Widget management screen for their widgets. before_title argument contains the opening HTML wrapper for the widget titles. By default, WordPress uses : <h2 class = “widgettitle”>
  • after_title – This simply closes the HTML element that was opened in before_title argument. For example, here we used H3 tag in before_title. SO, after_title should be </h3>. By default, WordPress uses : h2>.

There is another argument which you can use – class argument. This argument contains the CSS class to the Sidebar in Widget management screen. Finally, the function is hooked with widgets_init using the add_action function.

Displaying a Dynamic Sidebar in WordPress

Once you have registered your Sidebar, now it’s time to show it in your site within HTML. WordPress has a function to show sidebars – dynamic_sidebar()

This function accepts a parameter of $index, which can either be the sidebar name or the sidebar ID. However, it’s better to use the sidebar ID which is safer.

Now, let’s see how we can use this function to show our previously registered sidebar.

Here we used the sidebar ID as the parameter in the dynamic_sidebar() function. Using this code we can display our sidebar almost anywhere on our site.

Generally, this can be used in a file called sidebar-main.php which works as a sidebar Template. I have written about Sidebar templates below. Make sure you check out that.

However, dynamic_sidebar() function can technically be used in anywhere within your themes.

Here, we also used wrapper elements so that we can style it easily with CSS.

Registering Multiple Sidebars in WordPress

WordPress provides another function which you can use to register multiple sidebars at once. register_sidebars() function is like the previously used register_sidebar() function.

The main difference is – register_sidebars() function accepts an extra parameter which defines the number of sidebar we want to register.  Here’s an example :

The difference here is the %d placeholder in the ‘name’ argument. This will be replaced by the number of sidebars we are registering i.e 1, 2, 3 etc.

Displaying default Sidebar content

You can show some default sidebar content if you don’t have any widgets assigned to that particular sidebar. To check if there is any widget assigned we can use the is_active_sidebar() conditional tag.

is_active_sidebar() accepts a simple parameter of $index which is the ID of the sidebar we want to check for widgets. Here’s an example :

This code will check if sidebar with ‘main-sidebar’ ID has any widgets. If it has any widgets, it will show them. Else it will show some default content.

Displaying nothing if your Sidebar is empty

The previous example showed how we can show some default content, when there is no widgets assigned to the sidebar. In this section, we’ll see how to display nothing or collapse a sidebar totally if there is no widgets assigned to it.

Let’s check out an example :

Here, we again used the is_active_sidebar() conditional tag to check whether the sidebar has any widgets assigned to it. If it has any widgets assigned, the sidebar will be shown using the dynamic_sidebar() function.

It it doesn’t have any widgets assigned, it will not show the sidebar. Remember, is_active_sidebar() accepts one parameter, that is the unique ID of the sidebar.

Using Sidebar Templates

Sidebar templates are generally php files which contain the code for dynamic sidebars. Almost every WordPress theme comes with a sidebar.php file which contains the single sidebar template.

If you use just one sidebar in your site, this file is enough for you. If you want to use multiple sidebars, it’s a good practice to create sidebar template for each of the dynamic sidebars.

get_sidebar() function is used to load a sidebar template within a theme. For example : if we want to load the sidebar.php template, we’ll simply use the following code :

get_sidebar() function accepts a parameter of $name, which allows us to load specific sidebar. For example: if we had a sidebar template in sidebar-main.php then the following code will load the sidebar template anywhere in our theme :

I always love the idea of creating sidebar templates for multiple sidebars and using the get_sidebar() function to load them. This is a good way of organizing the sidebars.

De-registering Sidebars in WordPress

When you’re creating a child theme, you might want to de-register a sidebar that was previously registered. WordPress provides a function to do that.

unregister_sidebar() function can be used to de-register a sidebar that was previously registered. Let’s see how it works :

unregister_sidebar() function accepts a parameter of $id which is the unique ID of the sidebar. Remember to use the ID correctly while de-registering your sidebars.

Over to You

I guess now you know pretty much everything you can do with sidebars in your WordPress site. Let me know through comments if you have any questions. Also don’t forget to share any ideas with us.

Sharing is Caring
Imtiaz Rayhan

WordPress Enthusiast, Novice PHP Developer. Music Addict, The Beatles Fan. Conncect with me on Facebook, Google+ and Twitter.

Click Here to Leave a Comment Below 1 comments
thu thuat

Thanks so much, nice tutorial, please write more tuts for wordpress


Leave a Reply: