How To Create A WordPress Custom Widget In Few Simple Steps

Steps to Create Custom WordPress Widget

I have created a new folder named, wordpress_widget where I have saved a newly created file widget.php.

Now, save this wordpress_widget folder under the plugin folder of WordPress.

(Eg. wamp -> www -> wordpress -> wp-content -> plugins)

1. Enter Plugin Details

When you create a new plugin, it is very necessary to provide all its details like- plugin name, plugin URI, its short description, author name, author URI etc. You can follow the below code and enter details according to it.

<?php

/*
Plugin Name: Custom Widget
Plugin URI: http://inkthemes.com
Description: Building a Custom WordPress Widget.
Author: InkThemes
Version: 1
Author URI: http://inkthemes.com
*/

?>

2. Define Widget Name

You need to create a class (here it is my_plugin) that encloses widget in it.

You need to create a constructor, give constructor name same as that of a class i.e. my_plugin.

Under this constructor, you need to define a widget name.

As you can see in the below code I have given a widget name- My Widget

<?php

class my_plugin extends WP_Widget {

// constructor
function my_plugin() {
// Give widget name here
parent::WP_Widget(false, $name = __('My Widget', 'wp_widget_plugin') );

}

?>

3. Add Functionality to Widget for Backend

You need to create a form that you will see when adding the widget in the sidebar. And then you can fill data under these form fields from backend that will ultimately display on front end.

You will be more clear with a below image.

For that, you have to use a predefined function called form () that create the widget in the WordPress administration.

Also define CSS code for the widget fields i.e. title and textarea, for that, just use the below code and add it under the widget.php file followed by the above piece of code.

<?php

// widget form creation

function form($instance) {

// Check values
if( $instance) {
$title = esc_attr($instance['title']);
$textarea = $instance['textarea'];
} else {
$title = '';
$textarea = '';
}
?>

<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title', 'wp_widget_plugin'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('textarea'); ?>"><?php _e('Description:', 'wp_widget_plugin'); ?></label>
<textarea class="widefat" id="<?php echo $this->get_field_id('textarea'); ?>" name="<?php echo $this->get_field_name('textarea'); ?>" rows="7" cols="20" ><?php echo $textarea; ?></textarea>
</p>
<?php
}

?>

4. Update Widget Data on Backend

When you click on the save button on widget form, then predefined function update() is called.

This function overwrite the old value of form fields with a new value. As you can see in the below code I have used two fields in the form, so these two fields keep on updating with new valid values in backend.

<?php

function update($new_instance, $old_instance) {
$instance = $old_instance;
// Fields
$instance['title'] = strip_tags($new_instance['title']);
$instance['textarea'] = strip_tags($new_instance['textarea']);
return $instance;
}

?>

5. Display Widget on Front End

In order to display widget in the front end, you need to include a widget ()function in the code. This function contains two parameters $args and $instance.

$args –> associative array that will be passed as a first argument to every active widget callback

$instance –> instance variable

$before_widget –> HTML to place before widget

<?php
// display widget
function widget($args, $instance) {
extract( $args );

// these are the widget options
$title = apply_filters('widget_title', $instance['title']);
$textarea = $instance['textarea'];
echo $before_widget;

// Display the widget
echo '<div class="widget-text wp_widget_plugin_box" style="width:269px; padding:5px 9px 20px 5px; border: 1px solid rgb(231, 15, 52); background: pink; border-radius: 5px; margin: 10px 0 25px 0;">';
echo '<div class="widget-title" style="width: 90%; height:30px; margin-left:3%; ">';

// Check if title is set
if ( $title ) {
echo $before_title . $title . $after_title ;
}
echo '</div>';

// Check if textarea is set
echo '<div class="widget-textarea" style="width: 90%; margin-left:3%; padding:8px; background-color: white; border-radius: 3px; min-height: 70px;">';
if( $textarea ) {
echo '<p class="wp_widget_plugin_textarea" style="font-size:15px;">'.$textarea.'</p>';
}
echo '</div>';
echo '</div>';
echo $after_widget;
}
}

?>

6. Register Widget in WordPress

You need to register widget in WordPress so that it will be available under widget section of your WordPress dashboard. To do so, you can follow the below code.

<?php

// register widget
add_action('widgets_init', create_function('', 'return register_widget("my_plugin");'));

?>

Screenshots

1. Plugin named, Custom Widget is listed under the plugins option of your WordPress dashboard, so you need to activate it by click on the Activate option, similar as below image.

 2. Once the plugin is activated, Widget named My Widget is listed under the widget area of your WordPress dashboard, similar as below image.

3. You can place the widget under the sidebar or footer section of your website by simple drag and drop.

Now enter data in the widget fields that you want to display in the front end. As you see in the below image, I have filled two fields, Title andDescription of My Widget.

4. This is how the widget appears in the sidebar section of your website.

Did you like the design of BlackBird WordPress theme?? It comes with widgetized sidebar and footer widgets…:)

Note: You can set the appearance of the widget as per your choice, just modify the html code under Step5.