When setting up themes I like to give people options, lots of options, some say too many options. Those options usually come in the form of widget ready areas for WordPress themes. There are widgets for just about everything now, and more being developed everyday. You could even make your own widget. With so many types of widgets an easy way to make your theme customizable is to “widgetize” areas.

My Checkmate theme has 10 widget areas! With that many places to stuff widgets things can start to get confusing. I’ve adopted an easy way of not only clueing in end users of where the widget area is but also keeping the code easy to read.

Lets start with the basic widget area.

//Register your sidebar in functions.php
<?php
if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '<div class="title">',
        'after_title' => '</div>',
    ));
?>

//And the code to call that sidebar in template files
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar() ) : ?>

Pretty simple stuff, and this would work fine if you only have on widget area like a sidebar. But what if you want two sidebars? Or dynamic sidebars? Or a non blog layout that doesn’t have sidebars? Well you could call them by number. But now which is which? You will probably know but your end users will be confused: “Is 1 the sidebar or the footer?”. I’ve seen many themes fall into this trap.

Name Your Widget Areas

So name your widget areas! By naming them your end users will be able to select the appropriate widget area and you’ll be able to edit your code without wondering which number that widget area belongs to. This is how:

When registering your widget area in functions.php:

<?php
register_sidebar(array(
  'name' => 'Footer',
  'before_widget' => '',
  'after_widget' => '',
  'before_title' => '<h3>',
  'after_title' => '&lt/h3>'
));
?>

And when calling the area in templates:

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