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.
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)
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>
{ 40 comments… read them below or add one }
Thanks so much for sharing my coffee cups with the world
Great post as well!
Thank you, Katrina. And thanks for sharing it with your audience as well. Also? I like your coffee cups!
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
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)?
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!
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.
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
Yikes, that must have been scary and/or frustrating. I am glad to hear it’s okay now, though.
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?
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.
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.
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.
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;
}
You’re welcome, Ahmad. And thanks for the additional info!
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.
Thanks so much for this post. Putting the icons into the header is important for saving space. I tried Ahmads code above for making the icons horizontal but it did not work on all my pages. I did some more research and the code in blue on the following page worked for me. http://www.abundantideas.com/add-social-media-buttons-to-website-header-in-wordpress
You’re welcome, Suzanna. And thank you for helping add more useful information.
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.
You’re welcome, Jenny! I hope it helps.
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
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!
Thanks for this tutorial!
I can’t seem to get my icons on the right hand side- any thoughts?
Thanks again!
kirstin
@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.
Thank you for helping out, Miz.Chellie!
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?
Nevermind, got it to work by lowering the icons a little bit. Thanks for the tutorial!
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!
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!
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.
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…:-)
Thank you, Sunil. I’m glad it worked, and best of luck with your blog!
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
Hi again.
I solved the problem already!
Wow! That was fast. So how did you fix it, Nadja? Was it a matter of playing around with the margin values?
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
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?
Hi again.
I never found out how to change the color on the social media icons on hover-effect, but I found found another hover-effect, where the opacity changes. I followed this description.
http://fashionbeautyetc.com/2012/07/tutorial-give-your-social-media-icons-a-hover-effect.html
Maybe someone will find if handy!
Nadja,
How did you get your icons to position horizontally, not vertically? I’m having trouble with this!
Thanks!
T
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
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!
{ 1 trackback }