It’s pretty simple to create a WordPress widget. All you need to know is which functions you need to create so that WordPress can interpret it as a plug-in.

I am going to create a simple plug-in that only shows some text and a title. Basic php knowledge is required to create a WordPress widget.
Make sure you have a working WordPress 3.x for testing your plugin.

Step 1: Create the plugin file

Create a file called SomeText.php and upload it to /wp-content/plugins/ with the following content.

/*
Plugin Name: Some Text
Plugin URI: http://yourdomain.com/plugin/
Description: Description of my plugin.
Author: Your Name
Version: 1.0
Author URI: http://yourdomain.com/
*/

We will now see our plug-in in the plugins section at /wp-admin/

Let’s activate the plug-in for further use.

Step 2: Basic functions

We have a “working” plug-in now. We are now going to create the class and basic functions needed for the widget.

class SomeText_Widget extends WP_Widget
{
	/**
	 * Output to show in widget
	 * @param array $arrArgs
	 * @param array $arrInstance
	 */
	public function widget($arrArgs, $arrInstance)
	{
	}

	/**
	 * Widget settings form
	 * @param array $arrInstance
	 */
	public function form($arrInstance)
	{
	}

	/**
	 * Update posted parameters from $this->form()
	 * @param array $arrNewInstance
	 * @param array $arrOldInstance
	 */
	public function update($arrNewInstance, $arrOldInstance)
	{
	}
}

We’ve created a class with 3 functions. This class extends the standard widget class located at /wp-includes/widgets.php

There are 3 basic functions in this widget. We need these to make sure that the widget works properly:

• widget() – the actual widget content on a blog in a widgetized section.
• form() – the form for all the settings in the appearance -> widgets.
• update() – updates submitted data from the form() function.

Step 3: Register widget

Although the class and all the necessary functions are created we are unable to see the widget in the widget section of /wp-admin/. That’s because we need to register our widget. For this we need to do 2 things:

Create a function within our class:

/**
 * Main construct
 */
public function SomeText_Widget()
{
	parent::WP_Widget(false, $name = 'SomeText');
}

Register widget (outside the class):

// Register to widget init
add_action('widgets_init',create_function('', 'return register_widget("SomeText_Widget");'));

We can now see our widget, and place it in a widgetized section.

There is still nothing to see on our blog, that’s because we didn’t give the widget() function any output. We will do this later. First we need to save our data.

Step 4: Save data

To save our data we need to edit the form() and the update() function.

/**
 * Widget settings form
 * @param array $arrInstance
 */
public function form($arrInstance)
{
	// Get data for form if it exists
	$strTitle 	= (!empty($arrInstance['title'])) ? $arrInstance['title'] : 'A title';
	$strText 	= (!empty($arrInstance['text'])) ? $arrInstance['text'] : 'Just some text';

	// Create form
	// Field: title
	echo '<p>';
	echo '<label for="'.$this->get_field_id('title').'">'._e('Title:').'</label>';
	echo '<input class="widefat" id="'.$this->get_field_id('title').'" name="'.$this->get_field_name('title').'" type="text" value="'.$strTitle.'" />';
	echo '</p>';

	// Field: text
	echo '<p>';
	echo '<label for="'.$this->get_field_id('text').'">'._e('Text:').'</label>';
	echo '<input class="widefat" id="'.$this->get_field_id('text').'" name="'.$this->get_field_name('text').'" type="text" value="'.$strText.'" />';
	echo '</p>';

}

/**
 * Update posted parameters from $this->form()
 * @param array $arrNewInstance
 * @param array $arrOldInstance
 */
public function update($arrNewInstance, $arrOldInstance)
{
	// Create a current instance from the old one
	$arrInstance	= $arrOldInstance;

	// Get values posted in $this->form()
	$arrInstance['title']	= strip_tags($arrNewInstance['title']);
	$arrInstance['text']	= strip_tags($arrNewInstance['text']);

	// We only need to return WP_Widget does the rest
	return $arrInstance;
}

Now we can save our settings in the widget settings form:

Step 5: Show data

All we need to do now is show the data in the widget on the blog. So we need to edit the widget() function.

/**
 * Output to show in widget
 * @param array $arrArgs
 * @param array $arrInstance
 */
public function widget($arrArgs, $arrInstance)
{
	// Get data from instance if it exists else set a standard one
	$strTitle 	= (!empty($arrInstance['title'])) ? $arrInstance['title'] : 'A title';
	$strText 	= (!empty($arrInstance['text'])) ? $arrInstance['text'] : 'Just some text';

	// Show the basic widget setup
	echo $arrArgs['before_widget'];
	echo $arrArgs['before_title'] . $strTitle . $arrArgs['after_title'];
	echo '<p>'.$strText.'</p>';
	echo $arrArgs['after_widget'];
}

That’s all.

We now have output on the blog:

This is only a basic tutorial on how to create a WordPress 3 widget. Just be creative when you are creating a widget. I hope this tutorial helped you understand WordPress a little more.

O and for all you lazy people out there, here is the complete widget.

<?php

/*
Plugin Name: Some Text
Plugin URI: http://yourdomain.com/plugin/
Description: Description of my plugin.
Author: Your Name
Version: 1.0
Author URI: http://yourdomain.com/
*/

class SomeText_Widget extends WP_Widget
{
	/**
	 * Output to show in widget
	 * @param array $arrArgs
	 * @param array $arrInstance
	 */
	public function widget($arrArgs, $arrInstance)
	{
		// Get data from instance if it exists else set a standard one
		$strTitle 	= (!empty($arrInstance['title'])) ? $arrInstance['title'] : 'A title';
		$strText 	= (!empty($arrInstance['text'])) ? $arrInstance['text'] : 'Just some text';

		// Show the basic widget setup
		echo $arrArgs['before_widget'];
		echo $arrArgs['before_title'] . $strTitle . $arrArgs['after_title'];
		echo '<p>'.$strText.'</p>';
		echo $arrArgs['after_widget'];
	}

	/**
	 * Widget settings form
	 * @param array $arrInstance
	 */
	public function form($arrInstance)
	{
		// Get data for form if it exists else set a standard one
		$strTitle 		= (!empty($arrInstance['title'])) ? $arrInstance['title'] : 'A title';
		$strText 		= (!empty($arrInstance['text'])) ? $arrInstance['text'] : 'Just some text';

		// Create form
		// Field: title
		echo '<p>';
		echo '<label for="'.$this->get_field_id('title').'">'._e('Title:').'</label>';
		echo '<input class="widefat" id="'.$this->get_field_id('title').'" name="'.$this->get_field_name('title').'" type="text" value="'.$strTitle.'" />';
		echo '</p>';

		// Field: text
		echo '<p>';
		echo '<label for="'.$this->get_field_id('text').'">'._e('Text:').'</label>';
		echo '<input class="widefat" id="'.$this->get_field_id('text').'" name="'.$this->get_field_name('text').'" type="text" value="'.$strText.'" />';
		echo '</p>';

	}

	/**
	 * Update posted parameters from $this->form()
	 * @param array $arrNewInstance
	 * @param array $arrOldInstance
	 */
	public function update($arrNewInstance, $arrOldInstance)
	{
		// Create a current instance from the old one
		$arrInstance	= $arrOldInstance;

		// Get values posted in $this->form()
		$arrInstance['title']	= strip_tags($arrNewInstance['title']);
		$arrInstance['text']	= strip_tags($arrNewInstance['text']);

		// We only need to return WP_Widget does the rest
		return $arrInstance;
	}

	/**
	 * Main construct
	 */
	public function SomeText_Widget()
	{
	    parent::WP_Widget(false, $name = 'SomeText');
	}
}

// Register to widget init
add_action('widgets_init',create_function('', 'return register_widget("SomeText_Widget");'));

?>