How to create a Social Icons Menu in WordPress

Create a social icons menu in WordPress within a few simple steps

We have implemented a nice social icons menu in most of our premium WordPress themes. Thereby the social icons from Facebook, Twitter, YouTube and others will link directly to the according social media channels. The social icons menu can appear in the header or in the footer area, that’s dependent on how the social icons menu is defined in the WordPress theme you are using. In this quick tutorial we will guide you how you may create and set a social icons menu.

Step 1: Create a new custom menu for your social menu

Firstly you will have to create a new custom menu. Please navigate to “Appearance => Menus” in your WordPress dashboard. Click on “create a new menu” and enter any menu name you like (e.g. Social Icons Menu) and click on “Create Menu”. Now you have created a new menu under your given name. Please also see How to create a custom menu in WordPress for basic information on custom menus in WordPress.

Creating Custom Menu
Step 1: Create a new custom menu for your social icons menu.

Step 2: Add your custom URL and link text to create menu items

Now you have to insert your social links. On the left side you can see a small box which displays the terms Pages, Custom Links and Categories. Please select Custom Links and add your social channel’s URL (e.g. https://www.facebook.com/MHthemes) and the link text (e.g. Facebook) – those two are essential for the social icons menu to be displayed. When you click on “Add to Menu” now, your just created menu item will show up under Menu Structure.

You can now go ahead and create other menu items which you would like to display. According to your input, the theme automatically displays the correct icon of the social network. Currently our themes support the following social media channels: Behance, Dribbble, Facebook, Flickr, Google, Instagram, LinkedIn, Pinterest, Reddit, Soundcloud, Tumblr, Twitter, Vimeo, Xing and YouTube.

Add Custom URL
Step 2: Add your custom URL and link text to create menu items.

Step 3: Select the right theme location for your social menu

You are almost done. Just a few more steps. Now you have created a new menu and added custom menu items linking to your preferred social media account. In this next important step, you will have to assign your social menu to the pre-defined menu location of your WordPress theme. Under Menu Settings, please select the appropriate theme location (e.g. Footer Social Icons, Header Social Icons, or else – depending on the theme you are using). Now click on “Save Menu”. Your social menu is now being displayed on your website.

Select right menu location
Step 3: Select the right theme location for your WordPress social icons menu.

Some optional fine tuning for your social menu

Open social menu items in a new tab

When someone clicks on your social icons, the linked website will open on the same page by default. If you want them to open in a new tab, click on “Screen Options” on the upper right corner of your WordPress dashboard. Activate the checkbox Link Target and hereupon another checkbox will appear inside the custom menu items you have created saying Open link in a new window/tab (see screenshot further below). Please check this box and your social icons will be opened in a new tab. For a full tutorial, please see: How to open WordPress menu items in a new tab.

Social Link Target
You can choose to open social menu items in new tab.

Adding a title attribute

When you have created your custom menu items you’ve added your social account’s URL as well as a link text. You may now also add a title attribute which can be good for SEO purposes. To do so, simply open your menu item and add a title attribute (e.g. Follow us on Facebook). This title attribute will show as soon as someone hovers over a social icon in your social icons menu.

Adding Title Attribute
Check option to open link in new tab and add title attribute for SEO purposes.

What if your WordPress theme does not support a social icons menu?

In case you are using a WordPress theme which does not give you the option to display a social icons menu, you could try to use a plugin to display social icons which link to your social media channels. To find a suitable plugin, please see the WordPress Plugin Directory and search for an appropriate plugin which is updated on a regular basis and well supported.

In case you are familiar with coding, you could of course also implement this option by yourself by following suitable tutorials. As an alternative you could purchase one of our premium WordPress themes that supports a social icons menu out of the box.

Share this with your friends

5 Comments

  1. I have created the social menu but the social icons are not showing. Instead of Facebook, Twitter and YouTube it just shows 3 RSS icons.

    • Hi Brad, this is because you’re not linking to the social media profiles, but to pages on your website instead. You need to enter the correct URLs of the social networks and the social icons will be displayed out of the box, unless the social network isn’t supported, but that’s unlikely.

    • I had this issue as well, you have to make sure you create a new menu and label it Social or whatever and then choose the options for header, footer, social, etc. Then add the correct links to the social profiles, for example http://www.facebook.com/thisismypage in case of Facebook. Save the menu, refresh the page and it should work.

  2. Hi, for the social icons on the top bar, I’d like them to open in a new window when clicked. Where would I go to do that? Thanks so much, Lee

Leave a Reply to Lee W. Cancel reply

Your email address will not be published.


*