ThemeLab's Blog

Stay up to date with our newest WordPress themes, WordPress plugins, WordPress tutorials, and other announcements.

See How Easy It Is To Widgetize WordPress Themes

Last Updated on by

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.

About

Leland Fiegel was the original founder of ThemeLab. He is a web developer who loves WordPress and blogging.

  • http://www.xixblog.com Banago

    You continue to produce high quality articles. Thanks very much!

    • http://www.finallyanime.com FaS

      DEFINITELY agreed. Love it :) The thing you did with the slider’s amazing and widgetizing a theme definitely seems a bit hard but you make it a bit less overwhelming. I even modified some of my site :D Thanks a bunch. You just gained a steady admirer :) *bookmarks*

  • Pingback: WPMU Tutorials » Widgetizing themes()

  • http://www.wprock.com/ Hanne Sena

    uhh, useful and easy to follow tutorial. i though it was difficult before, well seems like i wrong. thanx

  • Fabian

    Excellent tutorial, I was looking for something like this, now I can widgetize my own theme. Thanks guy.

  • http://www.blogmastr.com Blogmastr

    I’ll be sure the check back here when I make my next theme.

  • Pingback: Ultime dal fronte WordPress 17-2008()

  • Pingback: WordPress Weekly News, 17-2008()

  • Pingback: Skylog » Blog Archive » links for 2008-05-08()

  • http://techskull.com casey

    Thank you so much! This was such a clear tutorial!

  • Pingback: How to add widgets to pages or posts? - Bloggeries Blog Forum()

  • http://writingorbit.com Sheetal

    Good tutorial. I don’t understand a lot of html or other stuff, but I like to experiment, and I have bookmarked this page for future refrence.

  • http://www.justdreamweaver.com Ryan

    Thanks for the info! I was just creating a new theme from scratch and kept getting the “headers already sent” error. Problem solved!

  • Pingback: Tutorial Machine » Blog Archive » See How Easy It Is To Widgetize WordPress Themes()

  • Pingback: ClearPixels - Free WordPress Theme | Free Wordpress Themes()

  • http://www.firethecannon.com Ryan Ray

    Thank you sooo much for this tut. It enabled me, a novice php coder, to make my sidebar widget ready on a theme I had spent many hours modding. Thanks again

  • http://gulfcoastlines.com Chelle

    Took me about 2 minutes to fix a template. Awesome instructions. Thanks.

  • Luffy

    Nice tutorial.
    I’ve found the key to solve my sidebar problems.

    Thanks

  • http://www.dliquidos.com valver

    THXXXX!! You are my heroooo!
    Big problem fix.

  • Pingback: iGraphiX Blog | RS10 - Free WordPress Theme()

  • Pingback:   Table Of Contents Of Wordpress Tutorials, Helps, Tips and Tricks by aComment.net()

  • Pingback: » SimpleWP - Free WordPress Theme ThemeHook: ??? WordPress Blog()

  • http://www.elastictheatre.com Slawka

    Thank you, thank you so much. At last someone who was able to explain all this in a comprehensible way!
    You’ve made my day!

  • http://www.schoolforheroes.com Lori Cole

    Thanks for this article. Since I’m just learning WP and doing serious modifications at the same time without really knowing PHP, I couldn’t get a secondary sidebar to work until you showed me how. Good stuff.

  • Pingback: warrenonline()

  • http://shanascraftycorner.dotsey.com/ Shana

    thank you for such a clear explanation, I’d done widgetizing for one column, couldn’t fathom out how to do two, I’ve done it now :)

  • http://selfconclusion.co.uk Stu

    Nice theme buddy! I have released this XML file to import loads of fake posts/tags/categories/comments into WordPress for testing purposes, might come in handy for anyone, check it out here…

    http://selfconclusion.co.uk/2008/09/wordpress-xml-import-download/

  • Pingback: Gray Hat Zone » Widgets, RSS E-mail Subscription and Link Love()

  • http://bsl5.com/blog whlooi

    This is useful and I always looking for a trick to add more widgetized sidebar. Thanks buddy ^^;

  • http://adzariff.com/ Adz Ariff

    Thank you for the tips, they’re very useful and I’ve managed to turn a nonwidgified sidebar into one.

  • Pingback: Clean Purple - Tema para Wordpress gratis | Celdanegra - Diseño Gráfico, Diseño web y Audiovisuales()

  • http://leonpaternoster.com/blog Leon Paternoster

    Many thanks for the tutorial: I’ve been ‘guilty’ of not making my themes widget–ready (although I have a bit of a ‘get what you’re given by the designer’ attitude to these things).

    About ‘clean’ code: isn’t ul.linklist cleaner than <div class="linklist"> your classless unordered list <div>? Also, don’t a lot of WordPress themes wrap the whole sidebar in an unordered list, including headings?

  • Pingback: Twitter counter plugin | Tutoriale wordpress()

  • http://www.allaboutkimberly.com Kimberly @ AllAboutKimberly

    This is a super tutorial. I was able to use it on one theme I had downloaded to get what I wanted, but on another blog, I’m missing something (not uncommon since I have very little coding experience) and I was hoping you could help.

    First Scenario: I had 2 sidebars (left and right) on my design dashboard that allows me to put widgets in both, but the right ones were not showing up on the actual site

    New Scenario: I added the code you have in Multiple Widget Ready Areas and now all the information is showing up, but both sidebars widget’s are showing up on the left side…still nothing on the right side.

    Any heads up you can give me would be greatly appreciated.

    Thanks,
    Kimberly

  • Pingback: Top 5 WordPress Theme Change Gotchas | WebChicklet | Just a Geek Girl()

  • http://www.mikeliebner.com/ Mike

    I’m hoping you or someone else can help. One of the problems with sidebars in general is that WHOLE sites are often using the same content in all sidebars.

    I finally learned how to do different sidebars for categories and home pages and single pages etc by simply creating a file such as category-31.php and then making the php include look for sidebar-31.php

    But now with widgets it seems this has been thrown outthe window.

    My question is – can I have a site that has differnent sidebar pages such as above and include different widget combinations as well as NON widgets in the sidebar (unique text etc.

    How do I widgetize a blog so that single pages have a different sidebar than the category pages??

    Thanks!

    Mike Liebner

  • http://man-linux.awardspace.com niky45

    thanks!! i found a theme that was absolutely what i was looking for, but it wasn’t widget ready. Now, i have modified it a little, and it IS widget ready!!

    thanks a lot, i thougth that it was really hard to do, but i was a question of a few minutes to widgetize it!!

    =D

  • http://akhmadguntar.com Akhmad Guntar

    Very useful tutorial. Thank you verymuch! :-)

  • http://jacek.me.uk Jacek

    I had two sidebars, first widgetized second one not.
    Your tutorial saves me lots of time.
    Now everything is as it should be :-)

    Many thanks!
    Jacek

  • Pingback: UrbanArtist - Free WordPress Theme | FreeWordpressThemes.us()

  • http://www.valeriovaz.com Valerio Vaz

    This post really was helpfull. Thanks :) now i have my footer widget ready :)

  • Pingback: Bookmarks for February 18th through February 23rd | valeriovaz.com()

  • Silver Firefly

    Thanks for the tutorial.

    Is there any way I can change the way the classes assigned to the items look?

    For example, in the Category list, WordPress automatically assigns classes such as cat-item-1 etc to the items in the list. Any way of removing those (they aren’t needed in my theme and my theme is not for public release) or changing them to suit me?

  • Pingback: Questions related to wordpress - Page 3 - Internet Talk - TechEnclave()

  • Juan

    I am trying to follow along but after modifying my functions.php file I get the following error:
    “Warning: Cannot modify header information – headers already sent by (output started at /home/jquintan/public_html/petsolutionz.com/wp-content/themes/iRealEstate/functions.php:1) in /home/jquintan/public_html/petsolutionz.com/wp-includes/functions.php on line 698

    Warning: Cannot modify header information – headers already sent by (output started at /home/jquintan/public_html/petsolutionz.com/wp-content/themes/iRealEstate/functions.php:1) in /home/jquintan/public_html/petsolutionz.com/wp-includes/functions.php on line 699″

    All I did was add “register_sidebar(array(‘name’=>’Services Sidebar’,’before_widget’ => ”,’after_widget’ => ”,’before_title’ => ”,’after_title’ => ”,));” after the last line of the original code which can be seen here:

    “if ( function_exists(‘register_sidebar’) ) {
    register_sidebar(array(‘name’=>’Homepage Bottom Left’,’before_widget’ => ”,’after_widget’ => ”,’before_title’ => ”,’after_title’ => ”,));
    register_sidebar(array(‘name’=>’Homepage Bottom Middle’,’before_widget’ => ”,’after_widget’ => ”,’before_title’ => ”,’after_title’ => ”,));
    register_sidebar(array(‘name’=>’Homepage Bottom Right’,’before_widget’ => ”,’after_widget’ => ”,’before_title’ => ”,’after_title’ => ”,));
    register_sidebar(array(‘name’=>’Post Sidebar’,’before_widget’ => ”,’after_widget’ => ”,’before_title’ => ”,’after_title’ => ”,));
    register_sidebar(array(‘name’=>’Page Sidebar’,’before_widget’ => ”,’after_widget’ => ”,’before_title’ => ”,’after_title’ => ”,));
    register_sidebar(array(‘name’=>’Tabber Sidebar’,’before_widget’ => ”,’after_widget’ => ”,’before_title’ => ”,’after_title’ => ”,));
    register_sidebar(array(‘name’=>’Services Sidebar’,’before_widget’ => ”,’after_widget’ => ”,’before_title’ => ”,’after_title’ => ”,));
    }

  • Pingback: 88 Unmissable Wordpress Links: Theme Thursday | Hi, Im Grace Smith()

  • Pingback: Modern Orange - Free WordPress Theme | FreeWordpressThemes.us()

  • Pingback: Green Rays - Free WordPress Theme | FreeWordpressThemes.us()

  • Pingback: Furry Palms()

  • Pingback: More Wordpress Plugins and CSS | Netpreneur News()

  • http://blog.levirogers.com Levi C. Rogers

    WOW GREAT HELP!!

  • Pingback: FreshPick: A Free Wordpress Theme | ReviewPk()

  • Pingback: Webitect()

  • Pingback: My Blog Contest » Blog Archive » Wordpress Theme Contest()

  • Pingback: Go forth and HTML 5 » Positively Deranged()

  • Pingback: The Ultimate Wordpress Theme Developer List - Webitect()

  • Pingback: Make Your WordPress Theme Widget-Ready - Tutorial Collection()

  • http://unlikelyteacher.com Paul

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

  • http://feelthemomentum.net/blog/ PzheL

    Great tutorial! Easy to understand too. Thanks!

  • Pingback: The Ultimate Wordpress Theme Developer List « Webitect Theme Contest()

  • Pingback: Building a better blog host: Week 2 - the front page - WPMU Tutorials()

  • Pingback: WordPress 2.8 Released()

  • Pingback: Sidebar Widgets | NSLog();()

  • Pingback: WordPress Weekend Resources – July 17, 2009 | Tutorials and wordpress()

  • Pingback: 5 Useful And Creative Ways To Use WordPress Widgets | Design Visibility()

  • Pingback: 5 Useful And Creative Ways To Use WordPress Widgets |()

  • Pingback: 88 Unmissable Wordpress Links: Theme Thursday « Knowledge Articles()

  • Pingback: 5 Useful And Creative Ways To Use WordPress Widgets | SEO & Web Design()

  • Pingback: 5 Useful And Creative Ways To Use WordPress Widgets | Kosvo Youth Portal()

  • http://studiosplendid.com/ Gypsy

    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!

  • Pingback: How to make a Sidebar Widget « Knowing more about Wordpress()

  • Mahmoud Abdalla

    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

  • http://www.alliancepowerlevelingguide.org Rachel

    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

  • http://www.tymayn.com Tyler

    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

  • http://www.thenetflow.com Dan

    Excellent instructions – Got this working after about 5 seconds!

  • Meroko

    What goes in the index?

    • Leland

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

  • http://investordavid.com David Koh

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

    David.

  • http://gingerbreaddesign.co.uk/todd Todd Halfpenny

    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.

  • http://www.meganlentz.com Megan

    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.

  • http://pixopoint.com/ Ryan

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

  • http://sevensomewhere.com Clare

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

  • lily

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