Easy as 1-2-3: Widgetize WordPress Themes

• By Mario Ocon
• December 21st, 2009
• Themes
• 46 Comments

Easy as 1-2-3 is a new series here on Design Informer. The series will cover all kinds of tutorials, from Photoshop to WordPress. It will be really short and helpful tutorials that are easy to follow.

Part of what makes WordPress such a user-friendly platform is the endless supply of free widgets. With widgets, you can easily accessorize your blg without any knowledge of coding. (The majority of themes, however, keep this easy-to-use functionality exclusive to sidebars.) I recently widgetized my homepage in three easy steps, and I would like to share the process with you.

Step 1

The first thing you need to do is edit your functions.php file. I recommend you make a backup of the file on your local hard drive (just in case you break something.) Once you make a backup, it’s safe to add the following code to your functions.php:

if ( function_exists('register_sidebar') )

register_sidebar(array(

'name' => 'Homepage Widget 1',

'before_widget' => '<div class="widget">',

'after_widget' => '</div>',

'before_title' => '<h2 class="widgettitle">',

'after_title' => '</h2>',

));

You have to give every widget a unique name. It’s a good idea to name a widget by where it is going to live. This widget houses the main image on my home page so I named it "Homepage Widget 1."

Also note that the ‘before_title’ and ‘after_title’ are set to h2 tags. Some themes are set to h3. Remember to make this adjustment if applicable.

Step 2

Open your home.php (or any file you wish to widgetize; the process is the same regardless) and add the following code:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Homepage Widget 1') ) : ?>

<p>This area is widget ready.</p>

<?php endif; ?>

Note the first line of code gets the same widget name. (i.e ‘Homepage Widget 1′) The placement and stylistic attributes are all controlled by adding additional code to your theme’s style.css file.

Step 3

Go back to the widget area in your WordPress control panel and start rocking out. You are done!

What do you think of the new series, Easy as 1-2-3? Did you find this tutorial helpful?

We would love to hear your thoughts. Learning how to add widgets to WordPress themes is an important and valuable skill. Are there any other widgetizing techniques that you know? Please leave your comments below. We would really appreciate it. You can follow the Design Informer on Twitter here.