How to Create a Custom WordPress Widget?

Widgets are an essential part of any WordPress website, as they provide an easy way to add functionality and features to your site’s sidebars and other widget-ready areas. In this tutorial, we will show you how to create a custom WordPress widget that includes a text field and a textarea field, which can be used to display custom text or HTML code.

Step 1: Creating the Widget Class

The first step is to create a new class for your custom widget. You can do this by adding the following code to your plugin or theme’s functions.php file:

class My_Custom_Widget extends WP_Widget {
 
    function __construct() {
        parent::__construct(
            'my_custom_widget', // Base ID
            'My Custom Widget', // Name
            array( 'description' => __( 'A custom widget for my website', 'text_domain' ) ) // Args
        );
    }
 
    public function widget( $args, $instance ) {
        // Widget output code goes here
    }
 
    public function form( $instance ) {
        // Widget form code goes here
    }
 
    public function update( $new_instance, $old_instance ) {
        // Update widget code goes here
    }
 
}

In this code, we have created a new class called My_Custom_Widget that extends the WP_Widget class. We have also defined the widget’s base ID, name, and description using the __construct() function.

Step 2: Adding the Text and Textarea Fields

The next step is to add the text and textarea fields to the widget’s form. You can do this by adding the following code to the form() function:

public function form( $instance ) {
    $title = ! empty( $instance['title'] ) ? $instance['title'] : __( 'New title', 'text_domain' );
    $text = ! empty( $instance['text'] ) ? $instance['text'] : '';

    ?>
    <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( 'text' ); ?>"><?php _e( 'Text:' ); ?></label>
        <textarea class="widefat" id="<?php echo $this->get_field_id( 'text' ); ?>" name="<?php echo $this->get_field_name( 'text' ); ?>" rows="5"><?php echo esc_textarea( $text ); ?></textarea>
    </p>
    <?php
}

In this code, we have added two fields to the widget’s form: a text field for the widget’s title, and a textarea field for the custom text. We have used the get_field_id() and get_field_name() functions to set the field’s id and name attributes, and the esc_attr() and esc_textarea() functions to sanitize the values.

Step 3: Updating the Widget Instance

The final step is to update the widget instance with the values entered in the form. You can do this by adding the following code to the update() function:

public function update( $new_instance, $old_instance ) {
    $instance = array();
    $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? sanitize_text_field( $new_instance['title'] ) : '';
    $instance['text'] = ( ! empty( $new_instance['text'] ) ) ? sanitize_textarea_field( $new_instance['text'] ) : '';

    return $instance;
}

In this code, we have created a new $instance array that contains the updated values for the title and text fields. We have used the sanitize_text_field() and sanitize_textarea_field() functions to sanitize the values.

Step 4: Displaying the Widget Output

The final step is to display the widget output on the frontend of your website. You can do this by adding the following code to the widget() function:

public function widget( $args, $instance ) {
    echo $args['before_widget'];

    $title = apply_filters( 'widget_title', $instance['title'] );
    if ( ! empty( $title ) ) {
        echo $args['before_title'] . $title . $args['after_title'];
    }

    $text = apply_filters( 'widget_text', $instance['text'] );
    echo ! empty( $text ) ? wpautop( $text ) : '';

    echo $args['after_widget'];
}

In this code, we have used the $args and $instance variables to get the values entered in the widget’s form. We have also used the apply_filters() function to filter the title and text fields, and the wpautop() function to apply WordPress paragraph tags to the text.

Conclusion

In this tutorial, we have shown you how to create a custom WordPress widget with a text field and a textarea field. By following these steps, you can create your own custom widgets to add more functionality to your WordPress website