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') )
		'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') )
		'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') )
		'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') )
		'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.

Alex Denning

Most Voted
Newest Oldest
Inline Feedbacks
View all comments
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.

May 7, 2010 6:37 pm

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

November 5, 2009 1:09 am

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

Advanced Uses of WordPress |
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 […]

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)!

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2024

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

25 Best Free WordPress Themes (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2024 Compared and Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2024

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...