how to add social media icons to wordpress blog header

One of the things that your blog must absolutely positively must MUST MUST have (in my humble opinion) is ease of access to your social media platforms for your reader. If you have a Facebook page (or a Twitter account or a Pinterest account, etc.), make it super easy for your reader to connect with you on these platforms.

This tutorial explains how to add social media icons to your WordPress header (as opposed to your sidebar)

People out there will come to your blog specifically to follow you on Twitter or whatever, so its imperative that all your connections are out front and up top for them to find you within SECONDS or else you’ve lost that potential connection.

Therefore, you should provide these means of access above the fold on your blog. “Above the fold” means that they don’t have to scroll down to find your Twitter profile. Out front and up top means they don’t have to go to another page to find your Facebook fan page. Or your Pinterest profile. Or whatever.

So let’s get those bad boys on your blog, shall we?

The first thing you need to do is find you some social media icons.

Where to Get Free Social Media Icons

As of press time, this blog is using the Glossy Waxed Wood social media icon set from ICONS, etc. You can shop the whole catalog on their main page. Here is a list of places to shop around (including the one I just mentioned).

ICONS, etc. (these do not currently include Pinterest or Google+)

Standard looking icons from position:relative

Coffee cup icons from Kat’s Cafe

More coffee cup icons from The WordPress Chick

Colorful icons from Carrie Loves

 

Upload Individual Icons to Your Server

Add each icon to your WordPress Media library and make a note of the URL of each one. To add an icon to your library, select the Media option on your dashboard menu, then Add New. Upload each icon and save. For each icon you upload, copy and paste the URL somewhere so you can copy it again later. You’re going to need it.

 

add social media icons, add social media buttons, wordpress

 

The remainder of this tutorial depends on whether or not you use the Thesis theme. If you do, skip down to the next section entitled Add Social Media Icons to Blog Header (Thesis Theme). Otherwise, see the next step entitled ?????

Add Social Media Icons to Blog Header (non-Thesis Theme)

On the left-hand side of your WordPress Dashboard, click on Appearance, then Editor.

The default file that comes up is style.css. If it’s not, select it from the template file list on the right-hand side of your dashboard.

Modify your Stylesheet (style.css)

Add the following css code to the bottom of your style.css file.

#header_icons {     
    float:right; 
    padding-top:5px; 
    width:40px; 
    z-index:-9999; 
    padding-bottom:10px; 
} 

#header_icons img { 
    float:right; 
    height:40px; 
    width:40px; 
    margin:0; 
    margin-left:10px; 
}

SAVE your changes.

Modify Your Header File

Select header.php from the template file list on the right-hand side of your dashboard. Add the following code right after the div id=header tag in the <body> section of the code.

<div id="header_icons">

<a href="https://www.facebook.com/yourfacebookpage" target="_blank">
<img src="http://www.yourdomain.com/wp-content/uploads/your-uploaded-fb-logo.png" width="40px"></a>
<a href="https://twitter.com/yourtwittername" target="_blank">
<img src="http://www.yourdomain.com/wp-content/uploads/your-uploaded-twitter-logo.png" width="40px"></a>
<a href="http://yourrssfeedURL" target="_blank">
<img src="http://www.yourdomain.com/wp-content/uploads/your-uploaded-rssfeed-logo.png" width="40px"></a>
<a href="mailto:you@yourdomain.com" target="_blank">
<img src="http://www.yourdomain.com/wp-content/uploads/your-uploaded-mail-logo.png" width="40px"></a>

</div>

If you have an identifier of “id=branding”  in the header code, insert the above div tag in that branding section.

For example, the Twenty-Eleven theme has a branding section that looks like this:
<body <?php body_class(); ?>>
<div id=”page”>
<header id=”branding” role=”banner”>

Add Social Media Icons to Blog Header  (Thesis Theme):

You’ve just uploaded all the social media icons you need. Now you need to add two bits of code to your custom CSS and functions files:

Modify Your custom CSS File

On your WordPress dashboard, select Thesis, then Custom File Editor. You have a choice of at least 2 files to edit, your CSS file or your custom functions file. Select the CSS file (mine is called custom.css)

add social media icons, add social media buttons, wordpress

Insert the following code into the bottom of your custom CSS file and SAVE your changes.

/*   added  6/16/2012  for social media icons added to header  */
.social {
margin-left:76em;
margin-top: -23em;
}

The first line is a comment and you can put whatever you want in there. Just be sure and keep the slash asterisk delimiters at he beginning and the end (that’s what makes it a comment). I always add comments to every change I make because I will forget why certain code exists where it does.

The margin-left and margin-top values position the icons up and down and left and right. You can play with the numbers to move it around until they are where you want them to be.

Be sure and SAVE your changes

Modify your Custom Functions File

Now in that same Thesis Custom File Editor, select the custom_functions.php and “edit the selected file”.

NOTE: Be super D duper careful while editing this file. An error could cause your site to blow up. Not to scare you or anything. But pay attention to that warning they give you when you go into this file. The life you save could be your own.

Add code to the bottom of this file that looks a lot like the following, only with YOUR information.

/*  Add social media icons to header  */
 function social_icons() {
 ?>
<div class="social">
<a href="https://www.facebook.com/yourfacebookpage" target="_blank">
<img src="http://www.yourdomain.com/wp-content/uploads/your-uploaded-fb-logo.png" width="40px"></a>
<a href="https://twitter.com/yourtwittername" target="_blank">
<img src="http://www.yourdomain.com/wp-content/uploads/your-uploaded-twitter-logo.png" width="40px"></a>
<a href="http://yourrssfeedURL" target="_blank">
<img src="http://www.yourdomain.com/wp-content/uploads/your-uploaded-rssfeed-logo.png" width="40px"></a>
<a href="mailto:you@yourdomain.com" target="_blank">
<img src="http://www.yourdomain.com/wp-content/uploads/your-uploaded-mail-logo.png" width="40px"></a>
</div>
 <?php
 }
add_action('thesis_hook_header', 'social_icons');

 

You’ll need to customize this code to fit your situation. You’ll only need to change the lines that contain the href and img tags. Change the href= values to the desintation URL where you want your reader to be taken when they click on the icon. Change the corresponding src= values to the URL of each social media icon you uploaded to your server. You can also change the width= values if your logos appear too big or too small.

The above code inserts icons for Facebook, Twitter, RSS Feed and email. If you want to see what my specific href code looks like, it’s this:

<a href=”https://www.facebook.com/StickyReaders” target=”_blank”><img src=”http://www.stickyreaders.com/wp-content/uploads/2012/06/099630-glossy-waxed-wood-icon-social-media-logos-facebook-logo-square.png” width=”40px”></a>

<a href=”https://twitter.com/nannygoats” target=”_blank”><img src=”http://www.stickyreaders.com/wp-content/uploads/2012/06/099702-glossy-waxed-wood-icon-social-media-logos-twitter-logo-square.png” width=”40px”></a>

<a href=”http://feeds.feedburner.com/StickyReaders” target=”_blank”><img src=”http://www.stickyreaders.com/wp-content/uploads/2012/06/099681-glossy-waxed-wood-icon-social-media-logos-rss-cube.png” width=”40px”></a>

<a href=”mailto:margaret@stickyreaders.com” target=”_blank”><img src=”http://www.stickyreaders.com/wp-content/uploads/2012/06/099654-glossy-waxed-wood-icon-social-media-logos-mail-square.png” width=”40px”></a>

The 5 Blogging Tools I Use to Save $$$, Time & Stress

Get this FREE guide to boost your productivity.

Get the FREE Guide

Get our FREE eBook now!

Ebook_cover_andrews_sticky_readers

Sign up now and receive the free Sticky Readers eBook, 10 Blogging Mistakes That Drive Your Readers Away.

Powered by ConvertKit
WordPress: How to Add Social Media Icons to Your Blog Header

59 thoughts on “WordPress: How to Add Social Media Icons to Your Blog Header

  • May 2, 2014 at 7:45 am
    Permalink

    I don’t know if you are still checking these comments but I followed your instructions and I wanted my icons to float right button in my header and they are floating left and half hidden by my header logo. Do you have suggestions to help? I doesn’t matter whether my CSS code is in or out, it still seems to just sit there. Help.

  • March 18, 2014 at 11:05 am
    Permalink

    Only to give a hint to the users (maybe it’s useful to add it in the article): to make the social icons horizontally and not vertically, you just have to use the singularly 4 each social media button, not 4 all together.

  • February 17, 2014 at 12:28 pm
    Permalink

    Hi there –

    Thanks for all the help. I successfully installed the social media icons to my site, but they float when I scroll down. I tried changing the code to float:none, but it had no affect.

    Here is the code I’m working with.

    #header_icons {
    position:fixed;
    padding-top:3px;
    z-index: 1001;
    left:1100px;
    top:35px;

    }

    #header_icons li {
    display:inline !important;
    list-style-type: none;
    z-index: 1001;
    float:right;
    }

    Thanks so much for your help!

  • December 31, 2013 at 3:46 pm
    Permalink

    how to implement the code above to use the theme of genesis ,thx about info

  • December 16, 2013 at 4:04 pm
    Permalink

    Hi Margaret … it’s not clear if this technique works for wordpress-hosted blogs (vs. self-hosted)??? I’m kinda new to the technical aspects of wordpress, and that distinction would be very helpful! Thanks for posting this. Bryan

  • October 11, 2013 at 1:42 pm
    Permalink

    Hello everyone. I am hoping someone can help me! The below code allows me to align the social media icons horizontally in the top right corner when the browser window is open as wide as my computer screen. But when I make the browser window a little more narrow the icons start aligning vertically to stay within the page.

    The goal of what I am trying to achieve is for the icons to always stay in the top right corner aligned horizontally; exactly as the “home, press, contact” tabs in the top left corner. Does anyone know what I am doing wrong?!

    the website is: thestyleeditrix.com

    }

    #header_icons {
    position:fixed;
    padding-top:3px;
    z-index: 1001;
    left:1175px;
    top:3px;

    }

    #header_icons li {
    display:inline !important;
    list-style-type: none;
    z-index: 1001;
    float:right;

    }

  • October 3, 2013 at 12:37 am
    Permalink

    Hi – do you know how I might do this in a Twenty Twelve child theme which dows not have a div id=header? I have moved the code around the header.php file, and I can get the icon above and below the header, but not overlapping nicely like the example at the top of this page. Any help would be awesome. Thanks!

    • October 7, 2013 at 6:34 pm
      Permalink

      Hi Leah,

      Sorry, I’m afraid I don’t. Sorry for the late response, I only hope you’ve found another avenue where you were able to resolve it.

  • September 11, 2013 at 5:28 am
    Permalink

    How can I make icons Horizontal?
    Sorry if’t bit silly question , but Im trying to use this and on by site it looks vertically .
    One icon below other .
    Can you please help ?
    thank you.

  • August 17, 2013 at 8:13 am
    Permalink

    Thanks. This was very helpful.

  • May 20, 2013 at 1:37 pm
    Permalink

    Hi Margaret!
    Wonderful tutorial, clear and easy to follow. I am using Thesis theme, and the icons look great, the links are not working, though. Any suggestions? I have tried everything I could and they worked fine from my widget area.
    Is it necessary to add a widget area to the header if I am using Thesis? Might have to try it. Would love some help if you can think of anything.
    Thanks,
    Leslie

  • May 20, 2013 at 7:48 am
    Permalink

    The only problem I have is that the icons are standing vertically in stead of horizontally.

    Anyone knows the solution?

    Other than that this tutorial helped me a lot and it’s very clear and quick to apply!

    So thanks a lot!

  • May 9, 2013 at 7:04 pm
    Permalink

    Hi, Margaret. Thank you so much for all of this info! I am having some trouble getting it in the exact right place for the WordPress Twenty-Eleven theme blog. Could you specify where in the branding section I should paste it? Also, will this make the icons appear in the lower left corner where yours are? Thanks again!

  • April 1, 2013 at 8:34 am
    Permalink

    Hi Margaret – Thanks for this info. I don’t have a div id=header item in my header.php file. (I’m on a self-hosted WP site.) Any ideas on this one?

    Much appreciated.

    Michael

  • March 21, 2013 at 5:13 am
    Permalink

    Hi again.

    I have another question. Do you know how to change the color of the social media widgets when I hover the mouse over?

    Thanks!
    Nadja

    • March 23, 2013 at 12:05 pm
      Permalink

      Hi Nadja! I’m afraid I don’t. At least off the top of my head, although I do know it would be a css thing. I think there is a “mouse-over” element in css. The other thing is you can’t change the “color” of an image, you can only do that with text.

      But what would be great is if you figure it out, to let us know here how you fixed so others who have the same problem might benefit from your struggles. For example, how did you fix your previous problem of getting your icons to go from vertical to horizontal?

  • March 20, 2013 at 5:42 am
    Permalink

    Hi Margaret.

    I have tried to follow your tutorial on how to add social media widgets to the header of a webpage. I am using the Pilot Fish theme on wordpress.
    Anyway, it almost works, BUT a small detail. The icons appear vertically in my header and not horizontally. Do you know why? And do you know how I fix that?

    Cheers Nadja

    • March 20, 2013 at 2:03 pm
      Permalink

      Hi again.

      I solved the problem already! 🙂

      • March 23, 2013 at 12:06 pm
        Permalink

        Wow! That was fast. So how did you fix it, Nadja? Was it a matter of playing around with the margin values?

    • August 8, 2013 at 10:45 am
      Permalink

      Hey, for anyone looking to solve the vertical problem – changing the width:40px; to width:auto; in the #header_icons div solved it for me!

  • March 4, 2013 at 7:57 am
    Permalink

    Hi i added the the thingy into style.css and ofc uploaded icon image b4
    then i went to header and created this :

    http://wordpress.pastebin.ca/2328068

    And icon was added – but now how to add it so it doesn’t move my facebook and youtube one .

    Uploaded with ImageShack.us

  • March 4, 2013 at 6:16 am
    Permalink

    Thanks for sharing..great help..i am able to add the social media icons to my blogger header….thanks for sharing…keep the good works going…:-)

    • March 18, 2013 at 3:05 pm
      Permalink

      Thank you, Sunil. I’m glad it worked, and best of luck with your blog!

  • March 1, 2013 at 11:24 am
    Permalink

    Hi Margaret – I am using the WordPress.com version. Is there a way for me to have the social media icons that are linked to my social media sites? Thank you!

    • March 18, 2013 at 3:04 pm
      Permalink

      Hi Terri,

      Does WordPress.com let you upload the icons to a media library? If so, then I’m thinking you could add them with link to your sidebar? Otherwise I’ll have to dig deeper and add a tutorial for WordPress.com users.

  • February 19, 2013 at 3:01 pm
    Permalink

    I followed the directions and have double checked the links to each social media site, but I cannot click on any of the icons. What am I doing wrong?

    • February 19, 2013 at 3:04 pm
      Permalink

      Nevermind, got it to work by lowering the icons a little bit. Thanks for the tutorial!

      • March 18, 2013 at 2:47 pm
        Permalink

        You’re welcome! I had to play around with moving them around as well. Not sure why they don’t work from anywhere on the screen. Thanks for the update!

  • February 4, 2013 at 3:26 pm
    Permalink

    Thanks for this tutorial!
    I can’t seem to get my icons on the right hand side- any thoughts?
    Thanks again!
    kirstin

    • February 24, 2013 at 2:20 pm
      Permalink

      @Kristin. The same thing happened to me. I am not exactly sure why but I think it has something to do with the margins that are already set in the theme. Try inserting the code above or below the division where you have initially inserted. that worked for me.

  • January 19, 2013 at 3:35 pm
    Permalink

    Margaret. Thanks! I have been looking all over for code and help.

    @ Suzanna, I did use the code you recommended and it worked, although my icons are on the left. Don’t know if it’s my theme or if I have to adjust the margins.
    Truthfully, I am just glad they are there. I am experiencing memory issues and trying to get rid of any unnecessary plug-ins so I found the info super useful

    • January 30, 2013 at 11:41 am
      Permalink

      You’re welcome, Chelle, although this is turning into a team effort, with everyone else’s contributions! I wish you the best with your blog!

  • January 14, 2013 at 11:47 am
    Permalink

    Thank you so much for this tutorial! You are a lifesaver! I was wondering if there was a quick snippet of code that I needed to use to align the icons to the right.

    • January 16, 2013 at 11:17 pm
      Permalink

      You’re welcome, Jenny! I hope it helps.

    • January 16, 2013 at 11:16 pm
      Permalink

      You’re welcome, Suzanna. And thank you for helping add more useful information. 🙂

  • December 19, 2012 at 10:26 am
    Permalink

    First, Thank you very much for the very helpful post. Second, for those who want to have the icons be lined horizontally, the can use the following codes in their ccs file. Just remove the codes provided by Margaret and add these ones. You can change size and margin by supplementing the codes with suitable height, width, margin, and padding.

    #header_icons {
    position:relative;
    left:900px;
    bottom:10px;
    }
    #header_icons li {
    display:inline !important;
    list-style-type: none;
    float:right;
    }

    • January 16, 2013 at 11:15 pm
      Permalink

      You’re welcome, Ahmad. And thanks for the additional info!

    • May 7, 2013 at 5:59 pm
      Permalink

      Thanks Ahmad! That did the trick for me. I also added a 20px top margin to the CSS so icons were not butted up to top of site.

      Thanks Margaret for sharing this. Made me look like I knew what I was doing with my client site. 🙂

      • October 11, 2013 at 1:57 pm
        Permalink

        Hello Ahmad. I am hoping you can help me! Based on your comment I tweaked your code (see below). The modified code allows me to align the social media icons horizontally in the top right corner when the browser window is open as wide as my computer screen. But when I make the browser window a little more narrow the icons start aligning vertically to stay within the page.

        The goal of what I am trying to achieve is for the icons to always stay in the top right corner aligned horizontally; exactly as the “home, press, contact” tabs in the top left corner. Do you know what I am doing wrong?!

        the website is: thestyleeditrix.com

        }

        #header_icons {
        position:fixed;
        padding-top:3px;
        z-index: 1001;
        left:1175px;
        top:3px;

        }

        #header_icons li {
        display:inline !important;
        list-style-type: none;
        z-index: 1001;
        float:right;

        }

        • February 17, 2014 at 12:33 pm
          Permalink

          Hi Doug –

          How did you keep the icons from “floating” when you scroll down?

  • December 8, 2012 at 5:58 am
    Permalink

    I also had the problem of Emily above, where the icons appeared vertically on the right side of my header instead of horizontally as they appear on this page’s header.

    I love how clearly you explained the steps above. As a completely clueless admin of my own page, I’d love to be able to make the icons go horizontally. Thank you.

    • January 16, 2013 at 11:20 pm
      Permalink

      Sorry for the late response, but thank you for your comment. I hope you’ver resolved your vertical issue, I know playing around with the vertical and horizontal numbers helped me figure it out.

  • November 29, 2012 at 2:06 pm
    Permalink

    Margaret, thank you for the tips! I was able to get the icons successfully loaded into my header. However, I was wondering if you could also share how to make them go horizontally instead of vertically?

    • January 16, 2013 at 11:25 pm
      Permalink

      Hi Emily,

      So sorry for the late response. I hope you’ve resolved your icon issue and if you did it ewas no thanks to me. :/
      In any case, I’ll mention this anyway: I had to play around with the margin-left and margin-top values in my custom file to get it right. Otherwise, mine showed up vertical as well.

  • November 12, 2012 at 8:33 pm
    Permalink

    Hi Margaret,

    Thank you so much for the information, I used it to add social media to my site.
    Then for some mad reason I updated the header.php sheet with some other code and it was completely lost.

    Took me ages to find your page again. The process saw me try several other peoples versions, without any success. Thankfully I am okay now and have saved a back-up of my header.php code now!

    Thanks again,
    Glenn

    • November 18, 2012 at 9:28 pm
      Permalink

      Yikes, that must have been scary and/or frustrating. I am glad to hear it’s okay now, though. 🙂

  • August 4, 2012 at 9:14 am
    Permalink

    I’ve followed this tutorials steps but on my wordpress blog I don’t have the “editor” that you’re using. what do I do?

    – anastasiajasmin

    • August 5, 2012 at 10:39 am
      Permalink

      Hi Anastasia,
      Are you saying that you do not have the “Appearance|Editor” option in your WordPress dashboard? Do you have self-hosted WordPress? Or are you using WordPress-hosted (wordpress.com)?

      • March 7, 2013 at 11:32 pm
        Permalink

        Like Anastasia above – I am working of Word-press hosted blog (wordpress.com)
        I cannot figure out what version.

        I’d like to add an extra bar above my header to add fb, twitter, linkedin icons and link them to my pages.

        how can i edit the CSS?
        Thanks for your help!

        • March 18, 2013 at 2:40 pm
          Permalink

          Hi Janan,

          I couldn’t tell you off-hand. That would require a bunch of research. And another article. That’s a idea for another blog post though! Srory I couldn’t be of more help right now.

  • Pingback: Meetups, Tweetups and Fleetups: Building a Blogging Community

  • July 2, 2012 at 6:42 pm
    Permalink

    Thanks so much for sharing my coffee cups with the world 🙂 Great post as well!

    • July 3, 2012 at 10:42 am
      Permalink

      Thank you, Katrina. And thanks for sharing it with your audience as well. Also? I like your coffee cups! 🙂

Comments are closed.