WordPress Tips from : Damean  B  Sellar 

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.

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.