Day 10: Creating New Widgetized Areas

When I say “widget” you probably think “sidebar”, right? And you’d be right… well, sort of anyway. In WordPress you’ll normally find widgetized areas in the sidebar of the theme. But there is no reason why widgets can’t be placed elsewhere and used for other things. On this 10th Day of WordPress we’ll look at how to create new widgetized areas in WordPress and how to override the existing widgetized areas in the twentyten theme.

Widgetized areas for just about anything

There are many reasons why you may want to add widgetized areas to your site. You may want to add a seccond column in a sidebar or add a whole new sidebar, you may want to add widgets to your footer or you may want to add a different sidebar alltogether to one of your page or post templates. But widgets and widgetized areas can be used for other things as well. I’ve used them to populate content on the front page, as pop-up messages and as optional spanning banners. A widgetized area is in all honesty just a box controlled from the Appearance -> Widgets area. What you do with that box is up to you.

Setting up a new widgetized area

To set up a new widgetized area you need to do two things: One, define the new widgetized area in your theme’s functions.php file and two, add a call to that widgetized area in one of the template files for your theme. Let’s tackle functions.php first:

More than likely your theme already has widgets activated. You’ll find them by going to your functions.php file and looking for a function called widgets_init() or something to that effect. Within that function you have definitions for each of the widgetized areas. The default use function looks like this:

$args = array(
	'name' => sprintf(__('Sidebar %d'), $i ),
	'id' => 'sidebar-$i',
	'description' => '',
	'before_widget' => '
',
	'after_widget' => '
',
	'before_title' => '
',
	'after_title' => '
' 
); 

The variables listed here are more or less optional but as a rule of thumb I recommend leaving them all in. For ease of use it’s a good idea to be quite explicit about what you are building. Say for example I’m adding a widgetized area that will display an ad at the top of my site I would create a new widgetized area using this code:

register_sidebar( array(
	'name' => ('Header Ad Zone'),
	'id' => 'headerAdZone',
	'description' => ('The ad zone that appears at the top of the page'),
	'before_widget' => '
',
	'after_widget' => '
',
	)
);

This produces a the new widgetized area you see to the right.

The next step is to call this widgetized area from one of your template files. Here we’re going to add a conditional statement that checks whether there is an active widgetized area with content first. That way we’ll avoid trying to activate a widgetized area with nothing in it. The call looks like this:

<?php if ( ! dynamic_sidebar('headerAdZone') ) : ?>
<?php endif; ?>

Here you can choose to insert something between lines 1 and 2 that will be inserted if the widgetized area does not have any widgets in it. The name of the widgetized area (in between the brackets) can be either the name or the ID defined in functions.php

Changing the widgetized areas in a twentyten child theme

The twentyten theme has 6 widgetized areas, two in the sidebar and four in the footer. But what if you want to change these or add new ones in your child theme? If you read my earlier tutorial Day 2: Creating a WordPress Child Theme the Smart Way you should already have an idea. Because the widgets_init() function has already been called in the twentyten functions.php file you need to unregister this function and then build a new one yourself. You do this with the following lines of code:

// Remove the default sidebar function
function remove_twentyten_widgets() {
    remove_action( 'widgets_init', 'twentyten_widgets_init' );
}
// Call 'remove_twentyten_widgets' (above) during WP initialization
add_action('after_setup_theme','remove_twentyten_widgets');

Now you can create a new function and create new widgetized areas:

function MY_widgets_init() {
	register_sidebar( array(
		'name' => ('Header Ad Zone'),
		'id' => 'headerAdZone',
		'description' => ('The ad zone that appears at the top of the page'),
		'before_widget' => '
',
		'after_widget' => '
',
	) );	
}

And finally you need to call the new function:

// Register sidebars by running twentyten_widgets_init() on the widgets_init hook. */
add_action( 'widgets_init', 'MY_widgets_init' );

If you want to keep the existing widgetized areas from twentyten and add on to them simply copy and paste the widgetized areas you want from twentyten’s functions.php over to your child theme functions.php. Then all that’s left is to call the areas from your template files like we did above. Easy as π.

This tutorial is part of the 24 Days of WordPress series. If you want to learn more about WordPress and Expression Web check out the Sams Teach Yourself Microsoft Expression Web in 24 Hours series (version 2, 3 and 4), Lynda.com’s WordPress 3.0 Essential Training course and Microsoft Expression Web 4 LiveLessons.