From my experience reviewing different WordPress themes, I noticed that one of the main features that a lot of users look for in a theme is being “widget-ready“. This is due to the fact that widgets have become a very popular tool for bloggers especially for WordPress users. Also, a lot of WordPress plugins these days include a widget version of the plugin. Unfortunately, not all theme designers realize the importance and popularity of widgets and create themes that are not widget-ready.

For those of you who use or rely heavily on widgets, finding a beautiful and well designed WordPress theme that’s not widget-ready can be very disappointing, right? You end up looking for another theme thats widget-ready. Wouldn’t it be nice if you can widgetize or make any WordPress theme widget-ready? This short tutorial will show you how to widgetize a WordPress theme.

Before you start, make sure you backup your theme files so that if something goes wrong, you can always revert to the original files.

Now to start. First thing you’ll need is a functions.php file within your theme folder. Most WordPress themes already have it but in case you don’t, all you need to do is create a blank text document using Notepad or any other text editor, save it as functions.php and copy/paste the following code into that blank file.

[php]
<?php
if ( function_exists(‘register_sidebar’) )
register_sidebars(3,array(
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ”,
‘after_title’ => ”,
));
?>
[/php]

In the code above, you can edit the following lines: ’before_widget’, ‘after_widget’, ‘before_title’ and ‘after_title’ to fit your preference or theme’s design.

Example, if I want to make the widget to behave like a list, I would edit it like this:

[php]
‘before_widget’ => ‘<li>’,
‘after_widget’ => ‘</li>’,
[/php]

Then if I want the widget title to use a specific heading parameter like say <h3>, I do this:

[php]
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’,
[/php]

If I want to make it italic, I replace <h3></h3> tags with <i></i> tags or if I want it to be bold, I replace it with <strong></strong> tags.

When you’re done with it, save and upload the functions.php file via FTP into your theme’s folder. (e.g. http://domain.com/wp-content/themes/wptheme/)

Now that you’ve created the functions.php file, what you need now is the code that calls or displays the widget. Most users prefer to use widgets on the sidebar but this code can be placed in the bottom bar or footer or anywhere you want to have widgets (depending on the design of the WordPress theme).

Open the sidebar.php file (or any file that holds the area where you want to have widgets) and copy/paste the following code where you want the widget to be displayed.

Widget code
[php]
<?php
if (function_exists(’dynamic_sidebar’) && dynamic_sidebar(1) ) : else : ?>

< ?php endif; ?>
[/php]

What this code basically does is that it checks if your theme supports widgets and looks for the dynamic sidebar function to see if it exists (code that we placed in the functions.php file earlier). When it finds the dynamic sidebar function, it executes everything between the if statement and the <?php endif; ?> statement. It means you can add anything or other stuff that aren’t widgets like an ad banner or script before or after the widget code. You can also add stuff in between the widget code if you want it to display something else in case the function doesn’t exist.

Btw, if you want multiple sections to be widgetized, just copy/paste the widget code and replace (1) with the corresponding number, (2) if its the second or (3) if its the third one.

That’s it. Wasn’t that easy? Now you don’t have to worry about finding a theme that doesn’t have widget support because you can do it yourself and make any WordPress theme widgetized or widget-ready.

Hope you found this simple tutorial helpful and useful. If you liked this post, please don’t forget to subscribe to my RSS feed or share this post with others using the social bookmarking buttons below. Thanks!