How to Add Social Icons to a WordPress [Theme Customizer]

Anil kumar

Here’s an easy way to allow your theme users to add social icons to their menu with the theme customizer. You can also follow this tutorial to add social icons to your own menu, but there’s probably an easier way for that.

What You’re Making

After following this tutorial you’ll be able to use the built-in theme customizer to add icons linked to social profiles in the navigation bar:

hgs-Social

1. Store the Social Media Site Names

First, we’re going to write a function to create and return an array containing the names of the social sites we’re including in the theme customizer.

function my_customizer_social_media_array() { /* store social site names in array */ $social_sites = array('twitter', 'facebook', 'google-plus', 'flickr', 'pinterest', 'youtube', 'tumblr', 'dribbble', 'rss', 'linkedin', 'instagram', 'email'); return $social_sites; }

We’re writing it separately so it can be called again later with our output function. You can reorder the social sites here and add/remove any you’d like.

I don’t like to load images for the social icons because there’s barely any stylistic control, and also I don’t want to load a bunch of images. I prefer to use Font Awesome icons.

NOTE: each of the social sites included are matched with Font Awesome classes. If you add a new site, make sure there is a Font Awesome class or you’ll need to use an image for it later.

2. Add a Theme Customizer Section

We need to create a function that will add a ‘section’ to the theme customizer, and add a ‘setting’ and ‘control’ for each social media site.

This is done first by utilizing the add_section function to create a new section for our social media icons. The section title will appear as the name on the toggle option in the customizer.

For each social media site in our array, we’ll create a new ‘setting’ and ‘control’ which will output the text input where the social profile URLs can be entered.

Here’s what that code looks like:

/* add settings to create various social media text areas. */ add_action('customize_register', 'my_add_social_sites_customizer'); function my_add_social_sites_customizer($wp_customize) { $wp_customize->add_section( 'my_social_settings', array( 'title' => __('Social Media Icons', 'text-domain'), 'priority' => 35, ) ); $social_sites = my_customizer_social_media_array(); $priority = 5; foreach($social_sites as $social_site) { $wp_customize->add_setting( "$social_site", array( 'type' => 'theme_mod', 'capability' => 'edit_theme_options', 'sanitize_callback' => 'esc_url_raw' ) ); $wp_customize->add_control( $social_site, array( 'label' => __( "$social_site url:", 'text-domain' ), 'section' => 'my_social_settings', 'type' => 'text', 'priority' => $priority, ) ); $priority = $priority + 5; } }

We’re first adding the section, and then creating two variables. The first is getting the array created by the previous function we wrote, and the second is setting the priority for each control. The priority simply decides the placement and we’re incrementing by ‘5’ for a bit of flexibility.

The foreach statement is going to output a setting and control for every social site in our $social_sites array using the name of the social site for the setting and control each time.

Now if you check out your customizer, you’ll see the options as from the initial screenshot. Pretty cool right?

All that’s left is to create a function that will output the icons linked to the social profiles that your users enter.

3. Include Font Awesome

As stated earlier, we’re using Font Awesome instead of images. To include Font Awesome, simply paste this line of code into your header:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

You could otherwise hook its output to wp_head with a child theme, or use a callback provided by the parent theme if available.

4. Output the Social Media Icons

Now you need to output the icons linked to the urls given in the customizer. That can be accomplished with this function:

/* takes user input from the customizer and outputs linked social media icons */ function my_social_media_icons() { $social_sites = my_customizer_social_media_array(); /* any inputs that aren't empty are stored in $active_sites array */ foreach($social_sites as $social_site) { if( strlen( get_theme_mod( $social_site ) ) > 0 ) { $active_sites[] = $social_site; } } /* for each active social site, add it as a list item */ if ( ! empty( $active_sites ) ) { echo "<ul class='social-media-icons'>"; foreach ( $active_sites as $active_site ) { /* setup the class */ $class = 'fa fa-' . $active_site; if ( $active_site == 'email' ) { ?> <li> <a class="email" target="_blank" href="mailto:<?php echo antispambot( is_email( get_theme_mod( $active_site ) ) ); ?>"> <i class="fa fa-envelope" title="<?php _e('email icon', 'text-domain'); ?>"></i> </a> </li> <?php } else { ?> <li> <a class="<?php echo $active_site; ?>" target="_blank" href="<?php echo esc_url( get_theme_mod( $active_site) ); ?>"> <i class="<?php echo esc_attr( $class ); ?>" title="<?php printf( __('%s icon', 'text-domain'), $active_site ); ?>"></i> </a> </li> <?php } } echo "</ul>"; } }

The above function first gets the array with the social media site names. It then checks each to see if any text has been entered. If the control does contain text, it is stored in the $active sites array. Now we’ve got an array with just the social sites being used we can output.

The function then outputs the opening tag for the list. Then, for each $active_site, it outputs a link using the data from the control (a url), and since the name of the social site also corresponds to a Font Awesome icon, it reuses the name for the class of the icon.

Then the list is closed up, and you have a function that outputs a list of social icons linked to the social profiles given by your uses in the theme customizer.

Social Icons in the WordPress Menu

You can now use the my_social_media_icons() function to output the social icons from the Customizer wherever you want.

I usually place the function in the top right of the menu, but you can put it anywhere you’d like. Also, since we used font awesome, it’s incredibly easy to style the icons in any way imaginable with CSS alone.

Leave a Comment

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.