how to add follow us widget in wordpress

How to add follow us widget in wordpress?

In this article we will teach you how to add follow us widget in wordpress.

If we want to increase traffic to our website or blog then there is a need for social medias like facebook, twitter, instagram, linkedin etc. And some times we need to add social media follow us buttons or icons to our website. For this sometimes we needs to install the large wordpress plugins but there is a trick we can create this functionality without needed a plugin.

So, First of all paste this code in your functions.php file located at website_root_path/wp-content/themes/your_theme/functions.php

// Creating the widget 
class rmc_widget extends WP_Widget {

	function __construct() {
		parent::__construct(

// Base ID of your widget
			'rmc_widget', 

// Widget name will appear in UI
			__('ReadyMadeCode Follow Us Widget', 'rmc_widget_domain'), 

// Widget description
			array( 'description' => __( 'Follow Us to add follow us links to your wordpress website', 'rmc_widget_domain' ), ) 
		);
	}

// Creating widget front-end

	public function widget( $args, $instance ) {
		$title = apply_filters( 'widget_title', $instance['title'] );

		$facebook_link = $instance['facebook_link'];

		$twitter_link = $instance['twitter_link'];

		$youtube_link = $instance['youtube_link'];

// 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 '<div class="follow-us">

		<a href="'.$facebook_link.'" target="_blank">
		<span class="dashicons dashicons-facebook-alt"></span>
		</a>

		<a href="'.$twitter_link.'" target="_blank">
		<span class="dashicons dashicons-twitter"></span>
		</a>

		<a href="'.$youtube_link.'" target="_blank">
		<span class="dashicons dashicons-youtube"></span>
		</a>

		</div>';

		echo $args['after_widget'];
	}

// Widget Backend 
	public function form( $instance ) {

		$facebook_link = $twitter_link = $youtube_link = '';

		if ( isset( $instance[ 'title' ] ) ) {
			$title = $instance[ 'title' ];
		}
		else {
			$title = __( 'Follow Us', 'rmc_widget_domain' );
		}

		if ( isset( $instance[ 'facebook_link' ] ) ) {
			$facebook_link = $instance[ 'facebook_link' ];
		}

		if ( isset( $instance[ 'twitter_link' ] ) ) {
			$twitter_link = $instance[ 'twitter_link' ];
		}

		if ( isset( $instance[ 'youtube_link' ] ) ) {
			$youtube_link = $instance[ 'youtube_link' ];
		}

// 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>

		<p>
			<label for="<?php echo $this->get_field_id( 'facebook_link' ); ?>"><?php _e( 'Facebook Link' ); ?></label> 
			<input class="widefat" id="<?php echo $this->get_field_id( 'facebook_link' ); ?>" name="<?php echo $this->get_field_name( 'facebook_link' ); ?>" type="text" value="<?php echo esc_attr( $facebook_link ); ?>" />
		</p>

		<p>
			<label for="<?php echo $this->get_field_id( 'twitter_link' ); ?>"><?php _e( 'Twitter Link' ); ?></label> 
			<input class="widefat" id="<?php echo $this->get_field_id( 'twitter_link' ); ?>" name="<?php echo $this->get_field_name( 'twitter_link' ); ?>" type="text" value="<?php echo esc_attr( $twitter_link ); ?>" />
		</p>

		<p>
			<label for="<?php echo $this->get_field_id( 'youtube_link' ); ?>"><?php _e( 'Youtube Link' ); ?></label> 
			<input class="widefat" id="<?php echo $this->get_field_id( 'youtube_link' ); ?>" name="<?php echo $this->get_field_name( 'youtube_link' ); ?>" type="text" value="<?php echo esc_attr( $youtube_link ); ?>" />
		</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'] ) : '';
		$instance['facebook_link'] = ( ! empty( $new_instance['facebook_link'] ) ) ? strip_tags( $new_instance['facebook_link'] ) : '';
		$instance['twitter_link'] = ( ! empty( $new_instance['twitter_link'] ) ) ? strip_tags( $new_instance['twitter_link'] ) : '';
		$instance['youtube_link'] = ( ! empty( $new_instance['youtube_link'] ) ) ? strip_tags( $new_instance['youtube_link'] ) : '';
		return $instance;
	}

// Class rmc_widget ends here
} 


// Register and load the widget
function rmc_load_widget() {
	register_widget( 'rmc_widget' );
}
add_action( 'widgets_init', 'rmc_load_widget' );

After adding this code visit your WordPress Dashboard Appearance -> Widgets page then Find the widget ReadyMadeCode Follow Us Widget and add this widget to your sidebars.

In the code above we created a Class ‘rmc_widget’ . We have used same class ‘rmc_widget’ in register_widget to register our widget . Used hook add_action (‘widgets_init’) to initialize in our wordpress theme or custom plugin. We have extends the Class ‘WP_Widget’. To access base functions widget – for frontend, form – for backend and update – to retain form values.

That’s it you have learned how to add follow us widget in wordpress. Using this trick you can also add social widget in wordpress, add social media sharing buttons to wordpress.

Using this you can create custom widgets in wordpress without plugin.

If you want to read about wordpress widgets in detail then visit Widgets Page of WordPress.

And if you want more tutorials and tricks about wordpress then visit our WordPress Page and follow us on facebooktwittertumblrlinkdedin and if you like this article then share this.

ReadyMadeCode
Author: ReadyMadeCode

ReadyMadeCode.com is a website where you can find Free Online Tutorials - Website Development Tutorials, App Development Tutorials, Coding Tutorials,Website Designing and Development From popular programming languages or scripts or framework like php, laravel, html, css, javascript, nodejs, java, angularjs etc. Download Emails | E-Books.

View All Posts From ReadyMadeCode
Author Website : https://www.readymadecode.com
Scroll to top

60% Discount On E-Books Membership

Avail Till 30th September

(Join Now)

E-Books Discount

%d bloggers like this:
We have updated our memberships. Please check here
Close X