How To Make Your Theme Widget Ready

March 11, 2009, Category: Wordpress Themes

widgetsOne of the most useful parts of the Wordpress platform is the ability to make use of “widgets”. Widgets are little accessories that will automatically display information in “widgetized” areas of your theme. Some themes come with many widgetized areas, while other themes leave them out all together. Themes that work with widgets allow for greater ease-of-use and help with plugins you install. Many plugins are built to be used as widgets and if you don’t have a widgetized theme they can be useless without editing files and adding php to them.

If you’ve got a theme that isn’t making use of widgets, it isn’t a hard task to make the theme widget-ready. All it requires is a bit of code to be inserted into the areas you want to widgetize, and creating/editing a functions.php file of your theme.

First Step is to find where you want to add widgets. The most popular area is the sidebar of a blog or site. If that is the case, you’d open your sidebar.php file of your theme, and insert this code after your main sidebar div:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Sample Sidebar") ) : ?>

*Make note of the ‘Sample Sidebar’, that is what you’re going to need to carry over. You can put whatever you’d like in this area, but it’s best to be descriptive so that you can see what area this is corresponding to later on if you decide to edit it again.

Next, place this piece of code just before the end of the sidebar div:

<?php endif; ?>

What you just did was instruct Wordpress to look and see if you’ve enabled any widgets in your themes options and to display them if you did. If not, whatever is between the 2 lines of code we entered is displayed in the sidebar.

Now we need to open your functions.php file of your theme (if you do not have a functions.php file, you can just make a new one). In this file enter the following code:

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Sidebar Sample',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
?>

Please note that where it says ‘Sample Sidebar’, you need to match this up to what you entered above in Step 1. The values of before_title and after_title do just what they look like they’d do, they put what is in the hash marks after the title of the widget. Same goes for before_widget and after_widget.

If you’d like to have multiple sidebar widget areas (or even in other places) just make sure to add another if ( function … statment like the one we defined and be sure to give it a different name.

And that’s it. It wasn’t that hard at all. You can now go to your Admin Panel, find the “Appearance > Widgets” section and start adding widgets at your leisure.

User Comments

Post Comment