WordPress: Adding a sidebar to your theme

In another post I discussed the idea of placing a sidebar into your theme and using it to manage the navigation menu of your site. I came to the conclusion – proposed by other people from the WordPress community as well – that you can use a sidebar for basically anything but not just a sidebar.

Although you can find this information in the Codex too, I would like to show you how easy it is to add a sidebar somewhere into your theme. You’ll see that it’s just about adding some function calls here and there – that’s it and you’ve got a new sidebar that can hold arbitrary widgets.

Three simple steps

Having a list of steps you can work through seems to be the best approach for this howto. Just follow these three steps and you’ll have a new sidebar in your theme.

1. Register the sidebar

First, you’ll have to register the new sidebar using register_sidebar. Open the file functions.php of your current theme – if there’s no such file just create it – and search for calls to register_sidebar. If you can’t find any that’s fine and you can go on inserting the function call where ever you like but if your theme already got a sidebar you should find at least one occurrence of the aforementioned function.

In case there’s already a call to register_sidebar insert the new calls to this function after the existing one. This way you’ll make sure that the widgets placed in another sidebar don’t suddenly appear in your new sidebar while the other one seems to be empty; has to do with the internal ordering of the sidebars.

The code is as easy as the following: just insert the function call and adjust the name as you see fit; please choose a unique name.

<?php
# maybe other calls to register_sidebar here...
# ...
register_sidebar(array('name' => 'My new sidebar'));
# ...
?>

Want to fine tune the appearance of your sidebar? Have a look at other parameters here.

2. Inserting the sidebar into the theme

Once you’ve registered the sidebar you’ll have to tell WordPress where the widgets associated with the newly created sidebar should appear. This, of course, depends on your specific theme and other considerations as well.

For now, lets assume we wanted a new sidebar below the title of a post. We would open the file single.php – or index.php if single.php doesn’t exist – of our theme and insert the following code:

...
<h1><?php the_title(); ?></h1>
<?php if ( !function_exists('dynamic_sidebar') ||
           !dynamic_sidebar('My new sidebar') ) : ?>
  <!-- This will be displayed if the sidebar is empty -->
<?php endif; ?>
...

See that we provide the name of the sidebar registered above in the function call to dynamic_sidebar. If you want to show some default content in case no widgets are assigned to the sidebar you can do so by changing the HTML comment to something else; this may be particularly interesting if you’re developing a theme and the user hasn’t customized the sidebar yet.

If you want to read more about dynamic_sidebar check out the Codex here.

3. Adding widgets

Now that you’ve added a new sidebar to your theme you should start adding widgets. Your new sidebar should appear under Appearance – Widgets and is ready to use. If you’re not satisfied with the appearance of the sidebar or the widgets try tweaking the parameters of register_sidebar or adjust your CSS.

Conclusion

It’s pretty easy adding multiple sidebars to your theme. This post presented the basics which are sufficient most of the time. If you want to learn more about sidebars and widgets a good starting point is the Widgets API page in the Codex; extra parameters can be found there.

The more sidebars a theme has the more flexible it is. From a user’s perspective it’s just nice to display widgets just where one wants to. Since it isn’t that hard to add another sidebar users can do this on their own or hire somebody to do this for them at low costs.