How to Widgetize a Theme in 3 Easy Steps!

We were contacted earlier by Karen, a user of wpSnap who was trying to widgetize a non-widget theme from a couple years ago. The theme in question was from the pre-sidebar widget days and there are many good themes on this site that fall in that category. So rather than providing a fix to each theme individually, we decided to write a short and easy tutorial for one and all.

Here’s what you might need in addition to access to your WP Admin panel, you need to have access to your server via FTP to add a functions.php file to your theme folder if it does not exist. So let’s get started:

1) If you open your sidebar.php file or any other file where your sidebar elements like categories, archives, blogroll or whatever else that people fancy reside, you will notice it is invariably in an unordered list format. Usually it will be as below:

<ul>
<li>
<h3>Categories</h3>
<ul class=”categories”>
<?php wp_list_cats(’sort_column=name&hide_empty=0′); ?>
</ul>

<h3>Archives</h3>
<ul class=”archives”>
<?php get_archives(’monthly’,”,”,’<li>’,'</li>’,”); ?>
</ul>
</li>
</ul>

Your default sidebar need not necessarily have this very code, it could be anything, it could even be a JavaScript as in the case with the Japanese Cherry Blossom theme that triggered this post. Also, it’s not a must to have h2 as the heading, although that is what the widget sidebar uses. We will fix that in the CSS so let’s not worry about it for now.

2) You need to just add two lines of code to this mark up, one at the top and one at the bottom of the list as shown below:

<ul>
<?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar() ) : else : ?>
<li>
<h3>Categories</h3>
<ul class=”categories”>
<?php wp_list_cats(’sort_column=name&hide_empty=0′); ?>
</ul>

<h3>Archives</h3>
<ul class=”archives”>
<?php get_archives(’monthly’,”,”,’<li>’,'</li>’,”); ?>
</ul>
</li>
<?php endif; ?>
</ul>

3) Open functions.php if you have one in the theme, if not, create a file, call it functions.php and add this line to it:

<?php
if (function_exists(’register_sidebars’)) register_sidebars(1, array(’before_widget’ => ”,’after_widget’ => ”));
?>

Note how I highlighted the 1 in the above code, it indicates the number of widget boxes in the whole theme. Since in the above example, we created only one dynamic sidebar, we will leave it at 1.

One last step that is seldom needed is in cases where h2 is not used in the default unordered list as heading. Say h3 was used as in our example, the easiest hack to address this would be to open style.css and look for styling for h3, copy and paste it right below (or above) the h3 styling and call it h2 instead. For example, say you find the following code for h3 in style.css:

h3{
color: #FFFFFF;
font-size: 1.15em;
font-weight: normal;
}

Copy paste and make it h2 like below:

h2{
color: #FFFFFF;
font-size: 1.15em;
font-weight: normal;
}

h3{
color: #FFFFFF;
font-size: 1.15em;
font-weight: normal;
}

That is pretty much it, the theme is now widget ready.

Additional Usage and Styling

Say you need 2 widget bars now, simply follow the same example as above, but when you create widgets, make sure it’s as below:

<?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar(1) ) : else : ?>
Unordered list
<?php endif; ?>

<?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar(2) ) : else : ?>
Another unordered list
<?php endif; ?>

then in the functions file, change the 1 to 2 as below:

<?php
if (function_exists(’register_sidebars’)) register_sidebars(2, array(’before_widget’ => ”,’after_widget’ => ”));
?>

You can take it one step further and add a specific styling before and after the widget as shown below (I’ve used <em> as an example where x is the number of widgetized sidebar lists):

<?php
if (function_exists(’register_sidebars’)) register_sidebars(x, array(’before_widget’ => ‘<em>‘,’after_widget’ => ‘</em>‘));
?>

Specific fix for Japanese Cherry Blossom Theme

Karen wanted the 3rd bottom column to be widgetized. We open sidebar.php and find this as the 3rd column/block elements:

<div class=”block”>
<h3>In Other News</h3>
<ul class=”counts”>
<script type=”text/javascript” src=”http://del.icio.us/feeds/js/krisandapril?extended;count=1″></script>
<noscript><a href=”http://del.icio.us/krisandapril”>my del.icio.us</a></noscript>
</div>

Right away I can tell there is an issue, the open unordered list <ul> is not closed with a </ul>, so we add it like below (although this step is unnecessary):

<div class=”block”>
<h3>In Other News</h3>
<ul class=”counts”>
<script type=”text/javascript” src=”http://del.icio.us/feeds/js/krisandapril?extended;count=1″></script>
<noscript><a href=”http://del.icio.us/krisandapril”>my del.icio.us</a></noscript>
</div>
</ul>

Next we gut out the del.icio.us Java, so we end with this:

<div class=”block”>
<h3>In Other News</h3>
<ul class=”counts”>

</ul>

Then we add the famous dynamic sidebar call like below:

<div class=”block”>
<h3>In Other News</h3>
<ul class=”counts”>
<?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar() ) : else : ?>

<?php endif; ?>
</ul>

and add the following code to the empty functions.php file that came with the theme.

<?php
if (function_exists(’register_sidebars’)) register_sidebars(1, array(’before_widget’ => ”,’after_widget’ => ”));
?>

The style.css for this theme shows that both h2 and h3 are styled alike, so all you will need then is the sidebar widget plugin and you are good to go.

Hope this helps!

Posted by Snap! on August 6th, 2007 | Tagged: CMS, Copyrights and Licenses, Dark Helium, Dot Dot Dot, How to widgetize, Keyboard Shortcuts, PimpDaBlog, Tips, Tutorials, Web Design, WordPress Plugins, WordPress Tutorials, WordPress plugins, wpsnap

//