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.

1. // Creating the widget  
2.   
3. class wpb_widget extends WP_Widget {  
4.   
5.    function __construct() {  
6.   
7.       parent::__construct(  
8.   
9.       // Base ID of your widget  
10.   
11.       'wpb_widget',  
12.   
13.       // Widget name will appear in UI  
14.   
15.       __('WPBeginner Widget', 'wpb_widget_domain'),  
16.   
17.       // Widget description  
18.   
19.       array( 'description' => __( 'Sample widget based on WPBeginner Tutorial', 'wpb_widget_domain' ), )  
20.   
21.       );  
22.   
23.    }  
24.   
25.    // Creating widget front-end  
26.   
27.    // This is where the action happens  
28.   
29.    public function widget( $args, $instance ) {  
30.   
31.       $title = apply_filters( 'widget_title', $instance['title'] );  
32.   
33.       // before and after widget arguments are defined by themes  
34.   
35.       echo $args['before_widget'];  
36.   
37.       if ( ! emptyempty( $title ) )  
38.   
39.       echo $args['before_title'] . $title . $args['after_title'];  
40.   
41.       // This is where you run the code and display the output  
42.   
43.       echo __( 'Hello, World!', 'wpb_widget_domain' );  
44.   
45.       echo $args['after_widget'];  
46.   
47.    }  
48.   
49.    // Widget Backend  
50.   
51.    public function form( $instance ) {  
52.   
53.       if ( isset( $instance[ 'title' ] ) ) {  
54.   
55.          $title = $instance[ 'title' ];  
56.   
57.          }else {  
58.   
59.             $title = __( 'New title', 'wpb_widget_domain' );  
60.   
61.          }  
62.   
63.          // Widget admin form  
64.   
65.       ?>  
66.   
67.       <p>  
68.   
69.       <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>  
70.   
71.       <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 ); ?>" />  
72.   
73.       </p>  
74.   
75.    <?php  
76.   
77. }  
78.   
79. // Updating widget replacing old instances with new  
80.   
81. public function update( $new_instance, $old_instance ) {  
82.   
83.       $instance = array();  
84.   
85.       $instance['title'] = ( ! emptyempty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';  
86.   
87.       return $instance;  
88.   
89.    }  
90.   
91. } // Class wpb_widget ends here  
92.   
93. // Register and load the widget  
94.   
95. function wpb_load_widget() {  
96.   
97.    register_widget( 'wpb_widget' );  
98.   
99.    }  
100.   
101. add_action( 'widgets_init', 'wpb_load_widget' );  
102.  
103.  
104. 
     
     
     
     Step 2: Check widget in  widgets area.