One fine day you feel that you want to display more information on your WordPress blog and finally decide to have another sidebar. But the WordPress theme you picked is non-customizable and supports only one measly sidebar. So what do you do? You don’t want to change themes as you’ve grown attached to it. So here’s what you COULD do – add another one yourself :)
This is a simple trick I picked up from some other themes. I was scratching my head too on how to add more sidebars to my WordPress blog. So I decided to reference other themes and try out some of the code myself.

Tools You Will Need

  • One PC or laptop connected to the Internet
  • One WordPress blog which needs expansion
  • One strong will to face frustration if the code does not work

Adding The Files

1 –  Open up your functions.php and locate the string with the code looking like this

if (function_exists('register_sidebar')) {
          register_sidebar(array('name' => 'Sidebar'));
}

2 – Add this code to the string

if (get_option('uwc_site_sidebars') == '2') {
          register_sidebar(array('name' => 'Sidebar Two'));

and it should looks like this.

if (function_exists('register_sidebar')) {
          register_sidebar(array('name' => 'Sidebar One'));
if (get_option('uwc_site_sidebars') == '2') {
          register_sidebar(array('name' => 'Sidebar Two'));
}

3 – Create a file sidebar2.php and paste the following code, save the file and upload the sidebar2.php to your WordPress themes folder.

< ?php /* Widgetized sidebar */ if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar Two') ) :else: ?>
< ?php wp_list_pages(); ?>
< ?php endif; ?>

Adding The Styles

Now if you apply the changes you probably would see the new sidebar appearing in your Widgets menu. Drag some widgets into it and preview your site. The new sidebar should appear now somewhere on your site but with no styles.

Go to your stylesheet.css file and look for your sidebar style. As for me it was #sidebar. You can use the Google Chrome Inspect Element function to help you locate the name of the style.  If you noticed in the sidebar2.php file you created, in Line 2 the style for the second sidebar sidebartwo was declared. In your stylesheet.css add , #sidebartwo to all your sidebar styles.

#sidebar, #sidebartwo {
        background:#fff;
        color:#242424;
        padding: 0px 5px 5px 12px;
        float: left;
        width: 170px;
        margin-right: 5px;
        margin-top: 15px;
        margin-bottom: 15px;
        font-size:12px;
}

#sidebar a, #sidebartwo a  {
        text-decoration: none;
        color: #242424;
        font-weight: normal;
        font-size: 12px;
        padding-left: 0px;
}

If you want different styles for each sidebar, then separate the styles and declare them individually.

Done!

What is left to do now is to tweak the sidebar styles until you are happy with it :) I’ll leave you with snapshots of my site before and after adding an additional sidebar and I hope your site will turn out good as mine did.

Good luck!
[nggallery id=1]