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.