9 min read(Last Updated On: November 26, 2017)

Hey. Hoz here. Today’s topic is a good one:

How do I Add Social Icons to WordPress Without a Plugin?

I’m going to show you an awesome way to add social icons (and links) to various places in your WordPress website. Also, I will be sharing with you a fabulous resource that you’ll want to use time and again (just you wait and see…)

Tweaking your WordPress website so it looks its best is an ongoing process. Accept the challenge or go home :)Click To Tweet

I may use the words social media icons and social media links interchangeably throughout this article, even though they are different things. If I do this, it’s because we actually want to have both things in place: your social icons will be linking to your social properties.

Now, before I reveal the voodoo, let me point out that you can, of course, use a plugin to get those icons in place, but the danger there is that you can easily start to overload your website with plugins and cause what I call plugin-bloat. And as you can probably work out from the term ‘bloat’, carrying too many plugins can indeed start to slow your website down. I’ll get into this more in different posts as I start to discuss WordPress optimisation.

Ok, let’s get to it! Let’s add social icons to WordPress without a plugin like ninja coders but without messing with code!

First of all, there are a few places you may want to add social icons to WordPress, including the navigation menu, the header, the footer and the sidebar, so I’m going to cover each and every one of those for you.

But let’s start with the most obvious one, shall we?

Let’s Say We Want to Add Social Icons to WordPress Without a Plugin to The Navigation Menu…

So, let’s start with your website’s navigation menu since this is a good place to display social media icons and also because – as you’re about to see – they look pretty cool there.

We’re going to need 2 things to get this job done:

  1. the social media icon
  2. the link to the social media page

In fact, let me add that if I could have retitled this, I would have named it:

Adding a Facebook Icon to The WP Nav Menu

Of course, you can use a twitter icon, or an Instagram icon, or anything else you want. I had to pick one for this example, so bear with me. All you need to do is apply the same steps to add any icon you want.

Moreover, you can add multiple icons to your website’s navigation (with the same steps).

So let’s stop messing around with titles and let’s go get the social media icon first – a Facebook icon, as promised.

Let me throw something here for the newbies: if you’re new to this, then the most common icons to get started with, based (roughly) on popularity are:

  • Instagram
  • Facebook
  • Twitter
  • Pinterest
  • Linkedin

Let me point out 2 quick things here:

  1. that list is not in order. I don’t have the latest stats handy so that’s my own take, but also consider that things move and change fast on the web, so even if we created a leaderboard, the positions on that leaderboard could well change pretty soon, making our list a little inaccurate.
  2. as above, things change fast on the web and new social media platforms may emerge and hit the top 5 by the time you’re reading this, so please use the above list as a guide only. On that very note, Snapchat is making big wave right now, so you would definitely want to add that one if you have a presence in Snapchat. Ultimately, add the social media icons that represent the social media properties that you are currently using, as long as you want to send visitors to them, even if some of those are a little obscure right now.

Ok, so we’ll be using a Facebook icon and a Twitter icon. Let’s go get them.

Step 1: go to fontawesome: click here to visit that page

As you can see on that page:

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Description on fontawesome’s website

Step 2: click on Icons in the navigation menu (see image below)

A screenshot of fontawesome
A screenshot of fontawesome

Step 3: scroll down the page until you see the long search box. Click the search box to place your mouse cursor in it and type the name of the social network who’s icon you want to find, then you’ll see the available social media icons that match your search pop up underneath. In my example, I typed in Facebook (see image below).

fontawesome search box screenhot
fontawesome search box screenhot

Step 4: hover your mouse cursor over the style of icon you want to use and click it to select it – it will turn green (see image below).

fontawesome selected icon screenhot
fontawesome selected icon screenhot

Step 5: this will take you to a new page where the icon ‘lives’. On this page you will see a snippet of code (see image below). Highlight the code and copy it to your clipboard (that’s a neat way of saying computer memory) by either right-clicking and then clicking on copy on the popup menu or by holding down the control key on your keyboard and then hitting the c key. Ok, maybe best not to hit it – press it instead. Doing this will copy the highlighted text to your computer memory, ready for use in the next step.

fontawesome select code screenhot
fontawesome select code screenhot

Step 6: now head on over to your WordPress blog. This is where we get to add social icons to WordPress without a plugin so hang on to your pants because this is the the secret! Log in, then hover your mouse cursor over Appearance on the navigation / control panel and then click on Menus on the second-layer menu (see image below).

wp dashboard appearance menus setting
wp dashboard appearance menus setting

Step 7: now, in your menu (which you should have set up already) click on the Custom Links panel on the left of the main screen to expand the widget, where you’ll see 2 input fields where you can enter a url and text (see image below).

wp menu custom links
wp menu custom links

Step 8: now, the URL field, enter the URL (web address) of the social media property you want the icon to link to (i.e. yours) and then, in the link text, paste the code you copied from fontawesome and click the Add to Menu button (see image below).

social media icon added in wordpress menu
social media icon added in WordPress menu

Step 9: you should now see that new menu item in the main screen, where the navigation elements are stacked. Go ahead and click the save button to make that change stick (see image below).

wp menu custom link save
wp menu custom link save

Step 10: you should now see your social media icon on your WordPress menu (see image below).

WordPress menu with social media icon added
WordPress menu with social media icon added

And that’s it! Now you have a step by step guide to add social icons to WordPress without a plugin. This is exactly how I do it. Just rinse and repeat the process to add the rest of your social icons to your website menu.

But before we get too excited, let me point one thing that I find to be an issue and then let me tell you how to fix that.

Here’s the thing: when you click that lovely new social media icon on your WordPress menu, it loads the page that you link to (which should be the corresponding social media page) in the same window. In other words: it replaces your blog! Unless you have a 1 page website that does nothing but redirect people to one of your social properties, then I cannot think of a good reason why you’d want to load the target page in the same window. So, we – in this case – want the social media icon to load the social page on a new separate tab. So let’s see how we do that:

How to Make The Social Media Icon Open up a New Tab

In your WordPress dashboard, scroll all the way up and look at the top-right side for a tab named Screen Options. Here’s what it looks like:

wp menu screen options screenshot
wp menu screen options screenshot

Click the tab to open it up and then tick the box named Link Target (see image below).

wp menu screen options link target screenshot
wp menu screen options link target screenshot

And, finally, scroll back down to your menu element and click the widget heading to open it up, then you’ll see that a tick box has appeared with the words Open in a new tab next to it. Tick that box and then click save menu (see image below).

wp menu screen options load page on new tab screenshot
wp menu screen options load page on new tab screenshot

Now, when a visitor clicks the social media icon on your WordPress menu, a new browser tab will open up and load the social media page. Fixed!

Now, let me show you how to do this, step by step, with my look-over-my-shoulder video training.

How do I Add Social Media Icons to the WordPress Menu Without a Plugin? Video Tutorial

And finally, let me show you how you can use this process to:

How to Add Social Media Icons to WordPress Header and How to Add Social Media Icons to WordPress Footer Video Tutorial

Troubleshooting Icons Not Appearing

If you run into any issues, check out this guide on what to do if Font Awesome icons don’t appear.

RESOURCES MENTIONED IN THIS ARTICLE

Here are all the links you’ll need to get this done:

  • get your social media icons here: www.fontawesome.io
  • a WordPress blog or website
  • Web hosting. I use these 2 guys:
  • additionally, to insert the social icons in the header or footer, you’ll need:
    • headers and footers WordPress plugin – go here to search: WordPress

To watch my quick video on my recommended hosts (and why I recommend them) click this link: WordPress recommended hosting UK and US

Please Share This Content
Hey, I would really appreciate it if you share this content with your friends and followers :)?