How To Create A Custom Widget For WordPress Sidebar

Here we learn about how to create a custom widget for WordPress sidebar.

Custom code copied and paste into your child theme’s functions.php file.

Here is an Example for used social media in the sidebar.

<?php
/*
 * Register widget with WordPress.
 */function myblog_social_media_widget_load() {
    register_widget( 'myblog_social_media_widget' );
}
add_action( 'widgets_init', 'myblog_social_media_widget_load' );

/**
 * Adds myblog_social_media_widget widget.
 */class myblog_social_media_widget extends WP_Widget {
  function __construct() {
    parent::__construct(
      // Base ID of your widget
      'myblog-social-media-widget',
      esc_html__('Myblog Social Media', 'text-domain'),
      array( 'description' => esc_html__( 'Social Media on the footer', 'text-domain' ), )
    );
  }

  /**
   * Front-end display of widget.
   *
   * @see WP_Widget::widget()
   *
   * @param array $args     Widget arguments.
   * @param array $instance Saved values from database.
   */  public function widget( $args, $instance ) {
    $myblog_title         = $instance['myblog_title'];
    $myblog_facebook_url    = $instance['myblog_facebook_url'];
    $myblog_pinterest_url   = $instance['myblog_pinterest_url'];
    $myblog_twitter_url     = $instance['myblog_twitter_url'];
    $myblog_google_url      = $instance['myblog_google_url'];
    $myblog_linkedin_url    = $instance['myblog_linkedin_url'];
    $myblog_youtube_url     = $instance['myblog_youtube_url'];
    $myblog_instagram_url   = $instance['myblog_instagram_url'];
    $myblog_rss_url         = $instance['myblog_rss_url'];
  
    echo $args['before_widget'];
    if ( ! empty( $myblog_title ) ) {
      echo $args['before_title'] . apply_filters( 'widget_title', $myblog_title ) . $args['after_title'];
    }

    echo "<ul class='myblog-social-media'>";
      if ( $myblog_instagram_url ) {
        echo "<li><a href='$myblog_instagram_url' target='_blank' class='social-instagram'>Instagram</a></li>";
      }
      if ( $myblog_pinterest_url ) {
        echo "<li><a href='$myblog_pinterest_url' target='_blank' class='social-pinterest'>Pinterest</a></li>";
      }
      if ( $myblog_facebook_url ) {
        echo "<li><a href='$myblog_facebook_url' target='_blank' class='social-facebook'>Facebook</a></li>";
      }   
      if ( $myblog_twitter_url ) {
        echo "<li><a href='$myblog_twitter_url' target='_blank' class='social-twitter'>Twitter</a></li>";
      }
      if ( $myblog_google_url ) {
        echo "<li><a href='$myblog_google_url' target='_blank' class='social-google'>Google Plus</a></li>";
      }
      if ( $myblog_linkedin_url ) {
        echo "<li><a href='$myblog_linkedin_url' target='_blank' class='social-linkedin'>Linkedin</a></li>";
      }
      if ( $myblog_youtube_url ) {
        echo "<li><a href='$myblog_youtube_url' target='_blank' class='social-youtube'>Youtube</a></li>";
      }
      if ( $myblog_rss_url ) {
        echo "<li><a href='$myblog_rss_url' target='_blank' class='social-rss'>Rss</a></li>";
      }
    echo "</ul>";

    echo $args['after_widget'];
  }

  /**
   * Back-end widget form.
   *
   * @see WP_Widget::form()
   *
   * @param array $instance Previously saved values from database.
   */  public function form( $instance ) {
    if ( isset( $instance[ 'myblog_title' ] ) ) {
      $myblog_title = $instance[ 'myblog_title' ];
    }
    if ( isset( $instance[ 'myblog_facebook_url' ] ) ) {
      $myblog_facebook_url = $instance[ 'myblog_facebook_url' ];
    }
    if ( isset( $instance[ 'myblog_pinterest_url' ] ) ) {
      $myblog_pinterest_url = $instance[ 'myblog_pinterest_url' ];
    }
    if ( isset( $instance[ 'myblog_twitter_url' ] ) ) {
      $myblog_twitter_url = $instance[ 'myblog_twitter_url' ];
    }
    if ( isset( $instance[ 'myblog_google_url' ] ) ) {
      $myblog_google_url = $instance[ 'myblog_google_url' ];
    }
    if ( isset( $instance[ 'myblog_linkedin_url' ] ) ) {
      $myblog_linkedin_url = $instance[ 'myblog_linkedin_url' ];
    }
    if ( isset( $instance[ 'myblog_youtube_url' ] ) ) {
      $myblog_youtube_url = $instance[ 'myblog_youtube_url' ];
    }
    if ( isset( $instance[ 'myblog_instagram_url' ] ) ) {
      $myblog_instagram_url = $instance[ 'myblog_instagram_url' ];
    }
    if ( isset( $instance[ 'myblog_rss_url' ] ) ) {
      $myblog_rss_url = $instance[ 'myblog_rss_url' ];
    }
  ?>
    <p>
      <label for="<?php echo $this->get_field_id( 'myblog_title' ); ?>"><?php _e( 'Title:' ); ?></label>
      <input class="widefat" id="<?php echo $this->get_field_id( 'myblog_title' ); ?>" name="<?php echo $this->get_field_name( 'myblog_title' ); ?>" type="text" value="<?php echo esc_attr( $myblog_title ); ?>" />
    </p>
    <p>
      <label for="<?php echo $this->get_field_id( 'myblog_facebook_url' ); ?>"><?php _e( 'Facebook URL:' ); ?></label>
      <input class="widefat" id="<?php echo $this->get_field_id( 'myblog_facebook_url' ); ?>" name="<?php echo $this->get_field_name( 'myblog_facebook_url' ); ?>" type="text" value="<?php echo esc_attr( $myblog_facebook_url ); ?>" />
    </p>
    <p>
      <label for="<?php echo $this->get_field_id( 'myblog_pinterest_url' ); ?>"><?php _e( 'Pinterest URL:' ); ?></label>
      <input class="widefat" id="<?php echo $this->get_field_id( 'myblog_pinterest_url' ); ?>" name="<?php echo $this->get_field_name( 'myblog_pinterest_url' ); ?>" type="text" value="<?php echo esc_attr( $myblog_pinterest_url ); ?>" />
    </p>
    <p>
      <label for="<?php echo $this->get_field_id( 'myblog_twitter_url' ); ?>"><?php _e( 'Twitter URL:' ); ?></label>
      <input class="widefat" id="<?php echo $this->get_field_id( 'myblog_twitter_url' ); ?>" name="<?php echo $this->get_field_name( 'myblog_twitter_url' ); ?>" type="text" value="<?php echo esc_attr( $myblog_twitter_url ); ?>" />
    </p>
    <p>
      <label for="<?php echo $this->get_field_id( 'myblog_google_url' ); ?>"><?php _e( 'Google Plus URL:' ); ?></label>
      <input class="widefat" id="<?php echo $this->get_field_id( 'myblog_google_url' ); ?>" name="<?php echo $this->get_field_name( 'myblog_google_url' ); ?>" type="text" value="<?php echo esc_attr( $myblog_google_url ); ?>" />
    </p>
    <p>
      <label for="<?php echo $this->get_field_id( 'myblog_linkedin_url' ); ?>"><?php _e( 'Linkedin URL:' ); ?></label>
      <input class="widefat" id="<?php echo $this->get_field_id( 'myblog_linkedin_url' ); ?>" name="<?php echo $this->get_field_name( 'myblog_linkedin_url' ); ?>" type="text" value="<?php echo esc_attr( $myblog_linkedin_url ); ?>" />
    </p>
    <p>
      <label for="<?php echo $this->get_field_id( 'myblog_youtube_url' ); ?>"><?php _e( 'Youtube URL:' ); ?></label>
      <input class="widefat" id="<?php echo $this->get_field_id( 'myblog_youtube_url' ); ?>" name="<?php echo $this->get_field_name( 'myblog_youtube_url' ); ?>" type="text" value="<?php echo esc_attr( $myblog_youtube_url ); ?>" />
    </p>
    <p>
      <label for="<?php echo $this->get_field_id( 'myblog_instagram_url' ); ?>"><?php _e( 'Instagram URL:' ); ?></label>
      <input class="widefat" id="<?php echo $this->get_field_id( 'myblog_instagram_url' ); ?>" name="<?php echo $this->get_field_name( 'myblog_instagram_url' ); ?>" type="text" value="<?php echo esc_attr( $myblog_instagram_url ); ?>" />
    </p>
    <p>
      <label for="<?php echo $this->get_field_id( 'myblog_rss_url' ); ?>"><?php _e( 'RSS URL:' ); ?></label>
      <input class="widefat" id="<?php echo $this->get_field_id( 'myblog_rss_url' ); ?>" name="<?php echo $this->get_field_name( 'myblog_rss_url' ); ?>" type="text" value="<?php echo esc_attr( $myblog_rss_url ); ?>" />
    </p>
  <?php
  }

  /**
   * Sanitize widget form values as they are saved.
   *
   * @see WP_Widget::update()
   *
   * @param array $new_instance Values just sent to be saved.
   * @param array $old_instance Previously saved values from database.
   *
   * @return array Updated safe values to be saved.
   */  public function update( $new_instance, $old_instance ) {

    return $new_instance;
  }
}
?>

OUTPUT:

1) Set widget in admin.

2) Fornt side dispaly.