Part 10: Widgetized Sidebars

Another drawcard for end users of WordPress, are the easy-to-change sidebars through use of widgets. By default, WordPress comes with many widgets, menus, calendars, tag clouds, just to name a few. It allows people a great deal of control over their site without the need to touch code.

But just like the customizable menus offered, there’s a little work we need to perform to enable WordPress to use the sidebar in this manner. It’s not too hard, but it does require that we write another simple function in order to have it working.

Note: In this instance we’ll be widgetizing the sidebar, but the same workflow can be followed for just about any area, such as the footer.

Widget Aware

Hop into the Dashboard of your WordPress install, and navigate to Appearance » Widgets

WordPress will tell you that your theme is not widget-aware. How do we make our theme widget aware?

To get things started, we’re going to open up functions.php and make a quick addition.

register_sidebar();

Save, and head back into Appearance » Widgets. Instead of WordPress telling you it is not widget aware, you’ll see this in the right hand column. Right now, it’s labelled as Primary Widget Area by default.

It’s a start, but not what we’re after.

Writing a Function

With register_sidebar fresh on our minds, we need to now use it in a function, and we’re also going to pass arguments to it. I’m naming this widget area as Sidebar Widgets, and providing an id of sidebar-widgets. After the function, we need to initialize it in the same way that we did with the menus.

function wppro_widgets() {
	register_sidebar(
		array (
			'name' => "Sidebar Widgets",
			'id' => "sidebar-widgets"));
}
add_action( 'init', 'wppro_widgets');

Save, and refresh Appearance » Widgets, and you’ll see this.

As of now we can add widgets to the area, but it will not have any impact on the site. The reason is that we haven’t told the theme where to display widgets. I’m going to add a Tag Cloud to the area, so that there is something in the widgetized area when it’s enabled in the theme. I’ve also taken a moment to add a text widget, and have moved the existing heading and text out of sidebar.php and into this.

Bringing the Widget to life

We need to use a WordPress function to call the sidebar in, and provide an argument in order to tell it which we want displayed. This goes straight into sidebar.php, and is actually the entirety of my sidebar at the moment.

<aside>
<?php dynamic_sidebar( 'sidebar-widgets' ); ?>
</aside>

Which will display the following

As you can see by the dot point, it’s placed this in a list. You can leave it like this, and style the applicable css accordingly, or you can get rid of that by adding more arguments to our function. Here’s how to update the function to remove the list.

function wppro() {
	register_sidebar(
		array (
			'name' => 'Sidebar Widgets',
			'id' => 'sidebar-widgets',
			'before_widget' => '',//removes li
			'after_widget' => ''//removes /li
			,));
}

You’re now free to drag items in and out of the sidebar, trouble free. But what happens when there’s nothing in the sidebar?

Adding Default Content

Naturally, a new WordPress install doesn’t have any widgets defined, so if you were to take this theme and install it, well, this is all you’d get in the sidebar.

It’s not great, nor is it indicative of what the area holds, or rather, can hold. I’m going to leave some simple instructions and a link, as follows

<aside>
				
	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-widgets') ) : ?>
	This is an area for your widgets. You can find them in your <a href="/wp-admin">Dashboard</a> by browsing to Appearance » Widgets
	<?php endif; ?>
</aside>

In lieu of defined widgets, the text provided will be displayed, which is definitely more useful for the end user.

Wrapping it up

And that’s all there is to widgetizing a WordPress theme. A function and some template tags with a couple of arguments. It’s possible to register many different widget areas, and dictate what widget area is used on what page, or style of – there’s a lot of flexibility here. This is something we’ll be covering in the future when looking at how to have many different kinds of page layouts.

The post Part 10: Widgetized Sidebars appeared first on YinPress.