How To Create A WordPress Custom Widget

How To Create A WordPress Custom Widget

Steps to Follow

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");'));

?>

Then finaly widget look like this :