Torn Elements

So, you’ve been out there for hours (or even days) looking for that perfect theme. Suddenly, pay dirt! You hit one that suits your needs beautifully.

You download it, activate it, then head off to the widget screen to set up the sidebar. But Oh no! The theme doesn’t support widgets!

At this point you have two choices:

1. Continue looking for another theme which does support sidebar widgets.
2. Get brave and start hacking in your own widget support.

Since the first option is boring, we’ll talk about the second. Widgetizing a hard coded theme is drop dead simple and only takes 3 simple steps!

(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: (search for: <div id="sidebar">)

<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’ll be more code but here I snipped it for the sake of brevity. Basically you want to remove any hard code that makes up the sidebar (wp_list_pages, wp_list_cats, etc) and replace it with support for widgets.

Step 2

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

<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 if ( function_exists('register_sidebar') )register_sidebars(2);?>

Save and upload this to your server.

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 hard coded and widgeted sidebars:

<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.example.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>

I’ve been through many theme hunts. It wasn’t long before I realized this method as essential knowledge. It broadened my theme-hunting options greatly.

Hope someone finds this useful.

Themes Themes, WordPress