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.)
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
Edit 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:
background-image: url(images/twitter.png) !important;
background-repeat: no-repeat !important;
margin-left: 100px !important;
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: