Social Media Icons are a must-have for any web site these days. But adding them attractively to a theme can be a challenge. Here’s a very simple way to add clickable Facebook, Twitter, Linked-In and other social icons to the WordPress navigation menu using just your images and CSS.
Important Note: I’ve found that if your theme is already using background images on the menu, you might have issues with the code below.
Another Important Note: The many variations of themes and how they style menus means that you’ll need to take the concepts and CSS in this tutorial and implement them on your site. This will probably take a basic to intermediate understanding of CSS. As always, I’m happy to work with you to implement this concept on your site.
If your icons appear but are not clickable… it’s a theme issue. It can probably be solved, but it’s beyond the scope of this tutorial. I’ll be happy to work with you if you’d like some assistance. (You might try changing the CSS selector described below to li.menu-twitter and see if that works for you.)
If the icon disappears when you mouseover it… again, it’s a theme issue. Likely your theme is already using a background image for the menu. In the sample code below, try using “.menu-twitter a” instead. I’ll be happy to work with you if you’d like some assistance. (You might try changing the CSS selector described below to li.menu-twitter and see if that works for you.)
Edit 10/31/2012
There is a new plugin in the WordPress repository that has much of the functionality that I describe below. Have a look here at Nav Menu Images.
Here’s the Video:
Step One: Grab Your Icons
The first thing you’ll need to do is select the social icons you want to use. Iconfinder is my source for icons. Hint: find an icon you like, then click collections to discover coordinating icons for other social sites. Once you have your icons, save them in your theme’s images folder.
Step Two: Add a Custom Link to your Menu
Step Two: Add a Custom Link to your MenuEdit your main menu in the WordPress menu editor. In the Custom link metabox, add the link to your Twitter page and label the link Twitter. Then Add to Menu.
Step Three: Turn on CSS Classes for Menu Items
At the top right, click the Screen Options tab, and check on CSS Classes. This will enable a new field in the menu options called CSS Classes in which you can put a custom CSS class on each particular menu item.
Step Four: Assign a Custom Class to the Twitter Menu Item
Open the menu item for the Twitter link you just created, and add a custom class to that item. For this tutorial, I’ve called it menu-twitter. This will allow us to address that menu item directly in the CSS.
Note: You don’t have to assign a custom class. Each menu item in WordPress already has its own specific ID. But doing it this way allows the code you create to be portable from site to site. Read more on portability below.
Step Five: Adding the Icon to the Menu
At this point, you’ll have a new item on your menu with the text Twitter that is pointing to your Twitter account. What we’ll do now is remove the text and replace it with an icon using CSS.
Use the following code:
[sourcecode language=”css”]
.menu-twitter {
text-indent: -9999px;
background-image: url(images/twitter.png) !important;
background-repeat: no-repeat !important;
margin-left: 100px !important;
width: 50px;
}
[/sourcecode]
Here’s an explanation of the code:
- The .menu-twitter class is what we added to the custom menu in step four.
- Text-indent pushes the menu label off the screen to the left 9999 pixels so it doesn’t display over the top of the Twitter icon.
- Background-Image puts the Twitter icon as the background of the menu item, which is still clickable.
- Background-Repeat ensures that the icon only displays once.
- Margin-left puts 100 pixels of space between the icon and the rest of the menu. You’ll probably only do this for the first social icon.
- Width restricts the width of the menu item to 50px, which is plenty to display the icon and leave some space for the next one.
Here are the Results
Just repeat this process for each icon you want to add. Your theme might require a bit of tweaking to position the icon up and down, but the above should get you most of the way there. Enjoy!
Making it Portable
The real value of this code is bringing it from site to site with very little effort. Put all your social icons in any web accessible location (like http://yourdomain.com/social) then change the link in the css for the icon to this new location as below:
[sourcecode language=”css”]background-image: url(http://yourdomain.com/social/twitter.png) !important;[/sourcecode]
The result… You can now paste this code unchanged into the css of every site where you want social icons. Then all you have to do is add the custom menu items to make the icons live.
– – – – – – UPDATE 5/31/2012 – – – – – –
Opening Links in a New Window
To cause your menu icon links to open in a new tab or Window, just click on Screen Options and check on the Link Target option.
Doing this will add a new box to the menu item that will allow you to open the link in a new tab or window. See below:
Thanks, Nathan. I’ve always manually coded it. This will make it portable.
Nathan, I just used this here: http://khomesonline.com/the-k-homes-difference/high-quality-standards/ along with (on that page) the peekaboo plugin you recommended for showing “more” content. Thanks!
Thanks Nathan, a very informative article!
One question: I am building a site currently, and having just tried this, my Twitter icon background image isn’t clickable…When I adjust the offset of the indent (to say, 99px instead of 9999px), I see the hyperlink is “following” the text (in this case, the word “Twitter”).
I’m still rather new to WP, and the site is not yet live so unfortunately I can’t this moment share the url with you, but is there something I should look to check, to see why the icon isn’t clickable?
Many thanks,
Mark
Hi Mark, that’s awfully strange. Could it be that you added the URL in the “Label” area of the custom menu item rather than or in addition to the URL area?
Hi,
I got the image added, but I can’t get rid of the word “twitter” on the Footer menu.
This is the code I used:
.footermenu-twitter {
text-indent: -99999px;
background-image: url(‘http://rebelliousaddictiontwo.com/wp-content/mediafiles/2012/05/twiitersupersmall.png ‘) !important;
background-repeat: no-repeat !important;
margin-left: 100px !important;
width: 50px;
}
What did I do wrong?
Heather, that’s a strange issue. I’ve tried a number of things viewing your page in Firebug and was unable to make it work either. It seems to be a theme-related issue, but I can’t figure out what’s causing it in the CSS. Very odd indeed.
Hi Nathan
Have the same problem as above wanting to place a facebook link.
No link on image and the word ‘facebook’ is still to the left of the icon.
If I replace background-repeat: no-repeat !important; with
background-repeat: repeat-x !important;
I get 4 icons and the hover link works over the left 3 icons.
This is the original css I used
.menu-facebook {
text-indent: -9999px;
background-image: url(../images/facebook_32.png) !important;
background-repeat: no-repeat !important;
margin-left: 100px !important;
width: 50px;
}
.menu-facebook a:hover {
background: #f5f5f5 !important;
}
Using wordpress 3.3.2 (no plugins)
Any solution? as I would like to add other buttons
Regards
Graeme
Hi Nathan left a message on your social icons in the wordpress navigation menu tutorial blog
Thanks Graeme
Hi Graeme,
I noticed the other day that some themes (notably newer iThemes Builder child themes like the Expansion series) have an issue with the code in this post since te code for the menu uses a background image already. Here’s another solution on the Builder Community site that might help:
http://ithemesbuilder.com/how-to-add-a-items-to-builders-navigation-menus/
Hi Nathan,
You should probably update the OP with this information, as I think this is pretty common with many of the newer themes and it took me a while to figure out.
Thanks for the original tutorial though, saved a lot of time.
Nathan:
Many, many thanks. I’ve been looking for a way to add the icons and after going down a lot of blind alleys I found your instructions and it works perfectly.
All I did was add a top margin to line up the icons.
Thanks so much!
Chuck
Hi Nathan – being new to WordPress – can you please explain how to add a top margin? Mine are not lining up.
Thanks!
Lisa
Hi Lisa. Thanks for the comment. Adding a top margin is not a WordPress issue per se, it has to do with the CSS in your theme. You will need to add the CSS code to the styles.css file in your theme to get the top margin added. Feel free to contact me by hitting one of the gray circular links at the top left if you need more help.
Hi Chuck. I’m so glad this tutorial was helpful to you. That’s why I put them out there. It’s always an encouragement to me when people find them useful. Thanks for taking the time to comment.
Hi – is there a way to open a new screen when a user clicks on one of the icons? Right now Twitter or Facebook are opened in the same screen.
thanks!
Hi Gianna. Yes, absolutely you can. There is a setting for this in Screen Options. I’ve updated the post with that information and screen shots. Hope that helps!
Hi Nathan-
First of all THANKS! I searched high and low for this information and this was so helpful! Quick question for you – my primary menu has a hover of #373737. When I added the twitter icon as you suggested, the hover covers up the icon when I scroll over it. How do I fix this?
Also – I love this comment plugin you have. Which is it?
Hi Angela. Can you post your URL or email it to me (nathan at brilliantly.net) if you’d rather not post.
The comment plugin is Comments Plus from WPMU. I’m using it on several sites and have found it to be really powerful.
Awesome, I will definitely look into that plugin, it’s so seamless! Is it offered via the wordpress website or do I have to download it elsewhere?
The site is a test site right now. I’ve had it blocked from the public but I just made it public so that you could take a look: http://www.happeningnearyou.com/
Thanks!!
Angela, the plugin part of the WPMU membership which is normally quite expensive annually ($400-ish). I have a post where I talk about how to getting it significantly cheaper. Part of the deal is gone, but the $125/yr deal is still working.
As far as the site, you’ll need to edit the styles.css of your child theme on line 792 to remove the #474747 color.
Thanks!!!
Morning.
I guess my wife and I are just not quite as good as we thought we were.
We followed all directions. (we think)
But still no workie 🙁
http://www.link393.net/mm
We were trying to get the facebook word to be a facebook icon.
Would you mind giving us a helping hand?
MUCH THANKS!!!
Darrick
awesome m8 been wanting to add a fb icon on my websites menu but didnt know how
Hello,
I am also a newbie at wordpress and followed your directions to the t. The icons shows up so victory there, but the icon is getting cut off, is there something I should change to make it fit. Or do I need to resize the icon…. ??????
Rasheedah, yes you need to resize the icon. The code itself will not resize the icon so make sure it fits the dimensions of the menu.
Ok, Thank you so much will give it a try!
I’ve used your code works great EXCEPT the theme has mouse over and so everytime i move my mouse over it the icon disappears. I cannot find where the code is in the theme. Can you help, the site is suppose to go live tomorrow
Hi Jim… the issue is that your css has a hover effect (a lighter brown) already in place for menu items and since one is not defined for the new facebook style, it’s reverting to the plain menu style and the icon disappears.
Add this to your style sheet and it should work:
[sourcecode language=”css”]
.menu-facebook :hover {
background-image: url("http://treehouse.is/wordpress2/wp-content/uploads/2012/04/facebook25.png"😉 !important;
background-repeat: no-repeat !important;
margin-left: 10px !important;
text-indent: -9999px;
width: 25px;
}
[/sourcecode]
This is basically a duplicate of everything in the .menu-facebook style but now it will also appear when you hover.
Do the same thing for your twitter style.
Hey,
Im doing something wrong, but no idea what 😉
see: http://www.motorsportfoto.nl/
the last “button” (the empty one) is for Twitter
When I add the code to style.css the text (Twitter) disappears, but the image isnt there 🙁
This is the code, which is placed in the “/* begin Menu */ /* menu structure */” section of “style.css”:
******************************
.menu-twitter {
text-indent: -9999px;
background-image: url(http://www.motorsportfoto.nl/wp-content/themes/MSF2images/twitter_001.gif);
background-repeat: no-repeat;
margin-left: 100px;
width: 50px;
}
******************************
Could you help me out?
Hi Martijn,
Generally when something like that happens, it’s because the theme’s existing CSS for menu styling is interfering with the new code. I’m happy to help you on a specific use case. I offer consulting for other developers and co-working via Skype. You can read more about that here.
Hey Nathan,
I’ve fixed it 😉
completely different way than yours… and it’s running 😀
so, “thanks” but no help needed anymore…
Martijn Jakobs: How did you do it? I have the same issue too. I was really excited to try this out. Don’t know which codes to tweak in my theme (twenty-eleven) to show the icon.
Thanks Nathan,
with a bit of tinkering the icons now display perfectly.
Appreciate your help.
Karl
This is great! I was so excited to see the icons show up in the menu like you said. However I have some really funky hover issues. I read through all the comments and tried a few things, but still really funky hover that I can’t figure out.
My code is below and the site is cleaneasyfood.com. Can you tell me if this is just a theme issue? I’ve been through so many themes that I can’t change again, so if it is, I will have to move the icons to the footer… I just need to know if it’s something I can easily fix or not. Thanks so much for all the great info!
.menu-twitter {
text-indent: -99999px;
background-image: url(images/twitter.png) !important;
background-repeat: no-repeat !important;
margin-top: 5px !important;
margin-left: 50px !important;
width: 25px;
height: 25px;
}
.menu-twitter :hover {
text-indent: -99999px;
background-image: url(images/twitter.png) !important;
background-repeat: no-repeat !important;
margin-top: 5px !important;
margin-left: 50px !important;
width: 25px;
height: 25px;
}
.menu-facebook {
text-indent: -9999px;
background-image: url(images/facebook.png) !important;
background-repeat: no-repeat !important;
margin-top: 5px;
margin-left: 10px !important;
width: 25px;
height: 25px;
}
.menu-facebook :hover {
text-indent: -9999px;
background-image: url(images/facebook.png) !important;
background-repeat: no-repeat !important;
margin-top: 5px;
margin-left: 10px !important;
width: 25px;
height: 25px;
}
Hi Andrea. Sorry it’s taken me a bit to respond. I only just saw your comment. Yes, you have an issue with the :hover on the menu items. Something in your theme’s CSS is bumping heads with the CSS above. If you’d like to schedule a consulting appointment, I can likely dig into the code and help you figure out what’s going on. Just let me know.
Hi Nathan, i have added to steps in stage 5 but nothing has changed, i have very little wordpress knowledge any help would be appreciated.
Thanks for the comment, Jim. If you did all the steps above and nothing changed, it’s definitely theme related. And with so many themes, it’s hard to say what the problem is without being able to see what you’re working with. Please provide a URL and I’ll give it a quick look.
Nathan great bit of code, my only problem is with my theme the icon isnt clickable ?
James
James, this issue is addressed in the information above the video. It’s definitely theme related.
So many gaps in the explanation. I gave up at 3.33 in the video when you abruptly started coding in some obscure IDE. Not good.
Wow. Umm… Well, I’m sorry you found the explanation difficult. I suppose the tutorial does require some basic foundational knowledge to follow.
I’m not sure what an “IDE” is (other than an antiquated data connection in a computer), but the “obscure” coding you refer to is simple CSS. If you’re planning on doing any kind of theme customization in WordPress, you’ll need to be familiar with its basics.
Best of luck!
Thank you!!! This rocked my world…at least it was the best tip of the week. Great job!!
Awesome Tim! Glad it was helpful.
Hi there,
I’m attempting to do this for a client and the links are not clickable, this is the code to one.
/* social menu bar */
.menu-fb {
text-indent: -9999px;
background-image: url(http://www.stylemethrifty.com/wp-content/uploads/2012/11/FB.png)!important;
background-repeat: no-repeat!important;
margin-left: 550px!important;
width: 34px;
}
Not sure what went wrong?
Would love any advice or input! Thank you,
Angela, this issue is addressed in the information above the video on the post. It’s definitely theme-related.
For those experiencing issues with the text-indent and non-clickable icons, you might try:
1. Updating the given selectors to ‘li.menu-twitter’, ‘li.menu-twitter a’, or ‘.menu-twitter a’. This will further target the navigation items, in the case that more general theme styling is interfering.
2. Changing the text-indent property from ‘-9999px’ to ‘9999px’.
In the case of a client of mine who had come across this tutorial, I had to update the provided selectors with the anchor tag (e.g. ‘.menu-twitter a’), and update the text-indent, and everything worked as intended.
Hi – where exactly (in which field) do I type the code?
.menu-twitter {
text-indent: -9999px;
background-image: url(images/twitter.png) !important;
background-repeat: no-repeat !important;
margin-left: 100px !important;
width: 50px;
}
You add this code in the style.css file of your active theme or child theme.
Nathan! Great article. I did this a couple days ago before finding your article on my website but the icons disappear when I hover over them. I’m very new to this so I read and read and read only to find hover codes.. which I tried but they didn’t work.
I redid the code using the code above but that didn’t solve the problem either. I know I’m missing something obvious but what would your advice be?
Hi Nathan,
Just stumbled across this post. Thank YOU so much for sharing this! Was able to use this code for multiple sites. What a time-saver 🙂
Hi Nathan,
I’m customizing my own blog using Custom-Community theme. I used your tutorial to add social media icons in header menu. It was a great help. However I feel that the space between each icon is too much, I want to reduce the gap but do not know how. I tried adding float-right & padding-0 but it didn’t change anything though CSS validator shows it is correct. Can you please help me out?
I am not technical person and have no knowledge of CSS. Only know how to google for answers till I get them.
This is the example of code I used for 2 consecutive placed icons.
.menu-email {
text-indent: -9999px;
background-image: url(‘http://185.14.185.58/wp-content/uploads/2013/03/email.png’) !important;
background-repeat: no-repeat !important;
margin-left: 100px !important;
width: 50px;
float: right;
padding-right: 0px;
}
.menu-flickr {
text-indent: -9999px;
background-image: url(‘http://185.14.185.58/wp-content/uploads/2013/03/flickr.png’) !important;
background-repeat: no-repeat !important;
width: 50px;
float: right;
padding-right: 0px;
}
The spacing is coming from the width you have in the CSS code there. Change the width to 40px or 35px on each item and the spacing will look better.
How do you get rid of the facebook title next to the icon..
Jen, the CSS declaration “text-indent: -9999px;” should move the text away from the icon as explained above. If this isn’t working, likely you have a theme-related issue. I’m happy to help if you’d like to retain my consulting services. Thanks!
Hello.
Thanks for a good tutorial. You can se the icons, but something else is wrong. The icon is not clickable, it’s like the text is over the icon and when you put the mouse over it appears like a grey box?
This is my code;
.menu-twitter {
text-indent: -9999px;
background-image: url(icons/twitter.png) !important;
background-repeat: no-repeat !important;
margin-left: 100px !important;
width: 50px;
height: 50px;
}
.menu-twitter :hover {
background-image: url(icons/twitter.png) !important;
background-repeat: no-repeat !important;
margin-left: 10px !important;
text-indent: -9999px;
width: 50px;
}
.menu-facebook {
text-indent: -9999px;
background-image: url(icons/facebook.png) !important;
background-repeat: no-repeat !important;
margin-left: 100px !important;
width: 50px;
height: 50px;
}
.menu-facebook :hover {
background-image: url(icons/facebook.png) !important;
background-repeat: no-repeat !important;
margin-left: 10px !important;
text-indent: -9999px;
width: 50px;
}
#page #access li:hover > a {
background: #d8d9d8;
color: #fff;
}
I have tried to get rid of the last hover background: #d8d9d8; thing.. but then it appears to be another problem. My theme is “forever”. Please, can you help me? This is a project for school and this is my last week to figure it out.
Madelen
Great tutorial. Simple but effective – the best kind of coding. I saw others but this was the best. The only thing I did different was keep the text so I changed the indent from -9999 to 50px.
Hi i added 4 social button and it was great but there has one problem
at last one has something weird background i want to get rid of that background but i can’t
get rid of it. how could i fix it?
It could be that you need to move the styling to the li a rather than just the li. It depends on how your theme is doing things. I’m available for consulting if you need more detailed assistance (click the consulting link on the left menu).
Hi! I did it and it work perfectly, the only problem like you said was that the icon was not perfectly positioned. No matter what I do the icon simply doesn´t move down, it’s sticked to the top of the menu bar. Can you recommend me something? I tried with padding, with position.. how can I center it?
Thank you a lot!
.menu-facebook {
text-indent: -9999px;
background-image: url(http://sweetdreamscupcakesycia.com/wp-content/uploads/2013/08/1376756989_facebook.png) !important;
background-repeat: no-repeat !important;
background-position: center-left
backgroung-padding: 0.5em
margin-left: 150px !important;
width: 50px;
}
Hello, love the tut, i am using twenty twelve theme on localhost. the icon is there but it’s not clickable, if i remove the icon the twitter text is clickable, adding the icon renders it not clickable. i followed everything you did.
any suggestions on how to make it clickable.
Thankyou
Mark
Hi Nathan, this looks so interesting but I could not get this to work on my site. I’m wondering if it is because I am not self-hosting my wordpress blog and use the online admin css? My image is saved to my media library. Could you help me please?
This is the code I entered at the end of my css:
.menu-twitter {
text-indent: -9999px;
background-image: url(images/bike-perv-twitter.png) !important;
background-repeat: no-repeat !important;
margin-left: 100px !important;
width: 50px;
}
.menu-twitter a:hover {
background: #f5f5f5 !important;
}
I appreciate your time. I am just getting into css… I know nothing!
Natalia
Hello, thank you for this awesome tutorial.
I have one question – here is my site – http://hamar.coma.lv/, there are two social icons in main menu.
How do I move them on a same level as text and how do I set transparency to hover?
Thanks!
Vadim, unfortunately the answer to your question is specific to your theme. You should probably consider retaining the services of a developer who can assist you.
Hello,
is this also possible for a share button (for the current page where the user is at that moment)?
This is possible, but you’d need to include some kind of javascript that would activate a sharing action. That is far beyond the scope of this post. However, I wouldn’t recommend adding share buttons to the nav bar. Share buttons are much more effective if placed closer to the content itself.
Hi! Thanks for this tutorial, it was super helpful to me! I am so close to having this be the perfect solution for adding social icons to my menu except that I am having one issue. When I add Custom Links to the menu, it causes the menu items above these links to become unclickable. Everything looks good but I can’t click my menu links!
Can you help me PLEASE?
Sounds like a theme related issue. I’m not able to offer customized technical support right now. I’m sorry! Maybe you could reach out to a WordPress developer in your area.
hello..
i have followed your steps and now social networks buttons are showing on my website ..
Thanks for the great information u have provided..
i have one more question how to add social networking buttons below Archieve post?? Please tell me
Glad it worked for you. To add social buttons on a page like you’re describing, it would probably be best to use a plugin like Social Warfare or Sassy Social Share.