Using the default method of registering sidebars, I kept running into the same issue again and again. I had direct CSS control over the widget title and the entire widget, but I did not have the ability to directly style the widget content without some major workarounds and this still limited my design options. I was wondering why they don’t allow you to register sidebars with specific classes for the widget content. Then it hit me, that you don’t need a specific call in the register sidebar function. It’s already there, you just have to think outside the box a little.

Here is the normal register sidebar call as most are used to using it.register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<b class="widget_title">',
'after_title' => '</b>',
'name' => 'Middle Footer'

Which produces something like this. My problem with this is that if I want the widget title to run full width of the widget area, I will have to do something really clever to pad the widget content. And really clever always ends up with cross browser compatibility problems. So here is the simple way to do it.

register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</div></li>',
'before_title' => '<b class="widget_title">',
'after_title' => '</b><div id="widget_content"',
'name' => 'Middle Footer'

By adding the div at the end of after_title and closing the div at the beginning of the after_widget, we are encapsulating the widget content.

Now we have an easy way to specifically stylize the widget content. Giving us the most flexibility with the layout of our widgets. I also prefer to use divs instead of lists for my widget areas, just because most of the sites I work on do not benefit from using lists because the widgets are used for movies and images and if we use media specific style sheets then we won’t need the lists easy formating. So I end up with a function that looks like this.

register_sidebar(array(
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div></div>',
'before_title' => '<b class="widget_title">',
'after_title' => '</b><div id="widget_content"',
'name' => 'Middle Footer'