Post
Ask Question

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

Step 2: Check widget in  widgets area.