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.

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!

Leave a Comment