WAKEshine

I’ve just discovered WordPress Widgets.  I’ve been seeing the menu item for it and assuming I need to check it out but I didn’t get around to it until today.

The good news is that using widgets simplifies your sidebar development and maintenance.  You no longer need to use html or php to change it.  This is even better news if, like me, you are creating sites for others to self-maintain.  Now the users can modify what is shown on the sidebar and in what order.  Each widget has features which are customizable, too.

How do you add widgets to your WordPress installation?  Full instructions are here.  If you’re running WordPress 2.2 or later, you don’t need to add the functionality.  But depending on the template you use, you may have to modify things a bit.

The basic idea is that you wrap a sidebar with <ul></ul> tags.  Within those tags, you put code that determines if sidebar support is present and requested.  If the automatic sidebar is requested, then that will be used.  Otherwise, whatever you had coded in sidebar.php will be used.

The basic structure is this: 

<ul>
<?php if (!function_exists(’dynamic_sidebar’) || !dynamic_sidebar()) :?>
// your own sidebar code
<?php endif; ?>
</ul>

Depending upon your template, it may look like this or it may be a little different.  If your template is wrapped in a <div> structure, you’ll need to keep that outside that php if as well.

One of the sites I was working on was using a variation of the Rin theme.  For that, I recoded it like this:

<div class="sidebar">
<ul>
<?php if (!function_exists(’dynamic_sidebar’) || !dynamic_sidebar()) :?>
// your own sidebar code
<?php endif; ?>
</ul>
</div>

The key is to keep the structure of the sidebar outside of the php if, and the content within it.  In that way, if there is a widget-enabled sidebar, that will be used and it will look (to the template) like the proper block that belongs in the side.

The Connections variation I use for this site had a sidebar.php that was not wrapped in <ul> tags.  So I just wrapped it with <ul></ul> and put the if after the opening <ul> tag.

In addition to adjusting your sidebar.php, you need to have a file called functions.php and it needs a few lines of code.  If you don’t have the file, create one with the code below and add it to your template directory.  If you do have it, add this code to the top:

<?php
if (function_exists(’register_sidebar’))
register_sidebar();
?>

I uploaded this into my template directory for the template I was using (for this example, it was in the directory wp-content/themes/Rin).

At this point, if you refresh the site, you will see…the same old sidebar.  There is still one more step to go…but this one is fun.  Log into the admin page and click on Presentation | Widgets.  You will see a box called Sidebar 1.  Whenever that box is empty (which is how it starts out), you will get the original sidebar when you view the site.

The widgets are listed below the sidebar.  Grab any that you want and drop them into the Sidebar 1 box.  If a little form icon shows to the right of the widget name, click on that to configure the widget.  Most let you change at least the title.  (The one for links doesn’t let you change the title.  But it will use whatever title you use for the Links page…it defaults to Blogroll but you can change it.)

I like it.  It’s a lot easier than playing with the php and it makes things more configurable by the end user.

A lot of widgets have been developed.  Keep up at the Widgets Blog.