I spent a while figuring out how to add social media icons to the menu of the SmallBiz theme, and I hope by sharing it will save you some time. Personally, I have an internal debate over whether or not I want the icons on my nav bar, and I would love to know your thoughts. Once I get someone to my site do I want to lure them away with the party going on over at Facebook? On the other hand the Google+ link or a sign up for my RSS feed via email is a great idea. If you find this post helpful I would love to hear your feedback in the comments.
Enough chat, let’s get down to business. You need a few things:
- Social Media Icons
- The CSS Code
- Enable the CSS option on your custom menus
Social Media Icons
- Use your favorite, or look at IconFinder.com which gives you a huge amount of flexibility for sizing images and picking ones that match your theme.
- I sized the icons on my menu bar at 20 x 20
- Upload the icons to your Media Files. Copy the File URL and paste in in a text editor for use in the next step.
The CSS code:
- Notes: put the code into your Dashboard -> Appearance -> Editor -> SmallBiz: Stylesheet (style.css)
- If you want to rearrange the order, feel free, but you will note that the code for menu-Twitter (margin-left) is slightly different than the following three social icons.
- I used Margin Left 70 so I could center the icons beneath the logo in my header, play with that number to what suits you best.
.menu-twitter {
text-indent: -9999px;
background-image: url(http://www.YourFileURL.png) !important;
background-repeat: no-repeat !important;
margin-left: 70px !important;
width: 30px;
}
.menu-facebook {
text-indent: -9999px;
background-image: url(http://www.YourFileURL.png) !important;
background-repeat: no-repeat !important;
margin-left: -15px !important;
width: 30px;
}
.menu-rss {
text-indent: -9999px;
background-image: url(http://www.YourFileURL.png) !important;
background-repeat: no-repeat !important;
margin-left: -15px !important;
width: 30px;
}
.menu-google {
text-indent: -9999px;
background-image: url(http://www.YourFileURL.png) !important;
background-repeat: no-repeat !important;
margin-left: -15px !important;
width: 30px;
}
Menu
- Go into your Menu’s
- At the top right of the screen click on Options, enable Link Target and CSS enable.
- Along the left hand side you will want to create Custom Links. Put in the url of your first social media location (your Twitter url) and call it something obvious – Twitter.
- Add to Menu
- Go to the right hand side, where you see the list of items in your menu bar, and click on the little triangle in the right next to Custom.
- Put in the CSS name (menu-Twitter)
- Check Open link in a new window (if you want)
- SAVE
- Repeat the process for each social icon you are adding.
I think I made this look easy 
Take a look at the video, as that may be more clear than the writing. Feel free to ask questions, or share your site, I would love to see your work! And let me know, do you think social icons in the navigation bar is a good idea or bad?
About Eileen
Eileen Lonergan is a WordPress website designer who has a concentration in SEO. To learn more about Eileen and see her work visit her website: http://www.EileenLonergan.com
If so, please join over 10,000 people who receive exclusive weekly online business and blogging tips, and get a FREE COPY of my eBook, 10 Steps to Free Website Traffic! Just enter your name and email below:
Article by » Eileen Lonergan
Eileen Lonergan is a WordPress website designer with a focus on SEO. To learn more about Eileen and see her work visit http://www.EileenLonergan.com
Eileen has written 11 articles on Expand2Web
Author Connect » Twitter | +Eileen Lonergan | Facebook |
If you're building a business website these days, you're in luck.
WordPress has revolutionized the ease and power of what a website can do and be. Now you can quickly create a website that is optimized for top search results, and update it yourself whenever you want.
As you'll see in a moment, the SmallBiz Theme is much more than a mere WordPress theme. It's a complete solution for your business web presence including a Website, Blog, Facebook Page and Mobile Website.
Let's take a look at each of these, and how they help you generate new business from the web…
Click to continue...See my disclosure about advertising and affiliate links
{ 42 comments… read them below or add one }
Thank you for this great tip, Eileen — your “how to” articles are always so clearly explained and illustrated. This will be very useful for me.
Thank you Yvonne. I do hope it is useful! Let me know if anything doesn’t make sense and I will help clarify.
Love it, Eileen!!! I also like that you have the icons open in a new window! You’re awesome!!!
Thank you Julie. That is actually an option in the WordPress menu’s dashboard.
I just book marked this thread and know what I will be playing with first thing in the morning. Thank you Eileen!
Thanks Blaine. I am curious to see your finished product. Feel free to tell me if parts of the tutorial need clarification. The video may also help.
Awesome! Thanks Eileen for making this another to do this summer! : )
Ha! I didn’t mean to add to the long list of To Do items! I am curious, do you think it is a good idea to put the icons on the nav bar, or do you think it will tempt people away from a site?
I’m thinking that I would not add them to the menu bar because when I’m on an interesting site (like yours), I explore it using the menu bar. I wouldn’t want people leaving the site. They expect them to be in a sidebar widget or at the bottom and expect to be taken off the site when they’re done going through it. Just my humble opinion…what do you think, Eileen?
We thought you could test it out for all of us! lol
It is interesting that I have picked up a few Twitter followers over the past couple of days, so that could be a bonus. It is an interesting discussion, I appreciate the feedback!
This looks like a fun to-do! I do think the social icons on the nav bar is great for socially connected sites. but, if you are a service type site and your customer is needing a service/product right away I might opt for the icons to be in a less tempting spot. Just my thoughts….
I appreciate your thoughts, they are very tempting right there!
Thanks for this post.You made it very easy to follow.
Terrific! Share your url so we can see your site!
Thank you so much for this great piece, Eileen – just what I needed at this time.
Your site is looking great. I love your logo. Let me know if you get stuck and need any help.
Eileen, we just switched over the new full width SmallBiz Theme and added our social media icons to the navigation bar. You made it super easy!!!
Thank you!!!
Julie
Oh good, thank you!
Hi, Thank you for the great post. When I followed your steps though the image didn’t show up but rather my navigation title (facebook) did. How can i fix this?
Dan, I am sorry you are having trouble. The first step is to upload the Facebook icon to your media file. Go to Media, add new, upload the icon, copy the File url and click save. It will look something like this: http://www.YourWebsite.com/wp-content/uploads/2012/09/facebookIcon.jpg.
Then when you go into your CSS editor add the code
.menu-facebook {
text-indent: -9999px;
background-image: url(http://www.YourFileURL.png) !important;
background-repeat: no-repeat !important;
margin-left: -15px !important;
width: 30px;
}
Make sure that you put in the correct file url for the Facebook image. After you try that, can you let me know if you have success or if you are still stuck we can trouble shoot further.
Hello Eileen,
I recently took on a website for a friend that the theme was developed in Pagelines and then used in Wordpress.
Now I followed your steps but the icons are not showing up, any recommendations. Did I place the CSS menus in the wrong area? It is essentially working but I don’t feel it’s calling my menu.” ” in the css where the icons are documented.
Please help. Thank you.
Kyle
Kyle, I am sorry you are having trouble. I am going to private message you to see if we can get this resolved.
Hello Eileen,
I wrote the css code in my editor page and replaced the url with my saved url but my menu doesn’t show any ‘enable css ‘ button. So if I’d like to put the social links at the bottom of my page , what shall I do .
Please help.
Thank you.
Prapti
Hi Prapti, thank you for asking for clarification. I am not sure why you don’t have enable CSS in the menu – maybe double check, go to the top right page of the menu screen and look for Screen Options. This will give you a drop down menu of choices, enable CSS can be found here, on the second line of options. If that does not work and you want to put the images at the bottom of your page, then you can simply upload the images and in the last line of the upload screen you can place in the link url code. Please let me know if you need further assistance.
Thankyou so much for the quick reply .But I don’t have much space in my menu bar so is there any other way to put social network links in everypage of your website at the same time and once again Thankyou so much
You could hard code them into your page.php file.
thank you
Welcome!
Thanks for this post.You made it very easy to follow.
You are welcome Sudhansu! I am happy that it worked for you.
I just did this, have the menu setup and the images in place..but it is not linking at all? No sure if it is the theme or something I did wrong?
Thank you!
Angela, did you put the url of the social media site into the correct place on the custom menu? It is in the section of the tutorial called Menu. Please let me know if this solves the issue.
If you need a timesaver, or don’t know HTML, Nifty Buttons (http://niftybuttons.com) allows you to pick your icons and then generate the code automatically. Takes just a few seconds.
Chris B
Thanks Chris, that site has a lot of great choices!
Hi Eileen, I’ve just had a go at this one but instead of icons appearing in my nav bar it is just plain writing. any ideas why this could be? I’ve gone over it a couple of times to see if i’ve missed something. I’m probably missing something simple here.
Hi Ollie, I am sorry you are having trouble. Let’s start with the first step, did you put the proper code into the style sheet?
.menu-twitter {
text-indent: -9999px;
background-image: url(http://www.YourFileURL.png) !important;
background-repeat: no-repeat !important;
margin-left: 70px !important;
width: 30px;
}
Make sure that background-image: url(http://www.YourFileURL.png) YourFileURL.png matches what you uploaded into the Media file. If that doesn’t solve it, please let me know.
Hi Eileen,
Thank you for the tutorial, very detailed and educational. I am actually trying to place my social media icons directly above my search button. Although this area is certainly close to the Navigation Menu, it actually is not part of the nav menu. Therefore, I can’t quite get it to work out.
Perhaps you would be kind enough when you have a moment to take a look at my site and location directly above the search button to see what I might need to do to achieve my desired social media icon placement.
Thank you kindly,
David
TreasureValleyBusiness dot com
David, I am not sure which theme you are using, is your search area part of a widget? If so, put the icons into a widget. Or look at the page files and hard code the icons and links into the area just below the nav bar and above the search box.
Thanks for the tutorial. I tried it and selected the transparent but my images were not fully displayed and were not position to the right as yours were. Here is my stylesheet code:
.menu-twitter {
text-indent: -9999px;
background-image: url(http://www.firenaturals.com/wp-content/uploads/2013/02/Twitter-px.png) !important;
background-repeat: no-repeat !important;
margin-left: 70px !important;
width: 30px;
}
.menu-facebook {
text-indent: -9999px;
background-image: url(http://www.firenaturals.com/wp-content/uploads/2013/02/facebook.png) !important;
background-repeat: no-repeat !important;
margin-left: -15px !important;
width: 30px;
}
.menu-youtube {
text-indent: -9999px;
background-image: url(http://www.firenaturals.com/wp-content/uploads/2013/02/youtube.png) !important;
background-repeat: no-repeat !important;
margin-left: -15px !important;
width: 30px;
}
Where did I go wrong
Sophia, I have used these steps on other sites, and I have had to play with the code a bit, try playing with the 70 pixels a bit. If your icons are wider than mine were, try changing the 30 to 40, and maybe tweak -15 to something else. I am a bit concerned with why they aren’t showing up though. I am on the east coast and due to the blizzard I am without power which is throwing me off my game. I should be back full force by Thursday night (gasp!)
Nice video. I’d like to show the number of facebook likes with the “f” icon. Do you know how I can do this? thanks
Gosh Derrick, I don’t know. That would require a different type of coding, as this is just an image with CSS. I need to think about that.
{ 6 trackbacks }