Creat a Widget for your theme usually involves making your sidebar items widget-ready, If you have a theme coded in CSS, it could even take less than 5 minutes to creat one :
First thing :
Enclose your static sidebar in the dynamic sidebar conditional tag
Making multiple widget-ready areas
Making sure your theme is “widget friendly”
Creating a functions.php file to register the sidebar
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, 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>
See 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>
There is 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>
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 SidebarsThe 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, 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 TagsWe’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.
Multiple Widget Ready AreasWith 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>',
));
?>
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 widgetsWidgets 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.
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.
Creat widget-ready For You WordPress theme 
26 March 2009 15:45
