How To Add Multiple Sidebars

Tutorials | By | 6 October 2010 | Comments 2

One question I see popping up around the web is “How do I add another sidebar on my WordPress blog.” So today I will tackle the issue at hand and show you a really easy way to add as many sidebars as you need.

We will be modifying functions.php and sidebar.php so before you start, please backup these files and if all goes wrong you can restore the files and not break your site!

OK lets get it started, we will start in functions.php:

Somewhere is your theme functions file you will have a section of code that starts something like:

<?php if ( function_exists('register_sidebar') )

Remove that code and remember to remove the closing bracket after, eg: ?>

We can then insert our code:

<?php if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'sidebar1',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
?>

The code gives us one sidebar, and will give titles a <h2> tag.

But we want more than one sidebar right? So we just add another sidebar into that code:

<?php if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'sidebar1',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
register_sidebar(array('name'=>'sidebar2',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
?>

We now have two sidebars! But we can have as many as we like just by adding to the code snippit, so for example 3 sidebars:

<?php if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'sidebar1',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
register_sidebar(array('name'=>'sidebar2',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
register_sidebar(array('name'=>'sidebar3',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
?>

Notice the only change in the new code is the sidebar name: sidebar1, sidebar2 and sidebar3.

OK so we have all the sidebars we need and the function now exists for this, and in our widgets section in wp-admin you now have 3 widget boxes, but we need to enable the sidebar to show on the front end of the blog.

Open sidebar.php and you will see a line like this:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebarname') ) : ?>
<?php endif; ?>

Remove that and add this line of code:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar1') ) : ?>
<?php endif; ?>

That allows us to display sidebar 1, this allows sidebar1 and sidebar2 to display:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar1') ) : ?>
<?php endif; ?>

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar2') ) : ?>
<?php endif; ?>

and this allows sidebars 1, 2 and 3 to display:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar1') ) : ?>
<?php endif; ?>

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar2') ) : ?>
<?php endif; ?>

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar3') ) : ?>
<?php endif; ?>

So as you can see its really easy to implement in your blog, and will enable much easier widget management.

Known Issues:

Altering your functions.php file sometimes break your blog or RSS feed, this usually is due to missing out closing brackets or whitespace in the file. Just make sure you avoid both!

Paul Maloney is a UK based web designer/developer and runs the design agency Tropica. He particularly enjoys using and working with WordPress and has a keen interest in typography. You can also follow Paul on Twitter.

Visit Paul Maloney's website

2 Comments

  • October 6, 2010
  • October 6, 2010

Leave A Comment.