X

See How Easy It Is To Widgetize WordPress Themes

Making your themes widget-ready really isn’t as difficult as you might think. Widgetizing your theme usually involves making your sidebar items widget-ready. I go over what exactly a widget-ready theme is in a previous article. If you have a theme coded in clean CSS, it could even take 5 minutes or less, and I’ll show you how.

  • Making sure your theme is “widget friendly”
  • Creating a functions.php file to register the sidebar
  • Enclose your static sidebar in the dynamic sidebar conditional tag
  • Making multiple widget-ready areas
  • Other creative ways to use widgets

Start widgetizing your themes and read on…

The first thing you need to do is make sure your sidebar (or whatever you’re widgetizing) is what I like to call widget friendly. This involves formatting the HTML in a certain way. The ideal sidebar item in a widget-ready WordPress theme is coded like so:

<h2>Categories</h2>
<ul>
<li><a href="http://example.com/?cat=1">Category 1</a></li>
<li><a href="http://example.com/?cat=2">Category 2</a></li>
</ul>

Notice how this is very clean code. There are no divs and no added classes to the <ul> and <li> tags.

The following four examples are also widgetizable.

<div class="sidebar-item">
<h2>Categories</h2>
<ul>
<li><a href="http://example.com/?cat=1">Category 1</a></li>
<li><a href="http://example.com/?cat=2">Category 2</a></li>
</ul>
</div>

<li class="sidebar-item">
<h2>Categories</h2>
<ul>
<li><a href="http://example.com/?cat=1">Category 1</a></li>
<li><a href="http://example.com/?cat=2">Category 2</a></li>
</ul>
</li>

<h2>Categories</h2>
<div class="sidebar-item">
<ul>
<li><a href="http://example.com/?cat=1">Category 1</a></li>
<li><a href="http://example.com/?cat=2">Category 2</a></li>
</ul>
</div>

<h2 class="sidebar-heading">Categories</h2>
<ul>
<li><a href="http://example.com/?cat=1">Category 1</a></li>
<li><a href="http://example.com/?cat=2">Category 2</a></li>
</ul>

Yes, there are added divs in these examples, but they are workable with the WordPress widget system. As long as nothing between the two <ul> tags is needed for CSS styling, you should be good to go. With that said, the following example is not widget friendly.

<h2>Categories</h2>
<ul class="blahblahblha">
<li class="blah"><a href="http://example.com/?cat=1">Category 1</a></li>
<li class="blah"><a href="http://example.com/?cat=2">Category 2</a></li>
<div id="bottom-of-list"></div>
</ul>

This is because there are added styles to the <ul> and <li> tags. Make sure your theme is coded in one of the more “ideal” widget friendly ways to avoid this issue.

Register the Sidebars

The next step is to evaluate your layout. How many widgetized areas do you want? One is no problem. Two or more isn’t a problem either. You can even have them formatted in different ways, just as long as they’re widget friendly, as explained above.

The first thing you’re going to need to is create a functions.php file inside your theme directory. This is a file you can use to modify the WordPress functionality with PHP code, without using a plugin – or editing the core code. It’s all built into a specific theme.

Let’s look back to that ideal widget friendly sidebar item format, the first example in this post. To register a sidebar with that formatting, we would place the following code in our functions.php file.

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
?>

Seems pretty self-explanatory, right? The “Categories” title was enclosed in <h2> and </h2>, therefore we put that is the value for before_title and after_title respectively. You can also place code in the other before_widget and after_widget to enclose each widget item within other code you may need for your layout.

Sidebar Conditional Tags

Hey, a conditional tag? Hopefully that sounds familiar. We’ll be using something similar to check if the sidebar is registered with widgets, and if they’re active. At the top of your sidebar (or where you want widgets to start being displayed) you place the following code.

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

The sidebar stuff goes in between, and then…

<?php endif; ?>

Make sure you have the endif; after the opening if statement at some point, or your entire theme will break. If you’ve done everything right at this point, your theme should be widget-ready. However we’re not done yet…

Multiple Widget Ready Areas

With a few additions and changes in your functions.php file and a few more if statements in your theme files, you can have as many widgetized areas as you want, each with their own unique name.

Let’s say you had a three column layout with 2 sidebars – one on the left, and the other on the right. You want to widgetize both of these separately. We’ll work with the first example’s sidebar structure for both. Your functions.php file will look like this:

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Left Sidebar',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Right Sidebar',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
?>

Note the new name part of the array. You can name this whatever you want, but try to be descriptive. Now, when you go to your sidebar.php file or wherever each of your sidebars are located in your theme, you’ll use the following conditional tag – with the name of the sidebar you chose in functions.php. Also please make sure this file doesn’t have any erroneous spaces or line breaks, as it may cause warning messages to pop up while editing things.

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Left Sidebar") ) : ?>Default left sidebar stuff here…
<?php endif; ?>

And for the right sidebar…

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Right Sidebar") ) : ?>Default right sidebar stuff here…
<?php endif; ?>

Make sure everything is consistent in terms of the names you chose in both of the files.

Other things you can do with widgets

Widgets don’t have to be used for sidebars. They can be used for other things like footers, or even in the header. In theory, you don’t even have to put any “default” code in between the conditional tag. Be creative with it and use your imagination. Use a widget in your header to rotate ads, or have a login box widget in the footer, or wherever you want – it’s up to you.

Conclusion

Hope you learned from this tutorial and now know how to widgetize your themes. If you get some error like “headers already sent…” while editing anything you may have to double check your functions.php file to make sure there isn’t any space below the closing ?> tag.

Some further reading is available at Automattic and WPDesigner. There are some other “shorthand” versions of the code I did on those pages.

Feel free to comment or share if you liked it. I welcome all feedback. Also make sure to subscribe to the feed if you haven’t already for the latest theme releases and tutorials.

Comments  Leave a Reply

  1. I don’t know if I did something wrong, or if your tutorial didn’t cover this, but I’m trying to set up multiple widget-ready sidebars for different pages. (4 different pages)

    I registered them, and they are showing up in the “widgets” section, and I also added the code to sidebar.php, but when I tried calling the appropriate sidebar to a particular page, it didn’t work.

    How do I call each sidebar to each different page?

    Thanks!!

  2. Brilliant – I’m trying to pop a widget in my header to display a different ad and this worked a treat 🙂

  3. You should remove the if function_exists() stuff from this as the dynamic_sidebar() function has been present for a REALLY long time now.

  4. Thanks for this easy-to-follow tutorial. I’m working on my first custom wordpress theme and am realizing all of the things I took for granted with the free, already styled templates I’ve been using. I wish more tutorials were as straightforward as this one.

  5. There’s a plugin called Widgets on Pages (which I developed – hands up) which lets you add/remove/rename sidebars through the admin area. These can then be added to your theme with a simple template tag. I hope this may be of some use.

  6. Thanks for this information. It’s very useful as I’m planning to widgetize one of my themes.

    David.

  7. What goes in the index?

    1. Nothing goes in the index, unless you want a widgetized area there.

  8. Excellent instructions – Got this working after about 5 seconds!

  9. You sire are full of great information. I appreciate this article for it is extremely useful. Sometimes wordpress’ website just confuses the f*** out of me, but you sir have made everything nice and clear.

    Thank you!

    -Tyler

  10. This guide just COMPLETELY saved my ass. I had a theme that I wanted to use that was apparently not widgetized.

    Holy god thank YOU

  11. Mahmoud Abdalla October 12, 2009 at 6:52 pm

    hmm.. i might sound a bit stupid here, but i’m trying to widgetize the header image of this theme: http://wordpress.org/extend/themes/that-music-theme. and i’m completely clueless. i need to replace that big image in the header area with an image rotating plugin called image fader.

    any help would be really appreciated.

    Regards,

    -MA

  12. How to make a Sidebar Widget « Knowing more about Wordpress September 27, 2009 at 3:30 pm
  13. I was pointed to this post by the folks over at simplyWP after I asked if they had a tutorial for widgetizing sidebars or if they had a favorite link they’d like to share.

    This tutorial was a life saver to say the least. It’s written so clearly unlike all the others out there and it’s very easy to understand. I appreciate you sharing this with others!

  14. 5 Useful And Creative Ways To Use WordPress Widgets | Kosvo Youth Portal July 26, 2009 at 6:50 am

    […] See How Easy It Is To Widgetize WordPress Themes […]

  15. 5 Useful And Creative Ways To Use WordPress Widgets | SEO & Web Design July 21, 2009 at 2:37 am

    […] See How Easy It Is To Widgetize WordPress Themes […]

  16. 88 Unmissable Wordpress Links: Theme Thursday « Knowledge Articles July 19, 2009 at 5:38 am

    […] See How Easy It Is To Widgetize WordPress Themes […]

  17. 5 Useful And Creative Ways To Use WordPress Widgets | July 19, 2009 at 2:40 am

    […] See How Easy It Is To Widgetize WordPress Themes […]

  18. 5 Useful And Creative Ways To Use WordPress Widgets | Design Visibility July 17, 2009 at 8:00 pm

    […] See How Easy It Is To Widgetize WordPress Themes […]

  19. WordPress Weekend Resources – July 17, 2009 | Tutorials and wordpress July 17, 2009 at 9:39 am

    […] over at Smashing Magazine. It goes over some useful ways to use WordPress widgets, including having multiple widget-ready areas among other […]

  20. Sidebar Widgets | NSLog(); July 1, 2009 at 5:58 pm

    […] how to make a sidebar widget? A quick Google search pointed me here, here, here, here, and of course here. Did I miss […]

  21. WordPress 2.8 Released June 21, 2009 at 10:08 am

    […] Completely re-worked widgets panel, which makes it easy to manage multiple widget areas. […]

  22. Building a better blog host: Week 2 - the front page - WPMU Tutorials June 19, 2009 at 2:08 pm

    […] you’ve picked a theme that isn’t widgetized, it’s a fairly straightforward process to add another widgetized “sidebar”. I have taken some themes and changed their boxes featured categories areas into a widgetized area […]

  23. The Ultimate Wordpress Theme Developer List « Webitect Theme Contest June 17, 2009 at 8:25 pm

    […] See How Easy It Is To Widgetize WordPress Themes […]

  24. Great tutorial! Easy to understand too. Thanks!

  25. Thank you very much. Your instructions were easy to follow.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WordPress Launch Checklist

The Ultimate WordPress Launch Checklist

We've compiled all the essential checklist items for your next WordPress website launch into one handy ebook.
Yes, Send Me the Free eBook!