Words I Write

Last week I said I needed to make a fairly simple widget for a client site built on WordPress. The purpose of the widget is to basically to replicate the functionality of the “Text” widget that comes standard with WordPress, then add a couple of extra little bits of functionality to it. Granted, this could all be done using the Text widget, I want my clients to be able to add/remove/change the widget without needing any ability to code.

Getting Started
Anytime I’m doing something a little over my head I try to find an example that closely replicates what I am trying to achieve and play around with it to try and get an understanding of what’s going on under the hood. Fortunately WordPress has the codex, and in their widgets codex they have a nice little sample widget. The code of which is this:

/**
/**
 * FooWidget Class
 */
class FooWidget extends WP_Widget {
    /** constructor */
    function FooWidget() {
        parent::WP_Widget(false, $name = 'FooWidget');
    }

    /** @see WP_Widget::widget */
    function widget($args, $instance) {
        extract( $args );
        $title = apply_filters('widget_title', $instance['title']);
        ?>
              <?php echo $before_widget; ?>
                  <?php if ( $title )
                        echo $before_title . $title . $after_title; ?>
                  Hello, World!
              <?php echo $after_widget; ?>
        <?php
    }

    /** @see WP_Widget::update */
    function update($new_instance, $old_instance) {
	$instance = $old_instance;
	$instance['title'] = strip_tags($new_instance['title']);
        return $instance;
    }

    /** @see WP_Widget::form */
    function form($instance) {
        $title = esc_attr($instance['title']);
        ?>
         <p>
          <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
          <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
        </p>
        <?php
    }

} // class FooWidget

The code above should be added to the end of functions.php within your theme’s directory, I think… It seems to work, then add this snippet after to register your widget:

// register FooWidget widget
add_action('widgets_init', create_function('', 'return register_widget("FooWidget");'));

And after doing all this, when you go to your widgets panel from the admin section you should see the FooWidget available and when you add it to an active sidebar you’ll see an options panel that looks a little like this;

Note that I am using the Widget Logic plugin to limit the display of widgets on pages using the WordPress Conditional Tags. So you won’t see the form field for “Widget Logic” without the plugin installed.

Anyway, everything seems to be in order. Let’s see about changing the widget’s name. This is done by simply changing the class, which is by the way all an extension of the built in WP_Widget class, which is located in wp-includes/widget.php. That was easy enough.. make sure you change all instances of the function() calls as well as the variable definitions.

The title field seems to work just as I wanted in my widget, so I’ll leave that be. I do need to add a textarea field for a small amount of copy text to be displayed in the widget under the title. Let’s see about that. My guess is I can do that by extending the WP_Widget’s form, so let’s add this and see what we get:

 <p>
         <label for="PW_copy"><?php echo 'Body Text'; ?></lablel>
         <input class="widefat" rows="16" cols="20" id="PW_copy" name="PW_copy" type="textarea" value="" />
        </p>

I’m missing a ton of php here that will dynamically add the id and name attributes, and I haven’t defined a new instance of the widget to save the text copy. This is kind of annoying.

I guess that’s enough for one post. This is where I’ll leave it for now:

I’ll be back tomorrow with hopefully some leaps and bounds of progress.