Add Snapchat to Simple Social Icons

Snapchat is taking the world by storm. I only just started using it myself earlier this year, and desperately wish I had started months/years ago. Being able to catch an ‘unedited’ glimpse into someone’s life is kind of awesome, and for a travel blogger like myself, it also invites people in to see a world that maybe my followers haven’t yet seen with their own eyes (in hopes of inspiring them to say, “Heck yes, I’m booking a ticket tomorrow!”.

I’ve had an increasing number of client requests to add Snapchat into the social media icons displayed on their websites, and since quite a few social media plugins haven’t integrated Snapchat into their programming yet, I thought I would get a jump on everyone else and show you how to add it to the Simple Social Icons plugin.

Ghost icons in above graphic made by Freepik from www.flaticon.com is licensed by CC 3.0 BY
Simple Social Icons is one of the top social media icon plugins in WordPress and can be used with any theme. I use it exclusively for all all my clients as it allows them to go back through and add more accounts quickly if they choose to without having to contact me to do it for them. The plugin comes with a variety of social media channel options, including Bloglovin’! It unfortunately does not have Snapchat, but adding the capability is easy enough if you follow the steps below.

**PLEASE NOTE: If you’re not comfortable with editing your functions.php file, please do not attempt this tutorial. You can cause the ‘white screen of death’ error if you don’t copy and paste the coding below properly (even missing the tiniest little comma will throw an error).

It took me a while to find an online icon provider that offered the official Snapchat icon, and Ionicons pulled through for me. After I found the icon I was looking for, I added the below code into my functions.php file to register Ionicons into my theme files.

//* Enqueue Ionicons
add_action( 'wp_enqueue_scripts', 'bg_enqueue_ionicons' );
function bg_enqueue_ionicons() {
	wp_enqueue_style( 'ionicons', '//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css', array(), CHILD_THEME_VERSION );
}

Once that was added, I needed to go in and manually add Snapchat into Simple Social Icons so that it appears under the widget section so that my clients can add in their own URL. We unfortunately have to add and edit all the SSI simple_social_default_glyphs coding for this to work. Don’t worry, it’s not as bad as it sounds. Add the below to again to your functions.php file underneath your ionicons coding.

add_filter( 'simple_social_default_profiles', 'custom_simple_social_default_profiles' );
function custom_simple_social_default_profiles() {
	$glyphs = array(
			'bloglovin'		=> '',
			'dribbble'		=> '',
			'email'			=> '',
			'facebook'		=> '',
			'flickr'		=> '',
			'github'		=> '',
			'gplus'			=> '',
			'instagram' 	=> '',
			'linkedin'		=> '',
			'pinterest'		=> '',
			'rss'			=> '',
			'stumbleupon'	=> '',
			'tumblr'		=> '',
			'twitter'		=> '',
			'vimeo'			=> '',
			'youtube'		=> '',
		);
$profiles = array(
			'youtube' => array(
				'label'   => __( 'YouTube URI', 'simple-social-icons' ),
				'pattern' => '<li class="social-youtube"><a href="%s" %s>' . $glyphs['youtube'] . '</a></li>',
			),
			'instagram' => array(
				'label'   => __( 'Instagram URI', 'simple-social-icons' ),
				'pattern' => '<li class="social-instagram"><a href="%s" %s>' . $glyphs['instagram'] . '</a></li>',
			),
			
			'twitter' => array(
				'label'   => __( 'Twitter URI', 'simple-social-icons' ),
				'pattern' => '<li class="social-twitter"><a href="%s" %s>' . $glyphs['twitter'] . '</a></li>',
			),
			'snapchat' => array(
				'label'   => __( 'Snapchat URI', 'simple-social-icons' ),
				'pattern' => '<li class="social-snapchat"><a href="%s" %s><i class="icon ion-social-snapchat"></i></a></li>',
			),
			'pinterest' => array(
				'label'   => __( 'Pinterest URI', 'simple-social-icons' ),
				'pattern' => '<li class="social-pinterest"><a href="%s" %s>' . $glyphs['pinterest'] . '</a></li>',
			),
			'facebook' => array(
				'label'   => __( 'Facebook URI', 'simple-social-icons' ),
				'pattern' => '<li class="social-facebook"><a href="%s" %s>' . $glyphs['facebook'] . '</a></li>',
			),
			'gplus' => array(
				'label'   => __( 'Google+ URI', 'simple-social-icons' ),
				'pattern' => '<li class="social-gplus"><a href="%s" %s>' . $glyphs['gplus'] . '</a></li>',
			),
			'bloglovin' => array(
				'label'   => __( 'Bloglovin URI', 'simple-social-icons' ),
				'pattern' => '<li class="social-bloglovin"><a href="%s" %s>' . $glyphs['bloglovin'] . '</a></li>',
			),
			'dribbble' => array(
				'label'   => __( 'Dribbble URI', 'simple-social-icons' ),
				'pattern' => '<li class="social-dribbble"><a href="%s" %s>' . $glyphs['dribbble'] . '</a></li>',
			),
			'email' => array(
				'label'   => __( 'Email URI', 'simple-social-icons' ),
				'pattern' => '<li class="social-email"><a href="%s" %s>' . $glyphs['email'] . '</a></li>',
			),
			'flickr' => array(
				'label'   => __( 'Flickr URI', 'simple-social-icons' ),
				'pattern' => '<li class="social-flickr"><a href="%s" %s>' . $glyphs['flickr'] . '</a></li>',
			),
			'github' => array(
				'label'   => __( 'GitHub URI', 'simple-social-icons' ),
				'pattern' => '<li class="social-github"><a href="%s" %s>' . $glyphs['github'] . '</a></li>',
			),
			'linkedin' => array(
				'label'   => __( 'Linkedin URI', 'simple-social-icons' ),
				'pattern' => '<li class="social-linkedin"><a href="%s" %s>' . $glyphs['linkedin'] . '</a></li>',
			),
			'rss' => array(
				'label'   => __( 'RSS URI', 'simple-social-icons' ),
				'pattern' => '<li class="social-rss"><a href="%s" %s>' . $glyphs['rss'] . '</a></li>',
			),
			'stumbleupon' => array(
				'label'   => __( 'StumbleUpon URI', 'simple-social-icons' ),
				'pattern' => '<li class="social-stumbleupon"><a href="%s" %s>' . $glyphs['stumbleupon'] . '</a></li>',
			),
			'tumblr' => array(
				'label'   => __( 'Tumblr URI', 'simple-social-icons' ),
				'pattern' => '<li class="social-tumblr"><a href="%s" %s>' . $glyphs['tumblr'] . '</a></li>',
			),
			'vimeo' => array(
				'label'   => __( 'Vimeo URI', 'simple-social-icons' ),
				'pattern' => '<li class="social-vimeo"><a href="%s" %s>' . $glyphs['vimeo'] . '</a></li>',
			),
		);
	return $profiles;
}

You can see above that we snuck in the Snapchat code right under Twitter. Hit ‘save’ and then go check out your new little custom coded area within the Simple Social Icons widget! Now as far as your Snapchat address…that one is a bit hard to figure out, but no worries, I’ve got that figured out for you too: https://www.snapchat.com/add/USERNAME

Easy enough right?!