How To Create Custom Widget in WordPress

Looking to create a create custom widget in WordPress ? Let’s start! As you all may know,widgets in WordPress are the components by the use of which one can add contents and features in the site. Widgets are placed inside defined widget areas such as sidebar, footer, header etc.

For example, you may find advertisement on the header of websites of news portal, online magazine and some blogging websites. The advertisement is actually a widget and the part of header where the advertisement is displayed is actually a widget area.

By default WordPress comes with standard widgets such as Search, Calendar, Recent Posts, Recent Comments etc… All the WordPress widget appear in the user’s Administration Screen at Appearance > Widgets. In WordPress version 4.9.6, there are altogether 17 widgets. They are: Archives, Audio, Calendar, Categories, Custom HTML, Gallery, Image, Meta, Navigation Menus, Pages, Recent Comments, Recent Posts, RSS, Search, Tag Cloud, Text and Video.

If you are using a WordPress theme for your site, then you might find other widgets except the default ones. You’ll also find different widget areas where you can place widgets as your wish.

Today however, we are discussing about creation of custom widget. So let’s hop into creating a widget.

The first thing to know is that you can write you widget creation code in functions.php file or some other file which you can later include in functions.php file.

To create a widget, we need to create a class which extends the core class of WordPress called WP_Widget. The class contains four functions,

__construct(), widget(), form() and update().

• In function __construct(), we define the base ID, name, description etc… of the widget. The base ID uniquely identifies the widget. The name sets, the name of the widget and description sets the short description of widget describing the purpose of the widget.
• In function widget(),  we write the markup for displaying widget contents.
• Then In function form(), we create form using which contents are created.
• In function update(), we save or update the contents created using form.

Now let’s create a text widget similar to the default Text widget in WordPress. The PHP code need for the Text widget is as below:

class Name_of_Widget extends WP_Widget {

    function __construct() {
        parent::__construct(
            'widget-id',  // Base ID
           __( 'Name of Widget', 'text_domain' )   // Name of Widget
        );
    }

    public $args = array(
        'before_title'  => '<h4 class="widget-title">',
        'after_title'   => '</h4>',
        'before_widget' => '<div class="widget-wrap">',
        'after_widget'  => '</div></div>'
    );

    public function widget( $args, $instance ) {
        echo $args['before_widget'];
        if ( ! empty( $instance['title'] ) ) {
            echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
        } 
        echo '<div class="textwidget">';
        echo esc_html__( $instance['text'], 'text_domain' );
        echo '</div>';
        echo $args['after_widget'];
    }

    public function form( $instance ) {
        $title = ! empty( $instance['title'] ) ? $instance['title'] : esc_html__( '', 'text_domain' );
        $text = ! empty( $instance['text'] ) ? $instance['text'] : esc_html__( '', 'text_domain' );
        ?>
        <p>
            <label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php esc_attr_e( 'Title:', 'text_domain' ); ?></label>
            <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
        </p>
        <p>
            <textarea class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'text' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'text' ) ); ?>" type="text" cols="30" rows="10"><?php echo esc_attr( $text ); ?></textarea>
        </p>
        <?php
    }

    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_text_field( $new_instance['text'] ) : '';
        return $instance;
    }

}

Note: Before saving or updating unsafe data, unsafe data must be properly sanitized i.e. data must be validated. And while displaying data, proper escaping must be done.

After creating the custom widget, it should be registered. Otherwise it won’t appear in your Administration Screen at Appearance > Widgets. To register the custom widget, following code is needed.

add_action( 'widgets_init', function() {
    register_widget( 'Name_of_Widget' );
});

In this way, you can create custom widget in WordPress. If you are looking for best free wordpress themes of 2018 that already have great widgets & features then make sure you check this article for best free WordPress themes.

If you liked this article, then please share it.

And if you have any questions, then comment below. You can follow us on Facebook for more updates.