WordPress Tutor
Step-By-Step Help for Wordpress Newbies
Jul 21 2011
How to Add Social Media Icons to WordPress Header
www.sjcwebdesign A quick tutorial showing how to add social media icons to 2010 theme WordPress header file. 3 step process 1. Edit header image size in functions.php 2. Add class styles in style.css 3. Add div tag to header.php Link to code in blog post: bit.ly Questions or comments leave below. Please like and subscribe! Twitter: www.twitter.com Blog: www.sjcwebdesign.com Facebook: SJC Web Design on.fb.me
Posted by in Themes
April 30th, 2011 at 3:51 pm
brilliant.
May 1st, 2011 at 5:46 pm
Nice Tutorial
May 1st, 2011 at 5:59 pm
@mattsaundersmcp
thanks Matt! Appreciated the Q&A. Looking forward to more great tutorials from you.
May 10th, 2011 at 6:49 am
Excellent! You’ve been such a help!
May 19th, 2011 at 11:35 pm
Hi there
could you post the codes to put in style.css and header.php files here?
May 20th, 2011 at 1:12 am
@jyahern.
Here is the styles I used:
#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;
}
May 20th, 2011 at 1:27 am
Since it posted as a run on I added the code to my blog post link in description and as annotation at end of video.
June 12th, 2011 at 5:47 am
trying to get this to work with the Polished theme from elegant themes. Could just be the fact that I don’t know exactly what I’m doing but my icons keep showing up vertically. Will be getting with those guys to see what I can do about this.
June 12th, 2011 at 11:10 am
@digitalfreedom64 – I’d be happy to check your code and help you out. Send me the URL (if it’s live) and your code to lawrence.snow @ sjcwebdesign. com or dm me.
June 21st, 2011 at 8:41 pm
How can I add them to my top menu bar?
June 21st, 2011 at 10:38 pm
@VonKaNon hi there! thanks for the question – just so I’m clear you mean in the top navigation menu bar? And what theme is it?
June 30th, 2011 at 1:20 am
Didn’t work for me. Everytime I added the div, ul, li, and img tags to the header.php and tried to save it I’d get an error at position ### message. Maybe cause I’m using weaver theme?
June 30th, 2011 at 3:06 am
@SifterOfwheat – every theme is different and with it comes different nuances that the code above won’t work in every theme – but the principal is the same. For instance, I helped a guy out that was using a theme from Theme Forest and there were certain things that needed to be adjusted like not using the DIV, UL, LI but just the image icons. If you need help send me a DM with the specifics and I’ll do what I can to help you out.
July 4th, 2011 at 3:57 am
@SJCWebDesignLLC Thanks so much for your offer of help. For the time being, I’ve put the media icons inside my menu bar and it doesn’t look too bad. But as you say, the principles are the same and it’s the principles I need to learn. However, I just noticed that the Weaver admin has an area for inserting code directly into the #branding div header without having to hack the code directly. Seems like a safer option for a beginner like me. I’ll try it and get back to you. Thx again.