How to Add More Sidebars in a WordPress Theme

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

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.

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.