How To Widgetize Your Wordpress Theme

Posted in Tutorials | On 8th January 2010 | 7 Comments

When designing your own Wordpress theme to utilise widgets your sidebar must be widgetized in order for the widgets to appear.

What I’m going to show you today is a very quick and easy way to widgetize your sidebar and start making full use of widgets.

Before making any change to your template, please backup your files first!! If editing each file in your WP Admin please save after each file you edit otherwise the changes will not take effect.
First thing we need to do is open functions.php, we need to add the following code into this file, I usually add it on line 2 just below the <? on line 1.

if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'sidebar 1',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>',
));

We have named the sidebar “sidebar 1″ in this example as you can see from the code above (‘name’ =>)
Below the name is the tags that will appear before and after a widget and title, you can define these classes in your themes stylesheet (.widget {} & .widgettitle {})

You can also have multiple widgetized sidebars, so for example to have two sidebars just place two sets of the code above and change the name of the second piece of code to sidebar 2 eg:

if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'sidebar 1',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>',
));
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'sidebar 2',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>',
));

We then need to edit sidebar.php and place the following code somewhere with the sidebar, many themes have a div named “sidebar” (<div id=”sidebar”>) so anywhere after that and before the final </div> will work fine.

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar 1') ) : ?>
<?php endif; ?>

If you opted to have 2 widgetized sidebars just use two versions of the above code eg:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar 1') ) : ?>
<?php endif; ?>

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar 2') ) : ?>
<?php endif; ?>

Of late a number of sidebar widgets and plugins load scripts such as Mootools and jQuery, so to make the widgets fully functional we must allow the widgets to call these scripts.

If we open header.php and check to see if the following code exists, if not please place it between the <head></head> tags

<?php wp_head(); ?>

Finally we open footer.php and again check to see if the following code exists, if not please place somewhere after the <div id=”footer”> div (if the footer div exists on your theme.)

<?php wp_footer(); ?>

This tutorial is pretty straight forward and should have your theme widget ready in a couple of minutes.

You should now be able to add widgets from your widget section of your WP Admin and they should appear on your Wordpress install.

McBonio

McBonio is a full time web designer, blogger and general web lurker. He runs Tropica Web Design, which is a web agency based in Liverpool, UK. You can also catch McBonio at Twitter: @mcbonio

Visit McBonio's website

Related Posts

Like this post? Share it!

7 Comments

  • Jonas
    January 8, 2010

    Very good tutorial:) Can I translate it into French for my blog ?

  • Michael Pehl
    January 8, 2010

    Nice tipps and very useful for me. I am pretty new to WordPress so that is for sure of any use for me :)

Trackbacks