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

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:
social icons customizer

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.

Related Posts

39 Comments
  1. Jmes Jmes

    Hi. This tutorial is great. I add it under my header section on wp customizer. Is it possible to add something like “Enable/Disable” option for this feature? I mean in the wp customizer you will choose enable or disable social media icons. Default is disable and when you choose enable, the social media will display on the customizer.

    Thanks,
    James

    • Sure, you could add a radio button setting/control pair to the social media icon section in the Customizer. Then, in the function where you output the social media icons, you would use get_theme_mod() to check if the icons have been disabled, and return without any output if they have been disabled.

  2. Jeff Jeff

    I have put all of this code into my functions.php just to test it out. Everything works fine, and I even got to see the options in the customizer, but as soon as I add the last bit of code I get: Parse error: syntax error, unexpected end of file in, for the last line of my functions.php.

    • Hey Jeff,

      Sorry about that – the closing curly brace (}) was missing at the end of the function. It’s added now.

  3. Maninder Maninder

    How do i call the my_social_media_icons() inside my header.php or footer.php file?
    I am new at this.

    • You can add it into either file within opening and closing PHP brackets like this:

      < ?php my_social_media_icons(); ?>

      • Maninder Maninder

        It worked!
        Thanks Ben!
        The social media icons appeared as a vertical list.
        Is it possible to override the css so that the social icons appear as a horiziontal list ?

        • No problem 🙂

          You’ll need to write your own CSS to style the icons once added to the page. To get you started, setting the list items to “display: inline-block;” will make them display in a row instead of a vertical column.

  4. Highly Recommended!

    Great work by Ben. I must say that you have done an awesome work for Social media icons.

    Wish you good luck in Future. May you work more and shine ever.

    Thanks,
    Umair

  5. Nick Nick

    Excellent and perfect, thanks

  6. Ben…. This is great! Thanks for sharing. 🙂 I have been meaning to dig into the customizer and this is the perfect excuse to check it out.

  7. Francesco Francesco

    So useful…..great work.

  8. Hi!
    Thanks for the post, good job and well explained. I just find that for the email input there’s a problem with the format, becausse it’s not a URL.

    It returns an empty string because it’s adding ‘http://’ before the email address.

    Any way to solve it? I just don’t find a way.

    Thanks in advance.

    • Hi Ibán,

      Thanks for the notice, I’ll update the code for this.

  9. Ron Madriz Ron Madriz

    Did something change in PHP? I’ve followed the steps to the T and oddly i get a fatal error that it cant find the function social_media_array();

    • The function social_media_array() doesn’t exist in the code here, but there is a function named my_customizer_social_media_array(). Double-check that your naming is consistent throughout your code.

  10. Guy Guy

    Great!!!!!
    Works like a charm 🙂

  11. This was super helpful! Great tutorial!

    I do have one problem. the email field keeps adding http:// in front of it so that whenever it gets clicked it opens the email program but the “To” field is blank.

  12. Marcus Jackson Marcus Jackson

    Hey Ben, I ran into a small typo in your code. When $class is outputted, the first letter is uppercase. I used strtolower($class) to make sure this didn’t happen.
    Just letting you know.
    Thanks for the code.

  13. Gaurav Singh Gaurav Singh

    Hello,

    Amazing work, but i have an issue. I do not know where to attach the last code as i want the icons to appear in menu.

    • Hi Gaurav,

      I can’t say exactly where to place the output function because it will depend on your theme, but you’ll want to place it somewhere in the header.php file.

      • Gaurav Singh Gaurav Singh

        Thanks Ben,

        I got that…silly of me…

        • 🙂

          I just updated the post today, so it should be clearer now.

  14. Ioannis Papathanasiou Ioannis Papathanasiou

    Hello,

    1, 2 and 3 are placed in functions.php and 4. is placed in the header.php?

    Because when i do it like that my site crashes.

    Am i doing something wrong?

    Thank you in ahead

    • Turn debugging on and check what the error message is. It is most likely a minor syntax error, and the message should give you the exact line with the error to fix.

  15. Ioannis Papathanasiou Ioannis Papathanasiou

    Good morning from Greece,

    thank you for your reply.

    The error message is
    Parse error: syntax error, unexpected ‘}’ in /var/www/vhosts/webstation.gr/httpdocs/bbox/wp-content/themes/webstation/header.php on line 36

    It refers to the } after <?php

    I do not know how to resolve it. The code that is in the { } is exactly as yours.

    Again, thank you in ahead!

    • Okay I see, let me clarify. The fourth part, the “my_social_icons_output()” function, should be in functions.php too. That’s how you define the function. You would then included the function like this in the header.php file my_social_icons_output().

  16. Rob Rob

    I don’t this post got on the board yesterday… I put #1, #2, #3 and #4 in my functions.php file and when I goto the site I get the following error:

    Parse error: syntax error, unexpected ‘social’ (T_STRING), expecting ‘,’ or ‘;’ in /home/content/18/6213018/html/k9pix.com/wp-content/themes/photocrati-pro-v5.0.2/functions.php on line 158

    Which equate to #14 in step 4.

    Can anyone help?

    • Hi Rob,

      I just made an update to the quotes in that line that should fix the syntax error now.

  17. Adrian Adrian

    Hi Ben,

    This is was exactly what I am looking for, everything seems to work no php error and I do have debugging turn on. The only issue is the icons are not showing up. Any help I would appreciate it. Thanks again for a wonderful tutorial.

    • Hey Adrian,

      Double-check that Font Awesome is included in the theme and that the stylesheet is also being loaded. If the icons still don’t show, check the classes on the icon elements and make sure they are being output correctly (ex. “fa fa-twitter”).

      • Adrian Adrian

        Hi Ben,

        Thank you for getting back to me. I fixed but no sure what I did wrong. I am still new to theme WordPress development. Thank you very much.

  18. Rahul Rahul

    Hi Ben,

    Is there a way to display the Link Title in Caps on hover each links ?
    Something like Twitter instead of twitter OR Google + instead of google-plus
    title=””

  19. Adrian Adrian

    Hi Ben,
    Thank you for your tutorial. This is the second time I am using your code in a theme. This time I am creating a custom widget and want to add get_theme_mod in the widget so all that the user need to do is add the URL of the social sites through the customizer section. Then add the widget to the sidebar or footer, etc. Here is the code I am using to output the front in order to display the social icons.

    public function widget( $args, $instance ) {

    echo $args[‘before_wiget’]; ?>

    <?php
    echo $args['after_widget'];
    }
    But I am getting the following error: "ndefined index: before_wiget. "
    Any suggestion on how to fix this issue.

    Thanks,
    Adrian

    • Hi Adrian,

      Got your other comments – I’ll reply to this one here. It looks like the PHP notice is coming from a spelling error in “before_wiget.” Correcting that should fix the notice.

  20. Adrian Adrian

    I looked and relooked over the code and missed the spelling error.
    Thanks, Ben for noticing it.

  21. Vipin Vipin

    Yes Working Fine!

Comments are closed.