Creating A Widget Proof Wordpress Theme

Wordpress widgets are a way to customise the sidebar of your blog very easily and where included with the default Wordpress instillation from version 2.2 onwards. With a widgetised theme all you need to do to change the menu system on your blog is drag and drop features and edit some simple parameters like heading.

To include widgets on your blog you need a widget ready Wordpress theme. However, this isn't as easy as it sounds because only a small section of themes are widget enabled.

To make a widget enabled theme you can use any existing theme and just a few lines of code. First off, find the file called sidebar.php in your Wordpress theme directory. You might not have this file, but you are looking for the section of code that displays the navigation menu.

The first step is to make Wordpress ignore the current sidebar is Widgets are enabled. The following lines will allow the theme to work on any version of Wordpress, in this instance it is contained within a list, but your template might have a different structure.

<ul id="sidebar">
<?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar()): ?>
// normal wordpress sidebar with links, categories and page list
<?php endif; ?>
</ul>

Next, find the functions.php file for your template (if none exists then create one) and make sure the following lines are present.

if(function_exists('register_sidebar')){
 register_sidebar();
}

The default behaviour of the register_sidebar() function is to surround every widget with li tags, and some other markup. You can override this by passing an array full of parameters to the function. In addition the before_widget parameter will take parameters that are part of a sprintf() function call. You can include %1$s for the id tag and %2$s for the class tag, both of which are passed from the actual widget itself.

if(function_exists('register_sidebar')){
 register_sidebar(array(
  'before_widget' => '<div id="%1$s" class="widget %2$s">',
  'after_widget' => '',
  'before_title' => '<div class="title">',
  'after_title' => '</div>',
 ));
}

Your theme should now be widget ready.

Finally, you might want to add more than one widget enabled menu system to your blog, in which case you need to use the register_sidebars() function with a number as the first parameter, the array of options being the second parameter. The number parameter is the number of sidebars you want to register and the array is a set of parameters that will be used for each sidebar.

The sidebars will be populated by widgets in the order they run down the page, this order being dictated by the dynamic_sidebar() with the optional parameter being the name of the sidebar. You can also give the sidebars names with the addition of the name argument in the parameter array. Again, as with the before_widget argument the sprintf() function is used, which basically counts up the items available. The following code will create two bars with the names of sidebar1 and sidebar2.

register_sidebars(2, array('name'=>'sidebar%d'));

To include these onto your theme you have to call the dynamic_sidebar() function with the optional parameter of a name or number. To use the original example, here is what your template might look like.

<ul id="sidebar">
<?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar1')): ?>
// normal wordpress sidebar with links, categories and page list
<?php endif; ?>
</ul>
<ul id="sidebar">
<?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar2')): ?>
// normal wordpress sidebar with links, categories and page list
<?php endif; ?>
</ul>