My Corner

From my last post you know I’m trying to figure out the best configuration of my domain and subdomains.  I’m leaning toward the blog as my principal domain content with the photography blog as a linked subdomain.

To sleep well at night with this change, I need a good way to interface my photography with the blog.  After testing a few options, I decided to try developing a WordPress Widget to display the most recent photo.  It was surprisingly easy!  I thought I might document a bit about the design of a WordPress widget.  I know my audience (consisting mostly of family) has really been hoping for a technical article with some code to sink their teeth into.  Right?

To really understand widgets, you should play around with them first in your own admin section, under Appearance->Widgets.  You can drag and drop from available widgets to the sidebar or footer to define the contents of those areas of your blog. You’ll notice when you drag a widget, a form appears with some fields to define.

On to creating a widget.  First, make a directory to hold all the plugin files in the wp-content/plugins directory.  Mine, for example, is wp-content/plugins/skphoto/.

Second, you need to define a class that extends WP_Widget, and includes a constructor function, widget function, update function, and form function.  This same file should also register the widget.  Here’s an outline of what that looks like:

class WidgetName extends WP_Widget
{
  /* constructor */
  function WidgetName() {}

  /* display the widget */
  function widget($args, $instance) {}

  /* save widget settings */
  function update($new_instance, $old_instance) {}

  /* edit form for the widget */
  function form($instance) {}
}

function WidgetNameInit()
{
  register_widget('WidgetName');
}
add_action('widgets_init', 'WidgetNameInit');

See Jesse Altman’s tutorial post for details on these functions.

I do want to give a bit more information about the widget function. If you want to access your MySQL database from within the widget function, you’ll need to add global $wpdb; to the top of your function.  Then, you can use standard WordPress database functions to pull data out.

Here’s the basics of my widget function for reference:

  function widget($args, $instance){
    global $wpdb;
    extract($args);
    $title = apply_filters('widget_title', empty($instance['title']) ? ' ' : $instance['title']);
    $feed_url = empty($instance['feed_url']) ? 'http://photography.spencerkellis.net/atom.php' : $instance['feed_url'];

    # Before the widget
    echo $before_widget;

    # The title
    if ( $title )
    echo $before_title . $title . $after_title;

    $sql = "SELECT `path` FROM `photos` ORDER BY `date` DESC LIMIT 1";
    $path = $wpdb->get_var($sql);
    echo "";

    # After the widget
    echo $after_widget;
  }

Finally, activate your new plugin in the WordPress Plugins section. Then go back to the Widgets where the new widget will be available to drag and drop.

So there it is.  Easy-peezy, right?  Just a few lines of code, as I always like to say.  Here are a few resources if you want to explore on your own:

• Jesse Altman – Widget Tutorial
• WP Engineer – Build a Widget
• WordPress Docs – Writing a Plugin
• WordPress Docs – Function Reference / wpdb Class
• WordPress Docs – Developer Documentation

So I’ll be looking for your thoughts.  What do you think about this solution for a home page?