WordPress widgets allow you to dynamically add content to sidebars directly from the wordpress control panel. I think this is a great option. The reason I’m using a Blog CMS is to reduce the amount of code I have to write, so this means less markup in my theme. I’m using only one sidebar on this site with a few widgets, including search, categories and links.

There are a few tricks to get widgets to work how you want, but it is relatively quick and painless. I’ll give an example of how I made this theme widget ready.

It starts in your functions.php file in your theme folder. If you don’t have a functions.php file, you’ll have to create one. You can define as many “sidebars” as you wish, but for this example I’m only using one. My file looks like this:

<?php

if ( function_exists('register_sidebar') ) {
	register_sidebar(array(
        'name' => 'sidebar',
        'before_widget' => '<div class=\'widget %2$s\'>',
        'after_widget' => '</div>',
        'before_title' => '<h2>',
        'after_title' => '</h2>'
	));
}

?>

Name is what you will see when you open your widgets section in the admin control panel. Before_widget and after_widget allow you to wrap your widget with whatever tags you wish, in this case a div. You’ll see that my div has a class of ‘widget %2$s. This allows me to address my widgets in CSS. Each widget will have the class “widget”. They will also have a more specific class that lets me target that widget. That is what %2$ is doing. So for my search widget, I’ll have a class of “widget widget_search”. Now I can target “widget_search” specifically in my CSS to create unique styles. Before_title and after_title allow me to add custom tags for my title, in this case of a header h2.

Now that the functions.php file has been created/modified, you should see it in your “Widgets” section under “Appearance” in the control panel. You can simply drag any of the available widgets to the appropriate widget based on the same you gave it in your functions.php array.

In your theme templates, you have to call the dynamic sidebar. You can use some conditional logic to check if dynamic sidebars are set, but I know I’ll be using them, so I just call the method statically with the following code:

<?php dynamic_sidebar('sidebar'); ?>

You can call this from anywhere, to make things easy, I’m calling it in sidebar.php. This way I can keep my reference to that is already defined in my template files.

Finally you’ll want to style your widgets in CSS. I use a standard “.widget” definition and then use the custom classes to define my header images. For example, in my categories widget looks like this:

.widget_categories h2 {
    background: url(images/categories.jpg) 0px 0px no-repeat;
}

.widget_categories ul li {
    width: 257px; height: 25px;
}

.widget_categories li a {
    background: url(images/categoriesli.jpg) no-repeat;
    padding: 0 0 0 35px;
    display: block;
    color: #eee;
    text-decoration: none;
}

.widget_categories li a:hover {
    background: url(images/categoriesli.jpg) 0 -25px no-repeat;
    color: #fff;
}

That defines my header and unordered list for the categories widget which is completely dynamic.