Customize Your WordPress Blog with PHP Plugins and Widgets Page 2

Building the WordPress Widget

The BoobTube plugin needs a widget to show the YouTube video on your blog. Most widgets have two components:

• An admin component to configure the widget via the “Appearance -> Widget” section of the WordPress blog manager
• The UI component to show the widget to a blog reader

To build a WordPress widget, you simply extend the built-in WP_Widget class, set up a constructor, and override three methods: widget, form and update. In this example, the widget code is stored in a widget.php file located in the wp-content/plugins/boobtube directory and included in the boobtube.php main plugin file.

Here’s all of the widget code.

<?php
class BoobTube_Widget extends WP_Widget {
function BoobTube_Widget() {
$widget_ops = array('classname' => 'boobtube', 'description' => 'My Video');
$control_ops = array('width' => '300', 'height' => '350', 'id_base' => 'boobtube-widget');
$this->WP_Widget('boobtube-widget', 'Boob Tube', $widget_ops, $control_ops);
}

function widget($args, $instance) {
extract($args);
$title = apply_filters('widget_title', $instance['title'] );
// Controlled by theme.
echo $before_widget;
if ($title) {
echo $before_title . $title . $after_title;
}
$bt =& $GLOBALS['boobtube'];
$bt->watch();
// Controlled by theme.
echo $after_widget;
}

function update($new_instance, $old_instance) {
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
return $instance;
}

function form($instance) {
$defaults = array( 'title' => 'My Video');
$instance = wp_parse_args((array) $instance, $defaults);
$title = htmlspecialchars($instance['title']);
echo "<p>n<label for="" . $this->get_field_name('title') . "">Title:</label>n";
echo "n<input type="text" id="" . $this->get_field_id('title') . "" name="" . $this->get_field_name('title') . "" value="" . $title . "" style="width:100%" />n</p>n";
}
}
?>

The constructor sets up the default values and calls the parent WP_Widget constructor.

class BoobTube_Widget extends WP_Widget {
function BoobTube_Widget() {
$widget_ops = array('classname' => 'boobtube', 'description' => 'My Video');
$control_ops = array('width' => '300', 'height' => '350', 'id_base' => 'boobtube-widget');
$this->WP_Widget('boobtube-widget', 'Boob Tube', $widget_ops, $control_ops);
}

The widget method displays the widget on your blog. You must use the $before_widget, $after_widget, $before_title and $after_title variables because these are controlled by the theme.

   function widget($args, $instance) {
       extract($args);
       $title = apply_filters('widget_title', $instance['title'] );
       // Controlled by theme.
       echo $before_widget;
       if ($title) {
      echo $before_title . $title . $after_title;
       }
       $bt =& $GLOBALS['boobtube'];
       $bt->watch();
       // Controlled by theme.
       echo $after_widget;
   }

The form method is where you configure the HTML BoobTube widget. The widget form posts to the update method described next. Your plugin can be used in multiple widgets, each with customizable features. For BoobTube, you’re updating only the widget title.

function form($instance) {
$defaults = array( 'title' => 'My Video');
$instance = wp_parse_args((array) $instance, $defaults);
$title = htmlspecialchars($instance['title']);
echo "<p>n<label for="" . $this->get_field_name('title') . "">Title:</label>n";
echo "n<input type="text" id="" . $this->get_field_id('title') . "" name="" . $this->get_field_name('title') . "" value="" . $title . "" style="width:100%" />n</p>n";
}

The update method takes the form method data and updates BoobTube’s widget title.

    function update($new_instance, $old_instance) {
       $instance = $old_instance;
       $instance['title'] = strip_tags($new_instance['title']);
       return $instance;
   }

That’s it. As you can see, customizing WordPress is quite easy. Download the source code for BoobTubeand hack away at it. Then build your own plugin or customize an existing WordPress plugin if it doesn’t do everything you want it to do.

Code Download

About the Author

Keith Vance is a software engineer and a journalist. He’s been developing web applications professionally since 1997, and he received his journalism degree from the University of Washington in 2008. to e-mail him.