Justin Tadlock

Widgetize This!

Taking full advantage of WordPress 2.5's widget interface

I’m about to go all WordPress Geek 2.5 on y’all now. So, if you don’t want to look at PHP code or have no clue what a widget is, then you might want to take a break from this post.

WordPress theme developers. Pay attention.

Ian Stewart just created the “we need to kill the sidebar bandwagon,” and it’s about time you all hopped on.

The basic idea is that with all the things we can do with widgets, it makes no sense to call these widgetized sections sidebars at all. Why would we call a footer or a header widget area “Footer Sidebar” or “Header Sidebar”? You can even vote on this idea.

Since a few of you requested it, I’ll give you a tutorial on how to take full advantage of WordPress 2.5’s new widget interface.

The setup

This is totally new code straight from the development versions of my old and new themes.

The first thing you need to decide is what you want to widgetize. For the sake of this tutorial and the No Sidebar Bandwagon, let’s pretend our theme has no sidebars at all. I’ll try to avoid using the term “sidebar” as much as possible.

I’m going to keep this real simple. Here’s what our page layout will look like:

  • Header
  • Content Area
  • Footer

Each of these sections is widgetized. Take a look at what the setup of the basic page and widget panel will look like (click images for larger view):

Adding widgets to the widget panel

Now, we need to put together a bunch of widgetized areas for our widget panel in the WordPress dashboard. Typically, we’ll put these in the functions.php file of the theme we’re using.

I’ve found the best way to do this, which is a lot less coding, is to create an array of all the sidebars we want to use. Plus, it’s much cooler.

Note: This tutorial uses text strings that are ready for localization.

<?php
/*****************************************************
Pimp out this page with an endless amount of widget sections.
*****************************************************/
if(function_exists('register_sidebar')) {

// Create widget names and put them in array
    $my_widget_name = array(
        __('Header'),
        __('Content'),
        __('Footer'),
    );

// Define how we want our widgets to display
// Replace ridiculous list items with custom style
    foreach($my_widget_name as $my_widget) :
        register_sidebar(array(
            'name' => $my_widget,
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget' => '</div>',
            'before_title' => '<h3 class="widget-title">',
            'after_title' => '</h3>', ));
    endforeach;
} ?>

If that seemed a bit complicated, let me break the process down a bit. We’re first creating an array of all our widgetized sections. The reason we’re doing this is because we don’t want to have to write the second part of the code over and over and over. So, for the second part, we just loop through each widget section and register it.

Displaying your widgets on your blog

I’ll show you how to display this for your header section. It will be basically same for each of our sections.

<div id="header-widget-area">
    <?php dynamic_sidebar(__('Header')); ?>
</div>

Widgetize your site!

Now, you have the basic tools to widgtize your site in any way you want. You could create widgets for any section of any page you’d like. You could build a three-column all widget theme if you wanted. The only limit here is your preconceptions of what widgets are and what they can do.

WordPress’ built-in conditional tags are your friends. Use them.

If you’re using my Options theme, then I have a special tutorial for making many sidebars.

I encourage you all to start thinking about what more we can do with this.