How to create a WordPress Widget – Part 3 of 3
Phew! We made it!
So, all we need to do is add one final little bit. Really little bit…
function widgetTutorial_init() { // These are the Wordpress functions which will register // the widget, and also the widget control - or // 'options', to you and me. register_sidebar_widget('Widget Tutorial', 'widget_widgetTutorial'); register_widget_control('Widget Tutorial', 'widgetTutorial_control'); } add_action("plugins_loaded", "widgetTutorial_init");
That’s it. Disappointed? I hope not, because these few lines make the whole thing work. Let’s take a look at them in turn…
Initialise the widget
Here we have a simple funtion that we’ll call on the last line of the code. It really contains only two lines of php:
register_sidebar_widget('Widget Tutorial', 'widget_widgetTutorial'); register_widget_control('Widget Tutorial', 'widgetTutorial_control');
Again, we using calls to built-in WordPress functions here. The first, register_sidebar_widget(‘Widget Tutorial’, ‘widget_widgetTutorial’);, registers the widget for use on the site itself. It calls the widget ‘Widget Tutorial’ and we point it to the function we have written called ‘widget_widgetTutorial’. No more to it than that.
The second, register_widget_control(‘Widget Tutorial’, ‘widgetTutorial_control’);, is the WordPress function for the Dashboard, and tells the Widgets page where to look for our options. Again, we name the widget ‘Widget Tutorial’, and this time point towards our options function ‘widgetTutorial_control’.
You can change the name to whatever you want, and make sure it points to the right function (whatever you have called it).
And finally, after that final function, we register the widget with:
add_action("plugins_loaded", "widgetTutorial_init");
Again, pretty simple WordPress stuff here. We add an action so that when all the plugins are loaded we run the WidgetTutorial_init function – which we’ve just written.
And that, ladies and gentlemen, is that.
Next, we get more complicated and put together a Widget which displays, amongst other things, Flickr photos. But you’ll have to wait for that as this site needs a bit of an overhaul.
As ever, if you have any questions please drop me a line. You can also download the complete code and play with it.
Ranger, out.
The Complete Code
<?php /* Plugin Name: A Smiple Wordpress Widget Tutorial Plugin URI: <a href="http://www.richardshepherd.com">http://www.richardshepherd.com</a> Description: Simple Widget Tutorial from richardshepherd.com Author: Richard Shepherd Version: v1.0 Author URI: <a href="http://www.richardshepherd.com">http://www.richardshepherd.com</a> */ function widget_widgetTutorial($args) { // First we grab the Wordpress theme args, which we // use to display the widget extract($args); // Now we sniff around to see if there are // any preset options $options = get_option("widget_widgetTutorial"); // If no options have been set, we need to set them if (!is_array( $options )) { $options = array( 'title' => 'Widget Title', 'text' => 'Widget Text' ); } // Display the widget! echo $before_widget; echo $before_title; echo $options['title']; echo $after_title; //Our Widget Content echo $options['text']; echo $after_widget; } function widgetTutorial_control() { // We need to grab any preset options $options = get_option("widget_widgetTutorial"); // No options? No problem! We set them here. if (!is_array( $options )) { $options = array( 'title' => 'Widget Title', 'text' => 'Widget Text' ); } // Is the user has set the options and clicked save, // Then we grab them using the $_POST function. if ($_POST['widgetTutorial-Submit']) { $options['title'] = htmlspecialchars($_POST['widgetTutorial-WidgetTitle']); $options['text'] = htmlspecialchars($_POST['widgetTutorial-WidgetText']); // And we also update the options in the Wordpress Database update_option("widget_widgetTutorial", $options); } ?> <label for="widgetTutorial-WidgetTitle">Widget Title:</label> <input type="text" id="widgetTutorial-WidgetTitle" name="widgetTutorial-WidgetTitle" value="<?php echo $options['title']?>" /> <label for="widgetTutorial-WidgetText">Widget Text:</label> <textarea id="widgetTutorial-WidgetText" cols="20" rows="2" name="widgetTutorial-WidgetText" cols="30" rows="4"><?php echo $options['text'];?> </textarea> <input type="hidden" id="widgetTutorial-Submit" name="widgetTutorial-Submit" value="1" /> <?php } function widgetTutorial_init() { // These are the Wordpress functions which will register // the widget, and also the widget control - or // 'options', to you and me. register_sidebar_widget('Widget Tutorial', 'widget_widgetTutorial'); register_widget_control('Widget Tutorial', 'widgetTutorial_control'); } add_action("plugins_loaded", "widgetTutorial_init"); ?>






Awesome tutorial. I’ve been looking all over net for one I can understand. I find WordPress’s own documentation hard to follow.
Grate job! You’ve helped me get off the starting blocks. :)
very good article! thanks!