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:

With one widget ready area, it’s really easy to add more…

Widgetising your sidebar in WordPress

Adding a second widget area is just a case of changing the title of the widget ready area; we can add a second widget ready area with the following in the functions.php file:

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

You’ll see we’ve changed the name of the area to ‘Second Sidebar’, and we can add this second sidebar to our theme with the following:

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

And with that we’ve added a second widgetised area to the theme.

Widgetising the homepage

Widgetising the homepage is much the same as the sidebar – pop the following code into your functions.php file:

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

And then the following into index.php or home.php file:

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

Advanced widgets

Of course, you can take your theme’s widgets to the next level with a couple of advanced tricks! This final trick comes via Thematic and SM. What we’re going to do is add a widget area after the second post, within the loop:

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

With that done, you need to add the following to your index.php/home.php file:

<?php if ($count==2) { ?>
<?php dynamic_sidebar('Homepage Widget Area 2') ?>
<?php } ?>
<?php $count = $count + 1; ?>
<?php endwhile; ?>

In conclusion

As we’ve proved here, it’s really easy to go crazy nuts and widgetise everything in your theme, so there’s no excuse not to! Be sure to [s] so you catch an upcoming post, where we’ll run through creating an awesome columned and widgetised footer! Any questions, feel free to leave a comment.