Widgets are very useful to display custom content to website sidebar and widget enabled area, the Best part of WordPress already provides some ready widget for the user and this is also can be extended to create our own widget for custom need. if you are looking for the easy to create the custom widget for your WordPress this post will guide you to build your custom widget.

 

What is Widgets for WordPress?

WordPress Widgets are used for add/display content or features for your website sidebars or widget enabled area. you can display custom content based on execution for any function. default WordPress widgets are Categories, Tag cloud, Search, etc available in Widgets menu on WordPress admin dashboard, Widgets are easy to use for any user, can be draggable to display any sidebar or widget area.

Create Widget for WordPress

 

Create first Widget

Bellow the code you will need to add your theme  functions.php file to get started.

// Register and load the widget
function dartthemes_load_widget() {
  register_widget( 'dartthemes_widget' );
}
add_action( 'widgets_init', 'dartthemes_load_widget' );

// Creating the widget
class dartthemes_widget extends WP_Widget {

  function __construct() {
    parent::__construct(

// ID of your widget
      'dartthemes_widget',

// Widget name will appear in UI
      __('DartThemes.com Widget', 'dartthemes_widget_textdomain'),

// Widget description
      array( 'description' => __( 'Just a example widget.', 'dartthemes_widget_textdomain' ), )
    );
  }

// Creating widget front-end

  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 ( ! empty( $title ) )
      echo $args['before_title'] . $title . $args['after_title'];

// This is where you run the code and display the output
    echo __( 'Hello, World!', 'dartthemes_widget_textdomain' );
    echo $args['after_widget'];
  }

// Widget Backend
  public function form( $instance ) {


    $title = ( ! empty( $instance['title'] ) ) ?  $instance['title']  : __( 'New title', 'dartthemes_widget_textdomain' );


    if ( isset( $instance[ 'title' ] ) ) {
      $title = $instance[ 'title' ];
    }
    else {
      $title = __( 'New title', 'dartthemes_widget_textdomain' );
    }

    if ( isset( $instance[ 'dummy_textarea' ] ) ) {
      $dummy_textarea = $instance[ 'dummy_textarea' ];
    }
    else {
      $dummy_textarea = __( 'Dummy text goes here', 'dartthemes_widget_textdomain' );
    }


// 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>

    <p>
      <label for="<?php echo $this->get_field_id( 'dummy_textarea' ); ?>"><?php _e( 'Dummy textarea:' ); ?></label>
      <textarea class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'dummy_textarea' ); ?>"><?php echo esc_attr( $dummy_textarea ); ?></textarea>

    </p>


    <?php
  }

// Updating widget replacing old instances with new
  public function update( $new_instance, $old_instance ) {
    $instance = array();
    $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
    $instance['dummy_textarea'] = ( ! empty( $new_instance['dummy_textarea'] ) ) ?  $new_instance['dummy_textarea'] : '';

    return $instance;
  }
} // Class dartthemes_widget ends here

 

Once you added the code and then go to WordPress dashboard and navigate to Appearance > Widget menu to see the widgets. you will see there is also DartThemes.com Widget available. you can use this like others widget too. by customizing the code you can extend as your needs by adding option fields and query on display.

Create WordPress widget