How to Create a Custom WordPress Widget

Introduction

WordPress is one of the most popular CMS on the web. As a web developer we try to build in as many functionality into our custom theme so that it does not have bloat from install tons of plugins that will slow down server resources. There will be an instance we need to create and custom WordPress widget. He you will find a step-by-guide how to achieved create your custom WordPress widget.

Coding on Functions.php

WordPress uses its built-in WP_Widget class to deploy these methods. WP_Widget is the portion of WordPress that runs widgets.

To create the most basic custom widget in WordPress, you must make use of at least four methods. And we will be focusing on the following methods:

• __construct()
• form()
• widget()
• update()

You can copy and paste the following code snippet to your functions.php file of your WordPress theme. Which are the four methods inside the WP_Widget class to build your widget, in other word this is the foundation of our wiget.

// 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
  __('Beginner Widget', 'wpb_widget_domain'), 
   
  // Widget description
  array( 'description' => __( 'Simeple widget tutorial' ), )
  );
}
 
// Widget Backend
public function form( $instance ) {
  if ( isset( $instance[ 'title' ] ) ) {
    $title = $instance[ 'title' ];
  } else {
    $title = __( 'New title' );
  }
// 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'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
  return $instance;
}


// 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!', 'wpb_widget_domain' );
  echo $args['after_widget'];
}
 
// 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' );