How to Create Widget using Wordpress

This blog describe for How to create widget using Wordpress.

Introduction

Widget is a small block that performs a specific function. You can add widgets in sidebars also known as widget areas on your web page. Widgets is easy to install and the list of widget available widgets and widget areas by going to the Appearance » Widgets

Default widgets including categories, tag cloud, navigation menu, calendar, search, recent posts etc. If you drag the recent posts widget in a widget area, then it will contain a list of recent posts in Wordpress.

How to create widget

Step 1: To open function.php file and paste below code.

// Creating the widget

class wpb_widget extends WP_Widget {

   function __construct() {

      parent::__construct(

      // Base ID of your widget

      'wpb_widget',

      // Widget name will appear in UI

      __('WPBeginner Widget', 'wpb_widget_domain'),

      // Widget description

      array( 'description' => __( 'Sample widget based on WPBeginner Tutorial', 'wpb_widget_domain' ), )

      );

   }

   // Creating widget front-end

   // This is where the action happens

   public function widget( $args, $instance ) {

      $title = apply_filters( 'widget_title', $instance['title'] );

      // before and after widget arguments are defined by themes

      echo $args['before_widget'];

      if ( ! emptyempty( $title ) )

      echo $args['before_title'] . $title . $args['after_title'];

      // This is where you run the code and display the output

      echo __( 'Hello, World!', 'wpb_widget_domain' );

      echo $args['after_widget'];

   }

   // Widget Backend

   public function form( $instance ) {

      if ( isset( $instance[ 'title' ] ) ) {

         $title = $instance[ 'title' ];

         }else {

            $title = __( 'New title', 'wpb_widget_domain' );

         }

         // Widget admin form

      ?>

      <p>

      <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></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 esc_attr( $title ); ?>" />

      </p>

   <?php

}

// Updating widget replacing old instances with new

public function update( $new_instance, $old_instance ) {

      $instance = array();

      $instance['title'] = ( ! emptyempty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';

      return $instance;

   }

} // Class wpb_widget ends here

// Register and load the widget

function wpb_load_widget() {

   register_widget( 'wpb_widget' );

   }

add_action( 'widgets_init', 'wpb_load_widget' );

Step 2: Check widget in  widgets area.