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:
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.
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:
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:
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:
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.