UPDATE: Hello there! I have created a new video that you might be interested in – How to Add Social Icons to a WordPress Header for the 2011 theme!
While working on a client’s new WordPress website I thought it would great to have social media icons in the header. I had an idea on how, but I kept on getting stuck because the social media icons would inevitably get pushed under the header image.
For my client’s website I chose the 2010 theme. Of course there are other themes out there that have the social icons/badges all set up for you, but the client wanted a simple look and you can’t get any more simpler than the 2010 theme.
So like any good developer does he goes looking to Google to see if anyone had the same problem and in my case if they solved it. I came across a couple of forums posts on WordPress.Org website, but like me the developer experienced the some problem.
I was able to put the pieces together and successfully added the social media icons to the development WordPress website. Now I will agree this isn’t the only way, but I’m used to making list item navigation menus so it felt more comfortable to use them to align the images.
WARNING: This process does edit the parent theme. If there are subsequent theme updates, the code changes might be erased.
The three pieces you have to edit are:
- style.css to add your styles for the div tag, ul, li and img tags
[css]
#header_icons img {
float:left;
height:32px;
width:32px;
margin:0;
margin-left:10px;
}
#header_icons{
float: left;
padding-top:5px;
width:195px;
z-index:-999;
padding-bottom:10px;
}
#header_icons ul{
height:32px;
margin:0px;
padding:0px 0px 0px 0px;
}
#header_icons ul li{
display: inline;
float:left;
text-align:left;
height: 32px;
margin:0px;
padding:0px;
height:32px;
}
[/css]
2. functions.php to edit the header image height and width; this gives you the room to add the social media icons
3. header.php to add the div, ul, li, and img tags
[html]
<div id="header_icons">
<ul>
<li><a href="http://www.twitter.com/" target="_blank" alt="Twitter"><img src="Twitter-icon.png" /></li>
<li><a href="http://www.linkedin.com/ target="_blank" alt="LinkedIn"><img src="linkedin-icon.png" /></li>
<li><a href="http://www.facebook.com/" target="_blank" alt="Facebook"><img src="FaceBook-icon.png" /></li>
<li><a href="/feed/" target="_blank" alt="RSS Feed"><img src="Feed-icon.png" /></a> </li>
</ul>
</div>
[/html]
NOTE: Be sure to check the ” in the above code after you copy and paste in your files – a few end up pointing in the wrong direction and the code will break.
Every theme is different and has its own nuances and its own way doing things. If the above doesn’t work, ask the developer of theme if they can assist.
Below is a tutorial I made to show you how I did it using the 2010 theme.
Good post ! thanks 🙂
Thanks Robert!
Good blog post and decent site template design. I am more into web design. Nonetheless, would check back again soon!
Thank you!!! This saved me hours of frustration and vigorous head scratching.
Glad to hear it Alex! Thanks for the comment!
Thank you for this.
It really helped me get started (and almost finished) adding buttons to my header.
Any ideas why on firefox the 2 buttons I added show on different lines? Works fine in every other browser.
You are the best,
Ken
Hi Ken,
Thanks for the kind words. Glad I could help. From what I can see from the code on brokenpancreas.org is that you don’t have an tag wrapped around the facebook image and link.
Very helpful! Thank you!
Wow thanks for the help. I have been slogging away for a week trying to get a site up for my wife who is a photographer. I have no wordpress or coding knowledge. You have made it really easy. Long way to go still as she did not like any of the existing themes….so started with 2012 Theme. Thanks man!
Hi, your video on How to ad Social icons to wordpress header isn’t working. It stops a few seconds into the video.
I would really like to know how to add icon’s to my header.
Please can you fix it?
Hi Lohan, sorry you’re having a problem with viewing the video. It did play for me embedded on the post. Maybe you’ll have a better luck on YouTube itself. Here is the link: http://youtu.be/j9ihqEKHMHc
No worries. It is working now… don’t know why it wasn’t working before.
Thanks for this awesome tutorial! You rock!
Your video was well done on explaining how to put the social media icons into a blog. I think it’s easier if you are a coder. Someone like me, more visual, I really wasn’t sure if I was supposed totally replace the code you show in here or not. I did a search for “social media plugins” and in no time was able to upload a bunch of social media buttons. I think maybe for those of us who aren’t as familiar with the language of code, would prefer just using a widget. The widget I found is called social media widget, I highly recommend it. Maybe you could offer as an alternative to your readers who aren’t html programmers. Just a thought, great video just the same.
@Jayme Proctor Thanks Jayme for your comments and suggestion to offer alternatives. I will do so in future how-to WordPress videos. Widgets are much easier than delving into the code 🙂
Hi Jayme,
I found your video tutorial and added the code to the .css and header.php. However, I’m using a 2011 child theme and so the code for the header width & height was not in the functions.php file. My site is showing bullets where the icons out to be. Could you help me fix this?
@ProsocialROI Hi ProsocialROI, I believe you want to address your question to SICWebDesignLLC, he’s the owner of this site and the one who made that video. What I commented on was how to do it much easier with a widget. It appears from his comment below he is going to make instructional videos on that for everyone.
@ProsocialROI I’ve helped a few people with this problem. Remove the UL and LI tags and keep the images with their corresponding links. Also remove the CSS code that references the UL and LI tags. Let me know how you make out.
@SJCWebDesignLLC The images I created are .png with 32 x 32 px each. However, they are being scaled 32px × 32px (scaled to 1,000px × 1,000px) so they take up the screen. I read http://pd4ml.com/support/pdf-generation-troubleshooting-f4/prevent-images-being-scaled-t38.html but it doesn’t help me.
@ProsocialROI send me the URL if you can and I’ll see if I can troubleshoot that way.
Oh man, you’re quick I used different code cause I was having trouble with yours The code I’m using now is here http://pastebin.com/CgzsE01i.
The correct display for the Top Nav Menu and search box is at http://www.prosocialroi.com. I’d like the social media icons to display to the left of the Top Nav Menu.
The .css is
/* Start Horizontal Social Link bar */ .social { position:relative; float:right; right:20; width: 400px; margin-top:5px; margin-left:5px; height:50px; } /* End Horizontal Social Link Bar */
@ProsocialROI OK, let’s see if I can help.First I’d check your settings in functions.php to make sure you have adjusted the width and height of header image. Give yourself the 400px you need for the icons.
Second, I would move the div to right before the end <branding div> – or in general try re-positioning the div in the header php. You’ll have to have be below the search function.
Third, for me is to start with the simple basics – use just the img icon and a link without the PHP code, so use this:<a href=”https://www.skype.com/psr” title=”Skype Connect”</a><img src=”/images/skype.png” />
and on that note it should be:
<a href=”https://www.skype.com/psr” title=”Skype Connect”><img src=”/images/skype.png” /> </a> – notice the > after Connect” and the </a> should come after the image.
Let me know how you make out with the above.
Wonderful stuff! Super simple way for me to insert extra social media icons on our landing page form. Thanks for your help. Check it out here http://www.3qilabs.com/get-started/
Hi,
I’m wondering if anyone can help me out. I know nothing about CSS :p
I’m using the Forever theme for my blog, loverlyshe.com.
I would like to add a set of social media icons centred in the middle of the page BELOW the header.
If possible I’d also like to remove the border from the header, and increase the height of the header as well.
NO idea where to start. Any help greatly appreciated!
@KatieOverbeek Hi Katie. I took at look at your website, very nice! So you would like icons below the header but above the navigation? I can help. Are you looking for someone to show you the ropes (i.e. 1 on 1 coaching) or are you looking for someone to do it for you?
@SJCWebDesignLLC Thanks so much for the quick reply! Well… how much would it cost to have you do it for me? I wouldn’t mind learning how to do it myself, but, it depends on how tricky it is and how much of your time it would take to explain it. What do you think?
@KatieOverbeek cheaper if I do it 🙂 Please send me an email with specifics, login info, what icons, etc. My email address is lawrence(dot)snow@sjcwebdesign(dot)com.
@SJCWebDesignLLC ok – sent an email inquiry:) thx!
Hi, Was wondering if you knew what could be causing compatibility issues in Explorer, I just noticed it putting a horizontal bar under my header that links to the last social media icon, I posted. http://www.proactiveva.com
@ImLovingThis Which version of Internet Explorer are you using? It looks fine to me in IE 8.
@SJCWebDesignLLC I am using 9. You don’t see the horizontal line under my entire header that links to fb? It kind of looks like it should be there, but it shouldn’t. It also creates a big gap between my header and menus. Thanks for the response! 🙂
@ImLovingThis I see it – it looks like it’s part of the design 🙂 Looks like the ” (quotes) are all facing the same way. Re-type/Replace all the quotes in the DIV.
@SJCWebDesignLLC Just tried that but didn’t fix it. It is just so weird, something is not compatible with my theme I guess? As soon as I take out my whole div insert it looks fine again. Something isn’t working right. Hmm might need to hire someone to figure this out for me.
@ImLovingThis If you want email me your login info and I’ll take a look for you. lawrence(dot)snow(at)sjcwebdesign(dot)com
Hi, this is very useful … unfortunately it doesn’t work for me I have a paid theme. It seems to be coded differently!
But thanks it will be useful for another site I might built with regular wp theme.
@Robert_Monette Hi Robert thanks for the feedback. Every theme has its nuances and can make it challenging in adding the social icons div.
@larrysnow @Robert_Monette Wonder if there’s a plugin that would make my life easier for me lol
Pingback: How to Add Social Media Icons to a WordPress Header - 2011 theme