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
  3. class wpb_widget extends WP_Widget {
  5. function __construct() {
  7. parent::__construct(
  9. // Base ID of your widget
  11. 'wpb_widget',
  13. // Widget name will appear in UI
  15. __('WPBeginner Widget', 'wpb_widget_domain'),
  17. // Widget description
  19. array( 'description' => __( 'Sample widget based on WPBeginner Tutorial', 'wpb_widget_domain' ), )
  21. );
  23. }
  25. // Creating widget front-end
  27. // This is where the action happens
  29. public function widget( $args, $instance ) {
  31. $title = apply_filters( 'widget_title', $instance['title'] );
  33. // before and after widget arguments are defined by themes
  35. echo $args['before_widget'];
  37. if ( ! emptyempty( $title ) )
  39. echo $args['before_title'] . $title . $args['after_title'];
  41. // This is where you run the code and display the output
  43. echo __( 'Hello, World!', 'wpb_widget_domain' );
  45. echo $args['after_widget'];
  47. }
  49. // Widget Backend
  51. public function form( $instance ) {
  53. if ( isset( $instance[ 'title' ] ) ) {
  55. $title = $instance[ 'title' ];
  57. }else {
  59. $title = __( 'New title', 'wpb_widget_domain' );
  61. }
  63. // Widget admin form
  65. ?>
  67. <p>
  69. <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
  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 ); ?>" />
  73. </p>
  75. <?php
  77. }
  79. // Updating widget replacing old instances with new
  81. public function update( $new_instance, $old_instance ) {
  83. $instance = array();
  85. $instance['title'] = ( ! emptyempty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
  87. return $instance;
  89. }
  91. } // Class wpb_widget ends here
  93. // Register and load the widget
  95. function wpb_load_widget() {
  97. register_widget( 'wpb_widget' );
  99. }
  101. add_action( 'widgets_init', 'wpb_load_widget' );

Step 2: Check widget in widgets area.