As I might have mentioned once or twice, January is theme month at Fun with WordPress and I already have some interesting posts lined up thanks to everyone that has gotten in touch. For today’s post I have been asked to give a quick guide to adding dynamic sidebars(the widgety kind) to a theme, in particular horizontal sidebars.

There are three parts to adding extra sidebars to your theme:

1. Register the sidebars in functions.php
2. Call the sidebars form the PHP
3. Add some extra styling to layout the sidebar

Register the sidebars

Registering the sidebar is about more than just telling WordPress it exists. You also need to specify the structure of the sidebars. In this case I want to use a structure something like this:

The wrapper div will be contained within the theme itself as it will have a specific ID based on its location. The remainder is specified in the array shown below:

//create the array
$sidebar_array = array(
‘before_widget’ => ‘<div id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h2 class=”widgettitle”>’,
‘after_title’ => ‘</h2>’,
);

In this you can see that the HTML specified in before_widget and after_widget wrap the widget in a DIV tag. %1s and %2s will be automatically replaced with the ID and title of the widget so they can be individual styled if necessary. before_title andafter_title wrap the title in H2 tags. The content will be specified by the widget.

Except for this styling there is only one more variable we need to provide that is the name of each sidebar. As this is separate for each of the sidebars we will need to modify the array twice. Each time just before the sidebar is registered with theRegister sidebar function. For example:

//set the name
$sidebar_array['name'] = ‘Sidebar’;
register_sidebar($sidebar_array);
$sidebar_array['name'] = ‘footer’;
register_sidebar($sidebar_array);

With these two sets of code included in functions.php you should now have two named sidebars available for widgets. But don’t add them yet.

Call the sidebars

The next step is to add the function calls in the HTML files. The function call itself is very simple: dynamic_sidebar(sidebar_name);, but for most themes you will want to do a little more to cope with situations where there are no widgets added, and to highlight where the widgetised areas are.

If there are no widgets then dynamic_sidebar will return false. This means you can easily add it as the equation in an IF statement like this:

<div id=”footer”><?php if ( !dynamic_sidebar(‘footer’) ) { ?><p>Sample Content</p><?php } ?><p>&nbsp;</p></div>

In this example I have included some example content that will be shown if there are no widgets. In the default theme, and most others, this will contain a pre-widget sidebar. The default theme also checks to see whether widgets are installed at all. I am assuming they are, but check sidebar.php in the default theme to see how to check.

I have also added the wrapper DIV I mentioned above, this one for the footer, and a paragraph with a class of clear, so I can float the widgets and use this to clear them.

Styles the sidebars

If you go ahead and add some widgets to the footer sidebar now you will find that they all appear above one another, like a normal sidebar. This is not what we want for a footer, so a little styling is needed. But only a little.

#footer div.widget
{
float:left;
margin-right:30px;
margin-left:30px;
}

#footer p.clear
{
line-height:0.001;
font-size:0.001em;
clear:both;
}

The example above is the default theme. To make it work in the default theme I also needed to alter another line of CSS. Line 83:

//from
background: #eee url(‘images/kubrickfooter.jpg’) no-repeat top;
//to
background: url(‘images/kubrickfooter.jpg’) no-repeat bottom;
//create the array
$sidebar_array = array(‘before_widget’ => ‘<div id=”%1$s”>’,'after_widget’ => ‘</div>’,'before_title’ => ‘<h2>’,'after_title’ => ‘</h2>’,);