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

19 Comments

  • @mattsaundersmcp
    thanks Matt! Appreciated the Q&A. Looking forward to more great tutorials from you.

  • @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;
    }

  • 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.

  • 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.

  • @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.

  • @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?

  • 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?

  • @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.

  • @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.

  • @Tuanakotta hi there! I’d be happy to help – send me a message with URL so I can take a look at the code. It might as simple as not giving enough space for the icons to be horizontal.

  • @TehaniMKT Hi there! Thanks very much for the suggestion. There are differences in the header.php file in the 2011 theme. I’ll make an update soon!

Leave a Reply

Your email address will not be published. Required fields are marked *