How to Add Social Media Icons to The WordPress Header or Footer
Articles Blog

How to Add Social Media Icons to The WordPress Header or Footer


Hi it’s Hoz here with a quick video tutorial and this is actually a continuation of the how to insert a social media icon in your WordPress menu. I wanted to show on this video how you would do that if you wanted those social media icons in the header or for example you wanted the social media icons in the footer – it’s exactly the same process. I recommend that you go back and watch that video first. I’ll put a link to it below the description on this video if you’re watching this in YouTube and yeah but I’ll go through that step here anyway. And so the first thing you want to do is a what we covered in the last in the last video in fact let me go back to the beginning here do watch that video first because it does talk about this in detail but you’re going to go to font awesome IO and I will put a link to that under this video and here you’re going to click on icons then you’ll slow scroll down a little bit and here you’re going to search for the icon that you want. So in this case let’s let’s do Facebook again why not. Okay so I’m gonna click on Facebook square this is the icon that I want I’m going to highlight the text sorry the the link this is the link that references this icon I’m going to copy by doing ctrl C now in WordPress you have two choices if you’re comfortable doing so you can edit your theme code to insert that line that line the either in your header section or in your footer section; if you’re not comfortable doing that then here’s what I suggest I suggest that you use a plug-in that enables you to insert code in the header or the footer of your WordPress blog. So we’re going to do the plug-in we’re here because there are so many things that are literally hundreds of thousands of themes if not more and themes are different so I can’t talk about one specific theme if I show you how to do the my theme it’s probably not going to apply like for like well it might not apply it might not be the same on your theme okay? So let’s do the plug-in way and that way we we can help everyone. So go to the plugins link here on your on your dashboard menu and then click on add new and I’m going to recommend that you use a plug-in called headers and footers and the name is quite explanatory actually. This is it: insert headers and footers. Okay so let’s install that and then activate. Okay and here we are in the headers and footers settings. Okay and you’ll notice here that on your WordPress menu if you scroll down you’ll see a section called insert headers and footers inside your settings it’s a sub section so that’s how you get to to this plug-in okay? So let’s say that we want to insert the code in the head in the header we just paste in the line that we took from here and let’s also insert it in the footer okay and okay so let’s let’s click on save. Now let’s go back to the blog. I’m going to refresh that and see what happens okay. So that’s inserted and then if you can see that that little Facebook icon there the social media icon there it’s in the very top left and obviously this going to some CSS is needed to style that and if you want it down on the left or so on and but it has inserted the social media icon into the WordPress header which is what we wanted to do. Obviously what color you want that icon to appear and where on the header you want it to appear it’s going to be down to styling down down to your own preference and if we scroll all the way down to the footer you can see the same thing here. You’ll see in the bottom left here the very bottom left you’ve got a Facebook icon there and likewise if you want that social media icon in your footer to be aligned somewhere else or to show or display differently you’re going to have to manipulate that with CSS and also you’re going to want these social media icons to link to the corresponding social media page again that’s something that you’re gonna have to do in code so you would basically wrap this code in a h ref – in fact let me show you how to do that. Let’s open up a new post and in here let’s type for example let’s type the word Facebook in there I’m going to highlight that I went to HTTPS facebook.com I want that to open up in a different tab okay. So I’ve got a bit of text here that is actually a link that links out to facebook.com and opens that up in a different tab. What I’m going to do is I’m going to click on the text tab here in the individual in the editor and here where the text Facebook is I’m going I’m going to actually replace that and paste in the the the line of code that references the icon. I’m going to select it all copy I’m going to go back to insert headers and footers and you’ll replace that and let me replace the code in the footer as well and save that okay. So we go back to the home page of the blog now and refresh that what you’ll see is that if we let that catch up if we click on that icon that now opens up Facebook in a different tab. So effectively those social media icons now in the header and in the footer and now hyperlinks okay. So that’s how you insert a soial icon in the header or in the footer of your WordPress install.

13 thoughts on “How to Add Social Media Icons to The WordPress Header or Footer

  1. If the font awesome icon shortcode doesn’t work for you on your theme, check this video out: https://www.youtube.com/watch?v=a4GHGglM5o0

    Some people experience issues and font awesome does provide a help page with some solutions to the various issues that different people may experience. If you click the link and watch the troubleshooting video, I give 2 tips that may help fix your particular issue as well as a link to a bigger resource with more fixes.

  2. Thank you very much for this video 😀 this is exactly what I needed.

    Unfortunately, I still seem to have a problem! 

    Im using Lay theme (don't know if the issue might be with the theme), copied your exact steps, used the link provided by Font Awesome, created the new menu link and published. but when I refresh my website, the icons won't show 🙁

    Im wondering if the problem could be because I'm not a member of Font Awesome or is it the Lay Themes?

    Thank you very much!

  3. If you are going to use a person with an accent, at least have him speak in a way he can be understood.

  4. Hello, thanks for your video.. In your hompage, I can see Show Me Love and the text that's changing below it. Kindly help me to know how to add such a text including image. Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top