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.
