How to Create a WordPress Widget Properly Using the New WP Widget Class

0

In this post, I will explain how to create a Widget for WordPress properly using the new WP Widget class.

While there is an abundance of widgets available for your WordPress blog, finding one that does exactly what you need can often be difficult. I will start assuming that you have knowledge on PHP, HTML and some WordPress functions although I’ll try to explain the necessary WordPress functions.

1. Naming Your WordPress Widget

Creating your own custom widget is also a great way to customize your website and set it apart from the multitude of websites out there. First of all, you need to choose a name for your Widget. It is better to choose a relative name with the functionality of the Widget.

2. Creating the WordPress Widget Directory

You will need a place to put your widget files. “wp-content/plugins/” is the place where you have to put your plugin files. It’s a good practice to create a directory inside the plugins directory and put your files there instead of placing it directly into the “wp-content/plugins/” directory, even if your plugin contains only one file. Create a directory inside the “wp-content/plugins/” and name it as your widget name.

3. Creating a Widget File

Next, create a “PHP” file inside the directory you created in step 2 and name it your-widget-name.php. Open this file with your favourite text editor (example, notepad++) then put the following lines of code in it.

<?php
/*
* Plugin Name: Name Of Your Plugin
* Plugin URI: http://URL_OF_THE_PLUGIN_TO_YOUR_SITE
* Description: A brief description of the Plugin.
* Author: Name Of The Plugin Author
* Author URI: http://AUTHOR_SITE_URL/
* Version: 1.0
*/
?>

The code above describes the plugin’s information.

4. Creating a WordPress Widget Using the WP Widget Class

Now for the widget creation, we will create a class which extends the WP_Widget class defined in WordPress.

class Your_Widget_Name extends WP_Widget {

public function Your_Widget_Name() {
// this construct will call automatically and
// default functionality of the widget processes
// executes
}

public function form( $instance ) {
// this function will show the options form on admin
// panel
}

public function update( $new_instance, $old_instance ) {
// in this function widget options are updated.
}

public function widget( $args, $instance ) {
// you have write code here to show the widget to
// the site.
}

}
// you have to register your widget using following line of code
add_action( 'widgets_init', create_function('', 'return register_widget("Your_Widget_Name ");') );
For widget setup we have to edit Your_Widget_Name function.
public function Your_Widget_Name() {
/* Widget settings. */
$options = array( 'classname' => 'widget_class', 'description' => 'description of the widget.' );

// Create the widget.
$this->WP_Widget( 'your-widget-name', Your Widget Title', $options);

}

For the admin panel options, you have to edit the form function inside your widget class. It allows you to have two options for the admin section

  1. Title
  2. Option 1

The following is an example snippet:

public function form( $instance ) {
$instance = wp_parse_args( (array) $instance, array( 'title' => '' ) );// if there is no value set in $instanse default value of the title will be ''.
$title = $instance['title'];
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>">Title:</label>
<input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" />
</p>
<p>
<label>Option 1</label>
<input name="widget_name_option1" type="text" value="<?php echo $data['option1']; ?>" />
</p>
<?php
}

To update the admin options you need to edit the update function:

public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = strip_tags( $new_instance['title'] );
$instance['option1'] = strip_tags( $new_instance['option1'] );

return $instance;
}

Now to display the widget on your site, you have to edit the widget function.

public function widget( $args, $instance ) {
echo $args['before_widget'];
$title = empty($instance['title']) ? ' ' : apply_filters('widget_title', $instance['title']);
$option1 = $instance['option1'];
if (!empty($title))
echo $args['before_title'] . $title . $args['after_title'];
if (!empty($option1))
echo $option1;
// YOUR WIDGET CODE GOES HERE

echo $args['after_widget'];
}

5. Customizing the Widget Functionality

Place your code where it says the following inside the “widget” function.

// YOUR WIDGET CODE GOES HERE

The widget code you write will depend on the type of widget you are trying to create and the variables involved in writing the widget. The variables are the parameters containing the values you are executing. Each set of variables will create a different outcome or course for your widget. You will need to add a value for each variable you intend to use.

Summary:

While this tutorial is relatively simple, you can see that you will need at least some basic knowledge of PHP and some WordPress function. While the basic structure of the widget code may remain the same, the functionality code will change depending on exactly what action the widget will perform, as well as where on your website you plan on placing your widget. Begin by deciding on your widget functionality and then use your knowledge of PHP, HTML and CSS to create a widget that will put that functionality into action.

Leave A Reply

Your email address will not be published.