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 facebookcom 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 facebookcom 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

Free Email Updates
We respect your privacy.

wordpress plugins tutorial

affiliate marketing