How to Add Social Media Icons to the WordPress Menu Without a Plugin

Hello it's Hoz here and in this quick video I'm going to show you how to add social media icons to WordPress For this example I'm going to use my test blog which is what you can see here this wonderful thing and for this example I'm going to assume that you want to insert the social media icons in your WordPress menu

My menu my navigation menu is the white bar you can see at the top actually that's the header but the navigation menu is on the right hand side and you can see the links home about me blog contact so typically you would want a social media icon or various just displaying there as if they were menu items and obviously when you click on those social media icons that's going to take you to the or that's going to take the user to the social media property that you want to drive traffic to Ok so I'm going to show you an awesome resource that you're going to want to use over and over again because it's just awesome ok So ok so the first thing we need is we need the icons or the icon let's let's say for this example we're going to set up a Facebook icon that's all we want to do so then obviously you can apply this process to use it to add as many icons as you want it's just rinse and repeat but let's say we want to add a Facebook icon there so the first thing we need is the icon and then the second thing we're going to need is the link okay So and obviously naturally if you have a social icon there you you would expect to it to link to somewhere so I'm going to use the word icon and link interchangeably throughout this ok so the first thing is let's go and find an icon that we can use that obviously doesn't have copyright restrictions and so that we're able to use it and hit the resource that I mentioned before heading over to a website called font awesome dot IO and don't worry I am going to include these links and bottom of the video at the description if you're watching this in YouTube it's going to be in the description if you're watching this on my blog the links will be actually part of the article or I probably put them on leave this video anyway okay so this is font awesome and I really recommend that you visit this website and familiarize yourself because if you're if you're blogging all of you building websites you're gonna need it You can it you're going to love this as a resource okay

So for this example we're gonna go to icons here I will let you come in and obviously explore this at your heart's content but for this example we're gonna go to icons so click on icons in the navigation menu Ironically they don't have any social media icons on their navigation Okay so this takes you to the icons page and here you can see a ton of icons and they've classified them as well web application icons There's an icon for everything really There's a car there's a toilet there's anything and everything that you could wish for accessibility icons great depending on what kind of website you're building hand icons transportation gender and the list goes on and on and on currency icons this is a great place to get icons from and really enhance your website design and experience okay so let's let's get back to what we were doing we're going to go here to the search bar which is just underneath the heading section and in here we're going to face sorry we're going to search for Facebook and this automatically brings up whatever social media icons are available and that match our search and in this case we're searching for Facebook so they have three icons that we can use and if you hover your cursor over these icons you'll see that they D turn green they highlight and you can choose whatever style you want in fact if you we highlight if you hover your cursor over the icon it does get a little bit so you get a sense of what it's going to look like on your website so for this example let's go with that one the Facebook square so I'm going to do is I'm going to click on that I'm not going to take me to the actual page with a Facebook icon lives okay so here I'm going to scroll down a little bit and you'll see here a line of code okay so this code is referencing this icon so all I'm going to do is I'm going to highlight that code right click and copy I'm going to copy that to my clipboard clipboard as you probably know it's just a fancy word for computer memory that's now saved in micro video memory which means that I can paste it somewhere else into a notepad or anything else okay so now we're going to come up to the blog okay and I actually need to be in the in the dashboard for this so you're going to come down to appearance on your menu and then on the second layer menu that pops out go to menus and here you can see the menu items that I have this is where all the elements are stacked home about me blog contact if I just click on the home page there you can see the menu items here on the top right hand side home about me blog contact well that's where they are so what you're going to do here is you're going to go to on the left hand side a where you have these widgets you're going to click on the custom links heading that expands that widget and on the link text you have two input boxes you have a URL and a link text input box on the link text you're going to put your cursor there and just paste ctrl + V or you can right-click and select paste and that is the line of code that we took from here okay so that line of code goes there and here is the URL of whatever you want that icon to link to so in this case it's a Facebook icon so let's say for example in fact I'm just going to link it to the Facebook homepage so I'm going to ctrl + C will copy I'm going to copy that URL www

facebookcom and here I'm just going to paste that ctrl + V okay now I'm going to click on the add to menu button and that's going to add that there and then I'm just going to save the menu go back to now the home page give it a second and just refresh that and there it is you can see here on the menu the top menu there I've got a fantastic social media icon on my WordPress menu how cool is that it and if you click on that it goes to the URL that I inserted and which in this case is the Facebook page so let me let me go back now the one problem here to mention I think it's a problem is that when you or when somebody clicks on the icon the corresponding page then loads where your blog used to be okay so you just effectively lost the visitor you sent somebody away from your blog and you probably don't want to do that so let me let me go back what you probably want to do is have that launched the website or the social media page on a different tab so I'm going to show you a trick here if you go back to your dashboard okay and you open up that custom link what you want to do here is you want that to open up a different tab so here at the top of your WordPress install you'll see something called screen options just click on that to bring that down and then click on link target and then you can bring that up again by clicking the screen options tab it's gone away now and what you'll see here now is that on your menu items on your menu elements here when you open them up like this you have a new tick box that says open link in a new tab that's exactly what we just enable that right now so what I'm going to do now is I'm going to select that because in this case I do want that link when it's clicked to open up in a different tab and I'm going to save the menu let's go back to the blog homepage loading slowly today okay let's refresh that okay so now somebody arrives at the blog they're looking around they go wow this is absolutely incredible then they see the Facebook icon and when they click on that what happens is a new tab opens up now they can see your Facebook page and they can investigate that and see if they like what they see and on the other tab is still your blog and in fact if they if they're done with your Facebook page and they close that out then they can always get back to your blog and obviously to add any more social media icons there you just repeat the process step by step the only difference of course is when you're in front awesome let's go back just use the search bar here to type in other icons so see for Twitter for example they have two icons that you can use and yeah just just enter the social media network that you want to you want to have the icon for and yeah away you go so it's that easy I hope you enjoyed this tutorial if you did then please subscribe to my channel just click on the icon that appears on the bottom right of this video and then that way you'll know every time I release a new tutorial and yeah and if you haven't already head on over to the blog and yeah see if you like what you see

Free Email Updates
We respect your privacy.

wordpress plugins list 2018

affiliate marketing