template into your main design. You can also search for themes with sidebars similar to what you want, for inspiration.
Finding inspiring sidebars for your theme design
We are using the Thematic theme as our inspiration in this chapter, and as you can see in the following screenshot, it contains a lot of default sidebars. It can be freely downloaded from the WordPress.org theme repository at http://wordpress.org/extend/themes/
thematic/ if you want all of the sidebars and none of the sweat equity, If you are determined to add your own sidebars, check out the next recipe for more details.
Including multiple dynamic sidebars in your theme
Although many themes are two-column, with only a single sidebar and corresponding
sidebar.php file, there are a number of instances where you'll want two, three, or even four sidebars surrounding your main content. Visit sites such as http://divitodesign.com/
for inspiration on how to use multiple sidebars with your theme.
In older versions of WordPress, having multiple sidebars meant resorting to using PHP's include function, or in-lining the sidebar's contents into your main template files. Luckily, with newer versions of WordPress, you can specify the name of the sidebar to include, by using the get_sidebar function.
Getting ready
We are using a basic template based on the Classic WordPress theme. You should already have a sidebar.php file, and your theme layout should support at least one sidebar.
How to do it...
We're going to give our current sidebar, which was created in the first recipe of this chapter, a name, and then create additional sidebars in which to store WordPress widgets.
Create a file for each sidebar, naming them by appending a descriptor to the string sidebar-. For this example, let's go ahead and plan to have two sidebars:
sidebar-one.php and sidebar-two.php. Start by renaming your current sidebar.php file to sidebar-one.php. Copy that file, and name the new file sidebar-two.php.
Open up the index.php file of your current theme, and then insert the following code above the get_footer tag:
<?php get_sidebar( 'one' ); ?>
<?php get_sidebar( 'two' ); ?>
Save the index.php file, and then open up your functions.php file. If you don't have one, refer to the last recipe. You will see the code:
if ( function_exists('register_sidebar') ) register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</li>',
Don't worry about the extra widget or style code; we will work on that in another recipe. Save the file and then open your sidebar-one.php file:
<!-- begin sidebar -->
<div id="menu"><ul>
<?php /* Widgetized sidebar, if you have the plugin installed. */
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?>
<li id="search">
<label for="s"><?php _e('Search:'); ?></label>
<form id="searchform" method="get" action="<?php bloginfo('home');
?>">
<div><input type="text" name="s" id="s" size="15" /><br />
<input type="submit" value="<?php esc_attr_e('Search'); ?>" />
</div></form></li>
<?php endif; ?>
</ul></div>
<!-- end sidebar -->
Save the sidebar-one.php file and open up the sidebar-two.php file. Paste the following code into the file, replacing the existing content:
<!-- begin sidebar -->
<div id="menu">
<ul>
<?php /* Widgetized sidebar, if you have the plugin installed. */
if ( function_exists('dynamic_sidebar') && dynamic_sidebar(2) ) : else : ?>
<?php endif; ?>
</ul></div>
<!-- end sidebar -->
Save the sidebar-two.php file. Back up your current theme folder, and then upload the files index.php, functions.php, sidebar-one.php, and sidebar-two.php into your current theme folder on your server. Delete the old sidebar.php file from the server.
You should now have two sidebars showing up when you select Appearance | Widgets in your control panel, as shown in the next screenshot:
Now, if you view your site, you should see two sidebars. By default, they will usually appear on the right and the bottom without any extra CSS styles applied, as shown in the following screenshot. We will adjust the layout of our theme by using CSS styles in a later recipe.
How it works...
WordPress will automatically look for a file named sidebar-one.php in the theme folder when it encounters <?get_sidebar('one');?> in the index.php file. WordPress will check the functions.php file for a register_sidebars function, and use it to determine how many sidebars should be available. WordPress will then examine sidebar-one.php and include the content of sidebar-one.php if it exists. If you use the name of a sidebar that does not exist, the theme's code will either throw an error message or the WordPress back-end code will detect the sidebar hook and substitute an automatically-generated sidebar.
Notice that we've gone ahead and used dynamic sidebars, as most WordPress 2.8 and 2.9 themes will have them.
There's more...
You can set defaults for sidebar names, and affect the appearance of widgets in a particular sidebar, by using parameters when you register your sidebar.
Sidebar parameters
When calling register_sidebar, there are a number of different parameters that you can pass in the following form:
<?php
dynamic_sidebar(
array( 'parameter_name' => 'parameter_value' ) );
?>
The important parameters are as follows:
Name—allows you to change the name of the sidebar that is displayed in the admin interface on the widgets management page. In themes with multiple sidebars, the use of the name parameter can really help your theme's end users.
ID—the ID assigned to the sidebar, mostly for styling use. You can generally leave this parameter with its default setting.
before_widget—the HTML to display before printing the contents of a widget. You can use two placeholders here:
%1$s will be replaced by the widget's ID.
%2$s will be replaced by the widget's class name.
after_widget—the HTML to display after printing the contents of a widget.
before_title—the HTML to display before the title of the widget.
after_title—the HTML to display after the title of the widget.
Although the defaults are fairly well thought out, they assume a certain structure to your sidebar and your theme. It is good to examine the register_sidebar function for yourself, and decide if the defaults are okay. If not, change them to make it easier for you to style by adding different class tags or removing list item tags.
Default content
If your user has not added any widgets to their sidebars, your theme may look extraordinarily blank. For this reason, it is a good idea to include default content that will be displayed if the sidebar does not have any active widgets. If you noticed in the last example, we went ahead and placed search box code in sidebar-one.php.
You can add your own placeholder content or default widgets by adding the relevant code just below the dynamic_sidebar function in a sidebar.php file. In the following example, the Archives widget has been added as a default widget, and will show the 15 most recent posts:
<ul>
<?php if( !dynamic_sidebar(1) ); ?>
// Insert default content here
<li id="archives"><?php _e('Archives:'); ?>
<ul>
<?php wp_get_archives(type=postbypost&limit=15'); ?>
</ul> </li>
</ul
Learn more about parameters and options for sidebars at the WordPress codex http://codex.wordpress.org/Customizing_Your_Sidebar.