WordPress Widget

It is a small block that performs a specific function. You can add these widgets in sidebars areas on your web page.

WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Widgets can be easily dragged and dropped into a specific widget area.

You can find the list of available widgets in Appearance » Widgets section in your WordPress dashboard.

Creating Custom Widget

For creating a custom widget, You have to write code in functions.php file in your theme folder or it’s best practise to write code in separate file and include it in functions.php file.

Basically, there are three major functions of a widget which can be broken down into widget, update and form.

• function widget ()
• function update ()
• function form ()

Basic Structure

The bone structure of our widget is something like this:

add_action( 'widgets_init', 'wp_custom_widget' );
 
function wp_custom_widget() {
    register_widget( 'custom_widget' );
}
 
class custom_widget extends WP_Widget {
 
    public function __construct() {
       // Widget Details
    }
 
    public function form( $instance ) {
        // Backend Form
    }
 
    public function update( $new_instance, $old_instance ) {  
        return $new_instance;
    }
 
    public function widget( $args, $instance ) {
        // Frontend display HTML
    }
 
}

Step 1

Before we do all that we’ll first load our widget whenever necessary by the function “widgets_init”. This is an action hook

add_action( 'widgets_init', 'wp_custom_widget' );

Next thing that we’ll do is register our widget in WordPress so that it is available under the widgets section.

function wp_custom_widget() {
    register_widget( 'custom_widget' );
}

Step 2

We will enclose our widget in a class. The name of the class is important, It’s same name which you have name as in register_widget ().

class custom_widget extends WP_Widget {}

Step 3 function __construct()

The __construct() method is used to assign an id, title, class name  and description to the widget. Here’s how the constructor function looks :-

public function __construct() {

       $widget_options = array( 
        'classname' => 'widget_class',
        'description' => 'This is a Custom Widget',
        );

       parent::__construct( 'widget_id', 'Widget Title', $widget_options );
    }

Step 4  function form()

The form() method is used to add setting fields to the widget which will be displayed in the WordPress admin area.

public function form( $instance ) {

       $title = ( ! empty( $instance['mk_title'] ) ) ? $instance['mk_title'] : '';
       ?>

       <p>
         <label for="<?php echo $this->get_field_id( 'mk_title' ); ?>">Title:</label>
         <input type="text" name="<?php echo $this->get_field_name('mk_title');?>" id="<?php echo $this->get_field_id('mk_title'); ?>" value="<?php echo $title; ?>">
       </p>

 <?php
}

Use the get_field_name() and get_field_id() function to output the id and name of fields. WordPress handles multiple sidebars and widgets, so it’ll add its own stuff to the name of the field.

Step 5 function update ()

update () method is used to save data in database, this method pass two parameter $new_instance and $old_instance

public function update( $new_instance, $old_instance ) {
		$instance['my_title'] = $new_instance['my_title'];
		return $instance;

	}

Step 6 function widget ()

The widget () method used to show widget data in front-end ( in your web page sidebar ) , this method pass two parameter $args and $instance, $args set position of widget and $instance have stored widget data.

public function widget( $args, $instance ) {

		$title = $instance['my_title'];

		echo $args['before_widget'];

		echo $title;

		echo $args['after_widget'];
	}