Widgetizing WordPress Themes

[StarLab]

How many times have you been shopping for WordPress Themes only to be disappointed that it doesn't support widgets?

Widgetizing a theme is drop-dead simple!

So save that Theme because in 3 easy steps, you can recode it to support widgets.

(Disclaimer: Don't yell at me! Backup your theme first. Have a quick restore option handy )

Step 1

Locate "sidebar.php" in your theme directory. (Note: Code will vary!!) Load it up and you will see something like this:

PHP Code:

<div id="sidebar">
<ul>    
<?php wp_list_pages('title_li=<h2>Main Menu</h2>' ); ?>            
    <li><h2><?php _e('Categories'); ?></h2>
    <ul>
    <?php wp_list_cats('sort_column=name'); ?>
    </ul>
    </li>

    <li><h2><?php _e('Archives'); ?></h2>
    <ul>
    <?php wp_get_archives('type=monthly'); ?>
    </ul>
    </li>

        <<<<Snip!>>>> <-- To keep this brief :) 

</ul></div>

There is more code, but basically you want to remove any code that makes up the sidebar that you wish to replace with widgets. (wp_list_pages, wp_list_cats, etc)

Step 2

In the example given here, we replace all that with this:

PHP Code:

<div id="sidebar">
<ul>
<?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar() ) : ?>
<?php endif; ?>
</ul></div>

Save and upload this to your server.

Step 3

Find and load "functions.php" (If it doesn't exist, create it) Make sure the file contains this line:

PHP Code:

<?php if ( function_exists('register_sidebar') )register_sidebars(2);?>

Save/create and upload this as well.

Now you can activate and use widgets. You may need to adjust some CSS, depending on how the theme was coded, but you should be done.

You can also run a combination of both coded and widgeted sidebars:

PHP Code:

<div id="sidebar">
<ul><li><h2>Main Menu</h2>
    <ul>
    <li><a href="http://www.example.com/about/"  title="About example">About example</a></li>
    <li><a href="http://www.darkstarretroproject.com/" title="Back to the Home Page">Home</a></li>
    </ul>
    </li>    

<?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar() ) : ?>
<?php endif; ?>

    <li><h2>W3C Valid</h2>
    <ul>
    <li><a href="http://validator.w3.org/check/referer" title="<?php _e('This page validates as XHTML 1.0 Transitional'); ?>"><?php _e('Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr>'); ?></a></li>
    <li><a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.example.com"><?php _e('Valid  <abbr title="Valid Css!">CSS</abbr>'); ?></a></li>
    </ul>
    </li>
</ul></div>

Hope someone finds this useful.