How to create a social media menu in WordPress

How to create a social media menu in WordPress with social media icons and links

These days, it’s pretty much expected to link to your social media profiles on your website, and the most common and recognizable way to do so is through social media icons. Unfortunately, there isn’t an obvious way to do so in WordPress, and themes handle this in a variety of methods — some, not at all. In this tutorial, I’ll walk you through how to create a social media menu in WordPress, with social media icons and links, that works for any theme, in any location.

Learn how to create a social media menu in #WordPress for any theme, in any location.Click To Tweet

Step 1: Install the FontAwesome 4 Menus plugin.

How to create a social media menu in WordPress with social media icons and links
Pssst — click on the image above to enlarge!

First, we’ll need a way to display the icons. Go to Plugins > Add New and search for the FontAwesome 4 Menus plugin, then install. Alternatively, you can download it here and upload under Plugins. This plugin not only adds the FontAwesome icon library to your site, it also optimizes your menus where the icons are used so that you can easily hide the text and display the icon only.

Step 2: Create your social media menu in WordPress.

How to create a social media menu in WordPress with social media icons and links
Next, you’ll need to create a menu under Appearance > Menus. You can add your social media to an existing menu, for example, in your primary menu after your pages and categories. Or you can create a new menu just for social media. Use the Custom Link option under Menus to add your social media links. At this point, your social media menu will be just like any other menu — words linking to your social media profiles.

Step 3: Add icons to your social media menu.

How to create a social media menu in WordPress with social media icons and links

To add icons, we’re going to use advanced menu properties in WordPress, which are typically hidden by default. In the upper right corner, you’ll see a tab for screen options; click to expand. Then make sure the boxes for Link Target and CSS Classes are checked. Now you can expand each menu item by clicking the arrow on the right, and you’ll see additional options to add CSS classes and option the link in a new window.

Expand each of your social media links, check the box to open the link in a new window, then add the appropriate CSS class from FontAwesome in the CSS classes box. To find the CSS class you’ll need to use, go to the FontAwesome website and search in the Icons section for the icon you want to use. Click on the icon you want to use, and it will show you a larger version of the icon with the FontAwesome class underneath, starting with “fa-“. For example, the Twitter icon class is “fa-twitter.”

Step 4: Style your social media menu (optional)

How to create a social media menu in WordPress with social media icons and links

If you’re adding your social links to your sidebar, you can add the Custom Menu widget to your sidebar, then choose your new Social menu. It will show a list of your social media links with the icon next to the word. If that works for your needs, you’re good to go!

However, if you’re adding links to an existing menu and want to hide the words, or you want to show just the icons lined up in a row, you’ll need to add a bit of styling. If you’re using WordPress 4.7 or later, CSS editing is now a built-in feature of the customizer. Go to Appearance > Customize and click on the Additional CSS tab.

Add this code to hide the text and show only icons:

To display your icons in a row instead of stacked, you’ll need to find the ID of your menu. Using Google Chrome, right-click on an icon in your social menu and click Inspect. This will show you the HTML code for your site. Look above the highlighted line for the line starting with “ul,” then look for “id=’id-name-here’.” Then add the following code to your CSS:

#id-name-here li {display: inline-block; margin-right: 10px;}

To center your menu, add this code instead:

And you’re set!

P.S. If you want to learn more about menus, join Creative Code Club! You can see this tutorial in video form and also learn how to add new menus to your theme or move existing menus to a different location. There’s also a lesson on how to code a scroll navigation menu! Learn more and join here.

Like this post? You'll love my emails!

Enter your email below, and each week I’ll send you quick + easy tips to help you take control of WordPress.

Meet the author

Hello! I’m Lisa M. Butler, and I help people build better websites. As a WordPress developer, I’ve built more than 100 websites on WordPress. I help my clients take their websites to the next level and teach them how to take control of their online presence. Through my blog, weekly emails, and club, I share that same advice with online creative entrepreneurs and publishers just like you.