When adding dynamic sidebars, there are two steps you need to take. The first is to register a sidebar and set up any options for it using the register_sidebar function; the second is to set up an area of your theme to use the dynamic sidebar using the dynamic_sidebar function.
In the early days of WordPress, sidebars used to be set up as a series of list elements in an unordered list: <ul id="sidebar"> <li id="about"> <h2>About</h2> <p>This is my blog.</p> </li> <li id="links"> <h2>Links</h2> <ul>
<li><a href="http://example.com">Example</a></li> </ul>
</li> </ul>
Chapter 6 ■ Customize with hooks, shortCodes, and widgets
That markup is still perfectly fine today and you may find some people still using it. However, in the age of HTML5 and tags such as <aside>, you may see something a little more like this in your sidebar:
<aside class="sidebar news"> <h2>Archives</h2> <ul class="news-navigation"> <?php wp_get_archives(); ?> </ul> <h2>Popular categories</h2> <ul class="news-navigation"> <?php $args = array( 'title_li' => '', 'number' => 10, 'orderby' => 'count', ); wp_list_categories( $args ); ?> </ul> </aside>
You can still see the WordPress functions for sidebars and widgets tend to have defaults that relate more closely to the old method of marking up your pages. You need to overwrite a few of the defaults when registering the sidebars, so let’s take a close look at the register_sidebar function now and see what’s going on:
$args = array(
'name' => __( 'Sidebar {#}', 'theme_text_domain' ), 'id' => 'sidebar-{#}',
'description' => '', 'class' => '',
'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">', 'after_title' => '</h2>'
);
register_sidebar($args);
In the code are the defaults for the register_sidebar function arguments. The first thing to note is that in the 'name' and 'id' parameters, the "{#}" bit is in place of an auto incremented ID number. Your sidebar name will default to "Sidebar 1" and the ID to sidebar-1, and any subsequent calls of 'register_sidebar' will auto increment the numeric element of the name and ID. In the defaults, you can also see what I’ve been talking about when I mention the default setup of sidebars being in HTML lists. The before_widget and after_widget defaults contain <li> tags because that was normally the way widgets needed to be marked up in the sidebars. This process is somewhat outdated now, so you must remember to overwrite these settings each time you set up a sidebar.
Note
■
as with any good function that requires naming things in wordpress, there are a whole bunch of ids
you need to avoid when setting up the sidebars. Luckily, there is a handy list of all reserved ids here:
Here’s a look at a function call to set up a regular widgetized sidebar for your themes: function prowordpress_setup_sidebars() {
$args = array(
'name' => __( 'Sidebar right', 'prowordress' ), 'id' => 'sidebar-right',
'before_widget' => '<section class="widget">', 'after_widget' => '</section>', 'before_title' => '<h2 class="widget-title">', 'after_title' => '</h2>' ); register_sidebar($args); }
add_action( 'widgets_init', 'prowordpress_setup_sidebars' );
I enclosed the register_sidebar function in a function that will get called on the widget_init hook, which is set up specifically for use in setting up dynamic sidebars and widgets. Inside the function, I’m calling the sidebar “Sidebar right” (showing the user that the sidebar will appear in the right side of the theme) and then changed the before and after widget arguments to something that fits better with the more up-to-date markup.
Now that you’ve registered your sidebar, you can set up a place for it somewhere in your theme. You can do this with the dynamic_sidebar function, which is fairly simple to look at but actually does a whole bunch of functionality for you. The function takes one argument, which is the ID of the sidebar you want to use in that location, and then the function does the rest, looping through and outputting all widgets that have been added to that sidebar with the correct markup that you specified in your register_sidebar function.
Before you take a look at how to set this up in your theme, there’s one quick thing to mention. Besides having your dynamic_sidebar function to run through the widgets available, you should also add content as a fallback in case there is nothing for the dynamic sidebar to display. You do this by enclosing the dynamic_sidebar function in an if statement and keeping your fallback content inside:
<aside class="sidebar news">
<?php if( ! dynamic_sidebar( 'sidebar-right' ) ): ?> <h2>Movie genres</h2> <ul class="genre-navigation"> <?php $args = array( 'taxonomy' => 'ptd_genre', 'orderby' => 'name', 'order' => 'ASC', 'style' => 'list', 'show_count' => 0, 'hide_empty' => 0, 'title_li' => '', 'depth' => 1, ); wp_list_categories( $args ); ?> </ul> <?php endif; ?> </aside>
Chapter 6 ■ Customize with hooks, shortCodes, and widgets
The if statement is using an ! operator to check whether the function returns false; if so, the Movie genres list will be shown, which is your fallback content. Otherwise, if the function returns something, it has run and will display the content of the widgets for that selected sidebar.
You now have a dynamic sidebar set up ready to display your widgets. I won’t cover how to set up and customize default widgets because they are all pretty straightforward. If you need more information, you can always take a look at the Codex: http://wp-themes-book.com/06007. Instead, let’s look at how to create your own widgets to add to your theme.