How can I widgetize my Wordpress theme? This is one of the most common questions newbie's ask when they start out creating Wordpress themes. I myself happened to fall onto a great tutorial on this topic before I even knew what widgets were when I first started out with Wordpress, so I never even had a chance to ask how to do this, I've just always known. Sadly, I can't find that tutorial anymore, so I figured I'd replace it with one by me.

What Are Widgets?

All of the half-decent Wordpress themes out there are widgetized. It's not a hard feature to implement, yet when it is, it improves the theme's functionality ten fold. Widgets are the small, well, widgets, that can be added to the sidebar of Wordpress themes via the Dashboard. Common widgets include Recent Posts, Top Commentators, and Categories. The Widgets control panel can be found under Appearance>Widgets under Wordpress 2.7's Dashboard.

How to Implement Widgets in Your Wordpress Theme

This process is amazingly simple, which is partly why widgets in Wordpress themes are as popular as they are.

Step 1

Firstly, open up your functions.php file, if your theme doesn't have one, create one. Enter this into it (make sure it's between tags):

if ( function_exists('register_sidebar') )
	register_sidebar(array(
	'name' => 'sidebar',
	'before_widget' => '<div class="sidebar-box">',
	'after_widget' => '</div>',
	'before_title' => '<h2>',
	'after_title' => '</h2>',
));

This is somewhat self-explanatory if you just look it over. What this does is create a widget-ready area named sidebar. It defines certain aspects of the widgets that will be used in this area, such as what appears before and after the widget and what appears before and after the title of the widget. This is what the above code will produce in the source code of a website when a widget is used:

<div class="sidebar_box">
	<h2>Title Here ("Recent Posts", for example)</h2>
	Widget content is here, like a list of recent posts for example.
</div>

Because you have the ability to define what is wrapped around the widget and the title of the widget, you can now use CSS to style the widgets. Nice, huh?

Step 2

Now that you have that done, you can close functions.php and move onto sidebar.php. Paste this in the spot you want your widgets to appear:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("sidebar") ) : ?>
<?php endif; ?>

Note what it is entered into dynamic_sidebar(). Make sure this matches up with the name of the widgetized area you defined in functions.php.

Because of the ability to name your widgetized areas, you can create multiple widgetized areas. You could put one in the header to rotate ads or put one in the footer to display your recent posts. (These are just suggestions, get creative!) Don't feel you're constrained to keep widgets in the sidebar just because you're used to seeing them there. Widgets can go anywhere in your theme with a little work.

If you liked this post, stay updated. Follow me on Twitter or subscribe to our RSS Feed via email.

Related Posts

Like this post? Spread it!