How to Add More Sidebars in a WordPress Theme

How to Add More Sidebars in a WordPress Theme

 

Sidebars are present in almost every WordPress theme these days. They complete the theme layout, by providing space for stuff, which aren’t a part of usual content, such as menus, text excerpts, and various other kinds of widgets (Slideshows, Forms, Social buttons, to name a few).

Usually, before selecting a new theme for our WordPress site,  there’s one thing which we always check – How many sidebars or widget locations are provided by that theme? And where are they all located on the theme layout?

Theme which lack sidebars are generally ignored by users.   If you’re creating your own theme from scratch, it isn’t really a problem, because you could always design the theme layout as per your requirements, and insert sidebars wherever you want.

In this post we’ll talk about How to add additional sidebars to an existing WordPress Theme.  We are going to use the Twenty Twelve WordPress theme as example, and add a new Horizontal sidebar, just below the header But of course, you could use any theme you want, and place your sidebar (vertically/horizontally) at any location on your theme.

Here’s how the back-end Widgets panel (Appearance >> Widgets) currently look like. It shows that there are 3 different sidebars provided by the theme. The number of sidebars provided by your theme may vary, however.

Current Sidebars

And, this is how the front-end currently looks like:

Front-end Before

Step 1: Create New Sidebar

Before adding a new sidebar to your theme, you need to register it in your Theme Functions file (functions.php) file, so WordPress could recognize it. For that, go to Appearance >> Editor, and open the functions.php file. Now, append the following code at the end of that file, and save changes.

if ( function_exists('register_sidebar') ) {
	register_sidebar(array(
		'name' => 'Custom Sidebar',
		'id' => 'custom-sidebar',
		'description' => 'Sidebar below Header image',
		'before_widget' => '<li id="%1$s">',
		'after_widget' => '</li>',
		'before_title' => '<h2>',
		'after_title' => '</h2>',
	));
}

The above piece of code registers a new sidebar named “Custom Sidebar”. This name helps us recognize the sidebar on the Widgets panel. The ID “custom-sidebar” is used by WordPress to recognize the sidebar, and also to call the sidebar in your theme files. You could change these values as you like, but make sure they don’t conflict with other sidebars, already registered by the theme you’re using. Other keys such as ‘before_widget’, ‘after_widget’ etc. could be used to wrap the widget elements.

After saving changes to your functions.php file, go to Appearance >> Widgets, and you’d notice an extra sidebar, among the others already registered by your theme.

New Sidebar

Step 2: Add Sidebar to Your Theme

Now that you’ve registered a new sidebar, it’s time to call the sidebar in your template file, at the location where you want it to appear. As I want it to appear on the homepage in this case, I’d call the new sidebar in the theme’s index.php. You may add the sidebar to, say your Single Post file (single.php), WordPress Pages (page.php), or basically any template file you want.

After opening the template file (Appearance >> Editor), paste the following code at your desired location.

<div id="custom-sidebar">
   <ul>
      <?php
      if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('custom-sidebar') ) :
      endif; ?>
   </ul>
   <div style="clear:both"></div>
</div>

The above code check if the dynamic_sidebar() function exists, and if it does, it informs the WordPress to load the sidebar with ID “custom-sidebar” at that location. Make sure you specify the correct sidebar ID here, the one which you set in the previous step (inside functions.php file). After pasting the above code, save changes to your file.

Step 3: Style Sidebar using CSS (Optional)

The above two steps allow you to successfully create and add new sidebar to your theme, and you’re ready to add widgets, which you want to display on the front-end. This step is optional, and we’re just going to style the newly-created sidebar, by using a few simple CSS properties.

As I mentioned earlier, we’re going to create a “Horizontal” sidebar in this tutorial, so we need to make it horizontal because by default, an un-ordered list display items vertically. So, considering the layout is 960 pixels wide, we’re going to divide the width into 3 columns, so as to fit 3 widgets horizontally (width 300px). Here are CSS rules used for this particular scenario.

div#custom-sidebar ul {
	line-height: 20px;
}

div#custom-sidebar li.widget {
	width: 300px;
	margin:0 0 15px 20px;
	float:left;
}

div#custom-sidebar li.widget h2 {
	margin-bottom: 15px;
}

Append the above CSS rules to your theme’s stylesheet file (usually style.css), and save changes.

Step 4: Add Widgets

Finally, your sidebar is ready, and you could start placing widgets by navigating to Appearance >> Widgets. Now, check your site’s front-end to see how it looks.

Front-end with Sidebar

Author Bio

H-DEE

Freelance back-end developer, and a writer. Big fan of WordPress, and Yii Framework. Linux enthusiast. And, a hard-core Football addict.

5 Comments

  1. ProHint.COM - May 30, 2013

    Thank you very much for this good tutorial. I decide to use twenty twelve theme .so it help me .How you write code in your site in a great style.

    • G. Calamita - October 7, 2013

      Hello, thank you for your tutorial very clear and professional. One issue only: I get a vertical sidebar; I tried the custom edit of the code in a different theme. How ti fix it pls? Thank you.

  2. Maya - July 18, 2013

    So great post, but I need help 😀
    I’m putting in this sidebar widget called easy rotator and I will have few pictures which will rotate.
    would you tell me how to make rotator’s (widget’s) bottom margin not to be at the end of sidebar’s 😀
    if you understand me… I tryed few things but I can’t make it 🙁
    Please help

  3. Andy - August 9, 2013

    How do you call this function in your theme?????

    You didn’t enplane everything properly

  4. Shanjedul Hassan - September 30, 2013

    Thank you very much for this good tutorial. I decide to use twenty twelve theme .so it help me .How you write code in your site in a great style.

Leave a Reply to Maya Cancel reply

Appointment Booking Plugin for Wordpress