Monday 12 March 2012

Creating Widgets for WordPress 2.8 and above


In this example we are going to create a widget called "Sample_Widget" and tell PHP that it is going to extend (inherit from) the WP_Widget class. It is the WP_Widget class which makes your widget function, have settings and allow multiple instances so you don't have to.
You will need to rename every occurrence of "Sample_Widget" with the name of your widget.
The first method, Sample_Widget() in the example, is the class constructor which contains the code that is run every time the widget is loaded – either when activated, used on a page, updated and so on.
The second method, form(), contains the settings page on the WordPress widgets administration screen (Appearance -> Widgets). This method is always called form and never changes. Within this function you add all the controls that will appear when the widget options are expanded. See below for an example.
The third method, update(), is called when the user click on "save" from the settings page on the widgets administration screen. This automatically handles saving to the database of options. You can use this function to validate information prior to being saved. See the example below for basic operation.
Finally the widget() function contains the code that will be rendered to the sidebar when the widget is added. This is what your visitors will see when viewing your page.


Let's have a look at a very simple example "Hello World" widget.

Create SampleWidget.php inside /Wp_content/Plugins  folder


<?php
/*
Plugin Name: Sample WordPress Widget
Plugin URI: http://azuliadesings.com/
Version: 1.0
Description: How to create a WordPress Widget
Author: Tim Trott
Author URI: http://azuliadesings.com/
*/

class Sample_Widget extends WP_Widget
{
  function Sample_Widget()
  {
    /* * The first method, Sample_Widget() in the example, is the class constructor which contains the code that is run every time the widget is loaded – either when activated, used on a page, updated and so on.*/
    $widget_ops = array('classname' => 'Sample_Widget', 'description' => 'My Sample Widget Description');
    $this->WP_Widget('Sample_Widget', 'My Sample Widget', $widget_ops);
  }

  function form($instance)
  {
/* *The second method, form(), contains the settings page on the WordPress widgets administration screen (Appearance -> Widgets). This method is always called form and never changes. Within this function you add all the controls that will appear when the widget options are expanded. */
    $instance = wp_parse_args((array) $instance, array( 'title' => '' ));
    $title = $instance['title'];
?>
  <p><label for="<?php echo $this->get_field_id('title'); ?>">Title: <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo attribute_escape($title); ?>" /></label></p>
<?php
  } 
  function update($new_instance, $old_instance)
  {
/* The third method, update(), is called when the user click on "save" from the settings page on the widgets administration screen. This automatically handles saving to the database of options. You can use this function to validate information prior to being saved. See the example below for basic operation.
*/
    $instance = $old_instance;
    $instance['title'] = $new_instance['title'];
    return $instance;
  } 
  function widget($args, $instance)
  {
/*the widget() function contains the code that will be rendered to the sidebar when the widget is added. This is what your visitors will see when viewing your page.
*/
    extract($args, EXTR_SKIP); 
    echo $before_widget;
    $title = empty($instance['title']) ? '' : apply_filters('widget_title', $instance['title']); 
    if (!empty($title))
      echo $before_title . $title . $after_title;; 
    // ** Do Your Widgety Stuff Here...
    echo "<h1>Hello World</h1>"; 
    echo $after_widget;
  }
}
add_action( 'widgets_init', create_function('', 'return register_widget("Sample_Widget");') ); 
?>


No comments:

Post a Comment