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 on 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…)
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 not because I’ve lost my mind, but rather 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. I run a ton of plugins on my blog, so personally, I prefer to avoid adding even more whenever I can.
Ok, let’s get to it! Let’s add social icons to WordPress without a plugin like ninja coders but without messing with code!Tweaking your WordPress website so it looks its best is an ongoing process. Accept the challenge or go home :)Click To Tweet
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?
Here's what we're going to be covering...
- 1 Adding a Facebook Icon to The WP Nav Menu
- 1.1 How do I Add Social Media Icons to the WordPress Menu Without a Plugin? Video Tutorial
- 1.2 How to Add Social Media Icons to WordPress Header and How to Add Social Media Icons to WordPress Footer Video Tutorial
- 1.3 Troubleshooting Icons Not Appearing
So, let’s start with your website’s navigation menu since this is a good place to display social media icons and also because they look pretty cool there.
We’re going to need 2 things to get this job done:
- the social media icon
- the link to the social media page
In fact, let me add that if I could have retitled this, I would have named it:
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, and Facebook it was. But obviously the same steps apply to add any icon you want.
You can also go crazy and add multiple icons to your website’s navigation using this method.
So let’s stop messing around with titles and let’s go get the social media icon first – a Facebook icon, as promised.
Ah. 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:
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.
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)
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).
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).
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.
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).
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).
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).
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).
Step 10: you should now see your social media icon on your WordPress menu (see image below).
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 one 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:
Click the tab to open it up and then tick the box named Link Target (see image below).
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).
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:
- By the way, on a sidenote, do check out the tools I use on my WordPress sites.
Ok, so what happens if you hit an issue? Worry not, for I have you covered:
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.