How To

How to Create a New Custom Widget in WordPress

WordPress provides some default widgets to display extra content on the website. However, we can also create custom widgets when required.

Every widget has its own unique functionality on the website. Otherwise, there would be no need to create a new widget.

Index

Toggle

Add a New Widget in WordPress

WordPress provides some default widgets like categories, archives, tags, search, etc. In addition, some WordPress themes provide extra widgets according to theme purpose and functionality. But, sometimes these widgets are not enough. So, let’s create a new one. Follow the below steps to create a new widget.

Step 1: Go to Theme Editor and Select a Theme

First, open WordPress admin panel and open the Theme Editor window and select a theme in which you have to add a new widget.

Step 2: Register a New Widget

After that, open the functions.php file of your selected theme. Now copy and paste the below code at the end of the file.

CODE

function errorsea_widget() {register_widget( 'errorsea_new_widget' );}

add_action( 'widgets_init', 'errorsea_widget' );

class errorsea_new_widget extends WP_Widget {

 function __construct() {

 parent::__construct(

 // widget ID

 'errorsea_new_widget',

 // widget name

 __('Widget Title', ' errorsea_domain'),

 // widget description

 array( 'description' => __( 'Widget Description', 'errorsea_domain' ), )

 );

 }

 public function widget( $args, $instance ) {

 $title = apply_filters( 'widget_title', $instance['title'] );
 echo $args['before_widget'];

 //if title is present

 if ( ! empty( $title ) )
  echo $args['before_title'] . $title . $args['after_title'];

 // add your custom code here to display in widget

 echo $args['after_widget'];

 }

 public function form( $instance ) {

 if ( isset( $instance[ 'title' ] ) )

 $title = $instance[ 'title' ];

 else

 $title = __( 'Widget Title', 'errorsea_domain' );

 ?>

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

public function update($new_instance, $old_instance)
{

    $instance = array();

    $instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';

    return $instance;

}

}