Wordpress have a nifty thing called widgets which you can drag and drop into your template sidebar using the widget control panel. Widgets are much like plugins, however arguably easier to create. In this tutorial I’ll describe the bare bones structure of a widget, and supply you with the tools you need to get your widget on the go! The outcome will be a widget that will save one chunk of data to the database, and retrieve it and display to the end user.

The Basics

Wordpress widgets have two views:

1. The end user view (the bit you see in your sidebar)
2. The widget settings view (the bit you see in the widget control panel)

Everything else WordPress pretty much takes care of for you (thanks WP). You don’t need to worry about any drag and drop code, anything like that! To generate these two views to the user we have to create two functions, 1 for each view.  So let’s do that:

function widget_endView($args)
{
$wgt_title=get_option('wgt_title');
extract($args);
echo $before_widget.$before_title.$wgt_title.
$after_title;
echo "Hello World!";
echo $after_widget;
}

function widget_controlView()
{
if ($_POST['wgt_title']) {
$option=$_POST['wgt_title'];
update_option('wgt_title',$option);
}
$wgt_title=get_option('wgt_title');
echo '<label for="wgt_title">Widget Title : <input id="wgt_title" name="wgt_title" type="text" value="'.$wgt_title.'" /></label>';
}

Let me explain this briefy… widget_controlView() will display a text box for you to enter a “title” value and save it via update_option(). the widget_endView() function will get that saved value from the database via get_option() and display it in the widget.

OK, so that’s pretty much it – the crux of our widget is there.

Now to finish off 

We now need to wrap this code up into a PHP class, and create a new instance when our plugin is initiated:

class widgetClass {

function widgetClass() {
add_action('widgets_init', array($this, 'init_myWidget'));
}

function init_myWidget() {
if ( !function_exists('register_sidebar_widget') ||
!function_exists('register_widget_control') )
return;

register_sidebar_widget(array('My New Widget','widgets'),array($this, 'widget_endView'));
register_widget_control(array('My New Widget', 'widgets'), array($this, 'widget_controlView'));

}
}
$newWidget = new widgetClass ();

Place your 2 other functions within the widgetClass with the other functions, and we’re done. Just a note, register_sidebar_widget() tells WordPress to call your widget_endView() function to display results in the sidebar, and register_widget_control() tells WordPress to call your widget_controlView() function to display the control panel.

Download the full code here. If you need any further help, feel free to add a comment below, or contact me via the email address supplied with the plugin.

 

Further Reading…

WordPress For Dummies	WordPress Complete	WordPress Plugin Development

This entry was posted on Sunday, January 25th, 2009 and is filed under Development, WordPress Plugins. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.