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

No related content found.

Revisions

There are no revisions for this post.

Tags: , , , , ,

18 Responses to “How to Add Social Media Icons to WordPress Header”

  1. SJCWebDesignLLC December 12, 2011 at 3:42 AM #

    @edclam yep! folks were asking for the code, so I posted that on my´╗┐ blog. ­čÖé

  2. SJCWebDesignLLC December 12, 2011 at 4:40 AM #

    @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!´╗┐

  3. TehaniMKT December 12, 2011 at 4:59 AM #

    Does the same apply to the 2011 wordpress theme?´╗┐ If not, can you do a video for that? Thanks!

  4. SJCWebDesignLLC December 12, 2011 at 5:40 AM #

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

  5. SifterOfwheat December 12, 2011 at 5:48 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.

  6. SJCWebDesignLLC December 12, 2011 at 6:19 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.

  7. SifterOfwheat December 12, 2011 at 7:11 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?

  8. SJCWebDesignLLC December 12, 2011 at 7:16 AM #

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

  9. VonKaNon December 12, 2011 at 7:31 AM #

    How can I add them to my top menu´╗┐ bar?

  10. SJCWebDesignLLC December 12, 2011 at 7:48 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.

  11. digitalfreedom64 December 12, 2011 at 8:25 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.

  12. SJCWebDesignLLC December 12, 2011 at 8:57 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.

  13. SJCWebDesignLLC December 12, 2011 at 9:34 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;
    }

  14. jyahern December 12, 2011 at 10:32 AM #

    Hi there
    could you post the codes to put in style.css´╗┐ and header.php files here?

  15. sftraxx December 12, 2011 at 10:45 AM #

    Excellent! You’ve been´╗┐ such a help!

  16. SJCWebDesignLLC December 12, 2011 at 11:11 AM #

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

  17. mattsaundersmcp December 12, 2011 at 11:11 AM #

    Nice´╗┐ Tutorial ­čÖé

  18. LionArtMedia December 12, 2011 at 11:15 AM #

    brilliant. :)´╗┐

Leave a Reply