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?
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
- 1.4 RESOURCES MENTIONED IN THIS ARTICLE
- 1.5 the 5 Tools I'm using to Get Traffic and Subscribers to Grow my Brand
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:
- 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, 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:
Let me point out 2 quick things here:
- 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.
- 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)
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 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:
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:
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 :)?