• 24x7 live wp Support

  • Beth December 5, 2017
    How-to-create-a-custom-widget-in-wordpress

    This article helps you to understand, how to create custom widget in WordPress.

    Why I need to add custom widget in website?

    There are following reason to add custom widgets in WordPress website.

    • To develop own widget in the website.
    • when we develop own theme  then giving the special look in the website.
    • To add new content and feature in the widget area.

    How can I do it myself without impacting websites?

    There are some easy steps to add widget in WordPress.
    1: Firstly go to your site and login in your site.
    Dashboard
    2:  In dashboard go to Plugin < Add new
    3:  search the plugin Custom Sidebars then install and activate it.custom sidebar
    4: Goto Appearance < Widgets then you see that custom sidebar widgets appear,
    5: Select custom sidebar and setting in the widget area as shown in screenshot.

    create sidebar

    location of sidebar
    6: After setup widget you can refresh the website then you see the widget .

    You can also done by code by following steps:-

    1: Go to Appearance< Editor in dashboard.
    2: Select function.php and paste following code then update.

    // Register and load the widget
    function wpb_load_widget() {
    register_widget( ‘wpb_widget’ );
    }
    add_action( ‘widgets_init’, ‘wpb_load_widget’ );

    // 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
    __(‘WP custom Widget’, ‘wpb_widget_domain’),

    // Widget description
    array( ‘description’ => __( ‘Sample widget based on WPBeginner Tutorial’, ‘wpb_widget_domain’ ), )
    );
    }

    // 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’];
    }

    // Widget Backend
    public function form( $instance ) {
    if ( isset( $instance[ ‘title’ ] ) ) {
    $title = $instance[ ‘title’ ];
    }
    else {
    $title = __( ‘New title’, ‘wpb_widget_domain’ );
    }
    // 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;
    }
    } // Class wpb_widget ends here

    custom widget
    3:Go to Appearance > widget
    4: Select the wp  custom widget and set it in the widget area.
    custom widget
    5: Go to website and refresh it then you can see the widget.

    show widget

    Difficulty level [Easy, Medium, Hard].

    Hard

    Total time consumed.

    30 min

    This is for WordPress.com or Org ?

    Related Plugins

    WP Custom Widget area
    Custom Sidebars – Dynamic Widget Area Manager
    Image Widget
    Summary
    How to create custom widget in WordPress?
    Article Name
    How to create custom widget in WordPress?
    Description
    There are following reason to add  custom widgets in WordPress website. To develop own widget in the website. when we develop own theme  then giving the special look in the website. To add new content and feature in the widget area.
    Author
    Publisher Name
    WordPress Support LLC
    Publisher Logo

    Leave a comment.

    Your email address will not be published. Required fields are marked*

    error: Content is protected !!