The Perfect Widget Ready WordPress Theme

After releasing my own WordPress [theme], [b], it’s become apparent to me that these days theme users don’t really want to touch the theme files at all. They’d much prefer a comprehensive theme options page. One of the ways you can make your theme further customisable is with widgets. Widgets allow users to add parts to a [theme], which is why they’re a good way to add customisability to your theme. As the codex shows, there are a heck of a lot of widgets available!

Most [themes] will have something widgetised, but most of the time it’s just the sidebar, and at most it’ll be a single area. Theme developers! Listen up! It’s really easy to widgetise, as we’re going to explore today:

The anatomy of a WordPress widget

When creating a widget ready area, you’ll first need to open up your funtions.php file and add the following code:

if ( function_exists('register_sidebar') )
    register_sidebar(array(
		'name' => 'Main Sidebar',
        'before_widget' => '<div class="widget">',
        'after_widget' => '</div>',
        'before_title' => '<h3 class="widgettitle">',
        'after_title' => '</h3>',
    ));

As you can see, you’ve got a number of options. First is the ‘name’. Each widget area should have a different name that relates to where it is located. After that, ‘before’ and ‘after’ widget. This gets added, obviously, before and after the widget, and here we’ve added an opening div with the class ‘widget’. The final two options are ‘before’ and ‘after’ title. Again, obviously, these get displayed before and after the widget title. Here we’ve applied an h3 tag with the class ‘widgettitle’.

Next, as this is the ‘Main Sidebar’ widget area, open up the sidebar.php file and add the following:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Main Sidebar') ) : ?>
<p>This area is widgetised! To make use of this area, put some widgets in the 'Main Sidebar' section.</p>
<?php endif; ?>

This tells WordPress if the widget area ‘Main Sidebar’ exists, display the contents here, if it doesn’t display some particularily useful instructions on how to make some widgets appear here.

With that done, under ‘Appearance’, click on widgets and you’ll see something like this: