When you want to add social media icons to your sidebar, you will come to realize that there really isn’t an easy way to do it.

You have to get stuck in and write some code. Even if you’re up for that task, it doesn’t always go smoothly. The WordPress sidebar is a curious creature. Sometimes it seems that changing just one character of your code can throw the whole thing out. All of the sudden things are missing or not looking right.

Luckily, I have a super easy solution!

Recently we created our first Divi Child Theme called Blush (seen below). As part of that, we wanted an easy way to put social media icon in the sidebar. It had to be easy for anyone else to quickly change their social links. So, I got my hands dirty and got stuck into the code.

Here is how you can add this to your Divi website.

1. Open up your functions.php file and add the following lines

This whole process works best if you are using a child theme.


class wnc_social_media_widget extends WP_Widget {


	public function __construct() {
		$widget_options = array(
			'classname'   => 'social_media_widget',
			'description' => 'Add social media links to your sidebar',
		);

		parent::__construct( 'social_media_widget', 'Social Media Widget', $widget_options );

	}

	public function widget( $args, $instance ) {
		$title     = apply_filters( 'widget_title', $instance['title'] );
		$facebook  = apply_filters( 'facebook_url', $instance['facebook_url'] );
		$twitter   = apply_filters( 'twitter_url', $instance['twitter_url'] );
		$instagram = apply_filters( 'instagram_url', $instance['instagram_url'] );
		$pinterest = apply_filters( 'pinterest_url', $instance['pinterest_url'] );
		$youtube   = apply_filters( 'youtube_url', $instance['youtube_url'] );

		echo $args['before_widget'] . $args['before_title'] . $title . $args['after_title'] ?>

<ul class="wnc_social_media_widget">

		<?php
		if ( ! empty( $instance['facebook_url'] ) ) {
			?>
			 <li class="wnc_smw_fb"><a href="<?php echo esc_url( 'https://facebook.com/' . $facebook ); ?>"></a></li>

			<?php
		}
		if ( ! empty( $instance['twitter_url'] ) ) {
			?>
			<li class="wnc_smw_tw"><a href="<?php echo esc_url( 'https://twitter.com/' . $twitter ); ?>"></a></li>
			<?php
		}
		if ( ! empty( $instance['instagram_url'] ) ) {
			?>
			<li class="wnc_smw_in"><a href="<?php echo esc_url( 'https://instagram.com/' . $instagram ); ?>"></a></li>
			<?php
		}
		if ( ! empty( $instance['pinterest_url'] ) ) {
			?>
			<li class="wnc_smw_pi"><a href="<?php echo esc_url( 'https://pinterest.com/' . $pinterest ); ?>"></a></li>
			<?php
		}
		if ( ! empty( $instance['youtube_url'] ) ) {
			?>
			<li class="wnc_smw_yt"><a href="<?php echo esc_url( 'https://youtube.com/channel/' . $youtube ); ?>"></a></li>
			<?php
		}

		?>
</ul>

		<?php
		echo $args['after_widget'];

	}

	public function form( $instance ) {
		$title     = ! empty( $instance['title'] ) ? $instance['title'] : '';
		$facebook  = ! empty( $instance['facebook_url'] ) ? $instance['facebook_url'] : '';
		$twitter   = ! empty( $instance['twitter_url'] ) ? $instance['twitter_url'] : '';
		$instagram = ! empty( $instance['instagram_url'] ) ? $instance['instagram_url'] : '';
		$pinterest = ! empty( $instance['pinterest_url'] ) ? $instance['pinterest_url'] : '';
		$youtube   = ! empty( $instance['youtube_url'] ) ? $instance['youtube_url'] : '';
		?>

<p>
<div>

<strong><label for="<?php echo $this->get_field_id( 'title' ); ?>">Title: </label></strong><br/>
<input type="text" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo esc_attr( $title ); ?>" />
</div>
<div>
<strong><label for="<?php echo $this->get_field_id( 'facebook_url' ); ?>">Facebook: </label></strong><br/>
<input type="text" id="<?php echo $this->get_field_id( 'facebook_url' ); ?>" name="<?php echo $this->get_field_name( 'facebook_url' ); ?>" value="<?php echo esc_attr( $facebook ); ?>" />
</div>
<div>
<strong><label for="<?php echo $this->get_field_id( 'twitter_url' ); ?>">Twitter: </label></strong><br/>
<input type="text" id="<?php echo $this->get_field_id( 'twitter_url' ); ?>" name="<?php echo $this->get_field_name( 'twitter_url' ); ?>" value="<?php echo esc_attr( $twitter ); ?>" />
</div>
<div>
<strong><label for="<?php echo $this->get_field_id( 'instagram_url' ); ?>">Instagram: </label></strong><br/>
<input type="text" id="<?php echo $this->get_field_id( 'instagram_url' ); ?>" name="<?php echo $this->get_field_name( 'instagram_url' ); ?>" value="<?php echo esc_attr( $instagram ); ?>" />
</div>
<div>
<strong><label for="<?php echo $this->get_field_id( 'pinterest_url' ); ?>">Pinterest: </label><br/></strong>
<input type="text" id="<?php echo $this->get_field_id( 'pinterest_url' ); ?>" name="<?php echo $this->get_field_name( 'pinterest_url' ); ?>" value="<?php echo esc_attr( $pinterest ); ?>" />
</div>
<div>
<strong><label for="<?php echo $this->get_field_id( 'youtube_url' ); ?>">Youtube: </label></strong><br/>
<input type="text" id="<?php echo $this->get_field_id( 'youtube_url' ); ?>" name="<?php echo $this->get_field_name( 'youtube_url' ); ?>" value="<?php echo esc_attr( $youtube ); ?>" />
</div>

</p>
		<?php
	}

	public function update( $new_instance, $old_instance ) {
		$instance                  = $old_instance;
		$instance['title']         = strip_tags( $new_instance['title'] );
		$instance['facebook_url']  = strip_tags( $new_instance['facebook_url'] );
		$instance['twitter_url']   = strip_tags( $new_instance['twitter_url'] );
		$instance['instagram_url'] = strip_tags( $new_instance['instagram_url'] );
		$instance['pinterest_url'] = strip_tags( $new_instance['pinterest_url'] );
		$instance['youtube_url']   = strip_tags( $new_instance['youtube_url'] );
		return $instance;
	}

}

function wnc_register_social_media_widget() {
	register_widget( 'wnc_social_media_widget' );
}

add_action( 'widgets_init', 'wnc_register_social_media_widget' );
 

 

2. Add the following lines to your style.css stylesheet

 


.wnc_social_media_widget li {
	list-style-type: none;
	display: inline;
	padding: 5px;
	font-size: 1.2rem;
	width: 100px;
}
.wnc_social_media_widget .wnc_smw_fb a:before {
    content: '\e093';
    font-family: 'ETmodules';
}
.wnc_social_media_widget .wnc_smw_tw a:before {
    content: '\e094';
    font-family: 'ETmodules'!important;
}

.wnc_social_media_widget .wnc_smw_in a:before {
  content: '\e09a';
    font-family: 'ETmodules'!important;
}

.wnc_social_media_widget .wnc_smw_pi a:before {
  content: '\e095';
    font-family: 'ETmodules'!important;
}

.wnc_social_media_widget .wnc_smw_yt a:before {
  content: '\e0a3';
    font-family: 'ETmodules'!important;
}

 

Make sure to save both files. Head over to the widgets area of your WordPress install and head down until you find your brand new Social Media Widget. It’s simple to use. Just find your unique identifier for each social media link you want to use (for example; https://facebook.com/wildnotioncreative the unique identifier would be the wildnotioncreative part). If you don’t have a particular social media channel, no sweat! Simply leave it blank.

 

Keep in mind that this code only works for the Divi theme + Divi child themes. It can be adapted to work with other themes however, that will take a little PHP and CSS knowledge. Let me know if there is a particular theme you would like to see this work for and I may be able to help.

Happy coding guys!