Learn How To Create A WordPress Custom Widget In Few Simple Steps

By Our Bestseller: WordPress Themes

WordPress widget is an easy-to-use way to add content and specific features into your website.

You just need to drag and drop the widget into any widgetized area like sidebar, footer or header of your website and start using its functionality.

This is a WordPress widget tutorial, where you will learn how to create a custom widget in WordPress using the plugin.

Once you activate this plugin, the widget will be listed under the widget area of the WordPress.

After reading this article, you can create a WordPress custom menu widget quickly.

Functionality of My WordPress Custom Widget

This widget is the text widget which is used for many purpose like display your latest offers, deals or special events on your website.

It contains two fields named, title and description. So you just need to fill data under these fields from dashboard and display it on any widget section (like a sidebar or footer) of your website. So that, it looks cool on front end and grab visitor’s attention more readily.

create wordpress easy 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.

custom wp widget codes

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.

custom widget creator

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.

custom widget activate

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

widget wp create easily

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 and Description of My Widget.

widget output

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

easy design wp widget

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

Here is one of the helpful WordPress Custom Widget Videos –

Conclusion

Creating WordPress custom widget is very easy, you can create any type of widget you want. These are the common steps you need to follow for every widget type. I hope this tutorial makes your approach clear.

If you have any query then do share it in the comment box. I will definitely resolve it and also share your thoughts about the post. I will be glad to know it. :)

Related Link -

Add New Widget Areas Learn How To Create WordPress ShortCode

Comments and Responses