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.

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!