Updated November 30, 2016
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:
Learn how to create your first WordPress theme from scratch in my brand new course: View the course.
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.
Here’s how this is done in the Tribes WordPress theme:
As you can see, the function returns an array where each entry has a key and a value. The key (facebook) is used to identify the social site, and the value (tribes_facebook_profile) will be used to access the user’s saved URL for the social site.
At the bottom of the function, the value isn’t simply returned, it’s filtered first. This means that if you have a child theme, you can easily add more social sites by filtering this function.
All of the values have a “tribes_” name prefix. You can search and replace to add the name of your theme there instead.
2. Add a Theme Customizer Section
Next, we need to add options to the Customizer, so users can add their social profile URLs.
To do this, we need to add a section to the Customizer called “Social Media Icons” where users will find the URL inputs. Then we’ll loop through every social site in our array and output a setting and control for each.
There are a few things to note about the code above.
First, when adding the control you simply define the type as “URL” and WordPress will create a URL input for you. Second, there’s a list of if elseif statements for updating the label. This is so each social icon is labeled nicely for the user, like “Google Plus” instead of “google-plus”. Lastly, the priority is incremented by 5 after every setting/control. This is so you keep control over the order in which the social sites are listed.
Now if you check out your Customizer, you’ll see a new Social Media Icons section populated with all of the social site inputs. You can even enter and save URLs at this point.
3. Include Font Awesome
To display the actual icons, we’re going to use Font Awesome. This is much faster than loading images and it will be easier for us to implement.
As stated earlier, we’re using Font Awesome instead of images. To include Font Awesome, download it from their site and include the font-awesome folder in your theme. You’ll only need the “css” and “font” folders included.
Then add the following code to your theme’s function.php file:
This will load Font Awesome from your theme. In particular, it’s loading it from a font-awesome folder in your “assets” folder, but you can move it wherever you’d like.
Additionally, if you already load scripts on the wp_enqueue_scripts hook, you can simply copy and paste the wp_enqueue_style function there.
4. Output the Social Media Icons
The last step is to get the icons the user saved and output them on the site. This can be accomplished with this function:
The function first gets the array of social sites and loops through the theme data saved in the Customizer. If it finds that any of the social sites has a URL saved for it, it adds it to the $active_sites array.
Next, we check if the $active_sites array is empty before moving on. If it has any entries, we output the list and add a list item for each social site saved.
We use the key (tribes_facebook_profile) to access the URL saved by using get_theme_mod, and output that to the link element’s “href” attribute.
For displaying correct icon, we’re creating a $class variable where we create the classes Font Awesome needs. For instance, Twitter would be “fa fa-twitter”. All you need to do is output an icon element with those classes, and Font Awesome will display the correct icon for you.
Social Icons in the WordPress Menu
In this example, many of the functions (and the text domains) use the “tribes” name, so remember to replace them all with names that match your theme.
Now, you can simply use the icon output function anywhere in your theme to output the icons the user has saved in the Customizer.
I usually place it in the header.php file before or after the primary menu function, 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.