Skip to content

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:

Yay! 🎉 You made it to the end of the article!
Alex Denning
Share:

5 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Rica
March 6, 2011 1:46 am

Thank you for this site. It suddenly made wordpress a tad easier to understand and interesting enough to be appreciated by a non-coder. This article gave me reason to subscribe…

again…THANK YOU.

Marcosfv
May 7, 2010 6:37 pm

Thanks for yours tips!.Very useful to customize our themes.

Mario
November 5, 2009 1:09 am

Great post. Very helpful and easy to follow. Thanks.

Advanced Uses of WordPress | WPShout.com
November 2, 2009 8:02 pm

[…] Guide To WordPress Theme Development"10 Awesome Things to do with WordPress’ Custom FieldsCreating the perfect widget ready WordPress themeWordPress’ Template File Hierarchy ExplainedWith those posts read and understood, you’ll […]

Sara
October 27, 2009 2:12 pm

Thanks for this easy-to-understand review. I do like the power of Widgets to be used like this, beyond the sidebar, especially on WordPress MU sites, where I can create an editable section on my global template that can then be changed or updated at the individual blog level.

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!