I can’t believe it’s been a year since I posted How to Add Social Media Icons to a WordPress Header using the 2010 theme. I thought it was about time to create an updated version for the WordPress 2011 theme. There are slight differences and a couple of added extra steps, but overall it is the same process as last year:
1. Edit header image width and height in functions.php
2. Remove Search box from header.php
3. Add the div id with the social media images and links to header.php
4. Add css for the div and images to style.css
5. Use an image under header settings that match the height and width in functions.php
6. Remove site title and description from general settings
7. Remove the padding and line height from site and title descriptions
8. Add padding to header image and social media icons as desired
WARNING: This process does edit the parent theme. If there are subsequent theme updates, the code changes might be erased.
CODE FOR CSS:
#header_icons {
float: right;
padding-top:5px;
width:195px;
z-index:-9999;
padding-bottom:10px;
padding-top:20px;
}
#header_icons img {
float:left;
height:48px;
width:48px;
margin:0;
margin-left:10px;
}
PUT IN HEADER FILE:
<div id=”header_icons”><a href=”http://www.twitter.com/” target=”_blank”><img alt=”” src=”https://larrysnow.me/wp-content/uploads/2012/05/1312334096_Twitter_48x48.png” /></a></div>
<p><a href=”http://www.youtube.com” target=”_blank”><img alt=”” src=”https://larrysnow.me/wp-content/uploads/2012/05/1312334112_Youtube_48x48.png” /></a></p>
<p><a href=”http://www.facebook.com/” target=”_blank”><img alt=”” src=”https://larrysnow.me/wp-content/uploads/2012/05/1312334063_facebook.png” /></a>
</div>
Thanks for the wonderful video. This is precisely what I was looking for when altering twelve eleven theme’s header space to include social media icons.
However my question is can you add social media icons along with the search field which appears on the form as default??
I suppose you could, give it a try. Complete the above steps just don’r remove the search box. By default I automatically remove that search box because you can add it as a widget. Let me know how you make out.
Thanks for that input. Tried it some time ago.. And it works perfectly fine!
Yes! That means I get to keep the search box and let the social media buttons below the box. Just had to tweak the stylings of the CSS a bit.
Thank you so much! 🙂
Great video! Thanks!
I’m trying to add the social media icons into my nav bar, how would I go about adapting the code for my child theme to do this? I’m currently getting an error message..
@jasminekroeze Hi Jasmine! Thanks for the feedback. Can you post the website link? It helps to see what’s going on.
I was wondering how I would go on about doing that for my theme THESTYLE. ( http://204.102.211.228/ )
I want to remove the search bar and add some social media icons there instead.
@lRlevolution Hi there! I think the simple solution for you would be to use the div id=”search-form” in your theme with the content from div id=”header_icons” code outlined above.
@SJCWebDesignLLC It didnt work… 🙁
@SJCWebDesignLLC I removed the entire div id=”search-form” tag from the Header.php and replaced it with code above. then i went into the .css and changed #search-form to header_icons. Is there anyway I can send you the files?
@lRlevolution Did you add the other code listed above (CODE FOR CSS) to the css file? If you’d like you can give me access to the files – email me at [email protected]. with login info.
@SJCWebDesignLLC Ive seriously tried everything. it doesnt seem to read my changes for the .css. i just sent you an email
@SJCWebDesignLLC Thank you so much. Now my question is, how do I get those buttons to work to allow people to share that page?
@lRlevolution Those buttons won’t allow you to share content – but will allow visitors to connect with you. For sharing – check out Digg Digg plugin for your pages and posts.
@SJCWebDesignLLC Awesome! thank you again for all your help
@lRlevolution You are welcome. Glad I could help!
@SJCWebDesignLLC Another question for you….For some reason, when I click on the any of the share icons, It shares one of my posts, instead of the entire page? any idea why? http://www.levmp.org/calendar/
I want it to share that page instead of what its trying to share.
And since Im technically not using the pages I created and they’re basically there as a place holder to showcase when the artist is playing. the sharing option is the the link to the bands official website. Sorry if im a pain… Just learning all this stuff, but find it fascinating
@lRlevolution not a pain at all. Is that content for those dates a post? If so you can add Digg Digg app to each of those dates so that visitors can share each calendar day content. I hope that makes sense.
@SJCWebDesignLLC Each date is a post, but since im redirecting each post to the bands offical website, I wouldnt need to allow visitors to share each date. I basically want to allow visitors to share each month, instead of each individual artist. so right now I’m using the following in my header. <?php dd_pinterest_generate(‘Compact’) ?>
<?php dd_twitter_generate(‘Compact’,’twitter_username’) ?>
<?php dd_fbshareme_generate(‘Compact’) ?>
@lRlevolution I was trying to figure out why you had rumbankete in the share buttons but looks like you answered your own question. The buttons are sharing each month.
@SJCWebDesignLLC I ended up removing Digg Digg and installing something a bit more simpler called jamie social icons. You basically had set everything up so all i had to do was add the PHP code in the search input section, and changed the CSS up a bit to allow more then 3 icons to show. Thanks so much again for the speedy responses and the help.
@lRlevolution You’re welcome. Thanks for the tip on jamie social icons.
Thank you for the great tutorial! I am having a sizing issue with my images. (http://theapartmentbrewer.com). Any idea why they are so huge? I have included the div img css height and width code…
@ksm730 Thanks! Looks like header_social div is 350px wide and 977px long. I’d recheck the css for the header_social div
@SJCWebDesignLLC Thanks for the fast reply! I added back a height of 100px…but the icons are still giant.
@ksm730 Looks like you have two #branding img tags in the css, remove the #branding img with width of auto. Now, the other #branding img tag is somehow related to the height and width of your icons. If I change #branding img from 650px x 250px to 50px to 50px your icons look the way they should but your header image becomes very tiny. Without being able to get into the code I’m not exactly sure how that is happening.
@SJCWebDesignLLC I moved the #header_social img below the #branding img in the css file and it seems to have fixed the issue. Thank you for your help!!
@ksm730 Excellent. Good luck with the blog and the homebrew!
One quick question, my headers image has a black background would I be able to still add the social media icons on the right side of the header??
Hi Caleb – Yes I don’t see why you wouldn’t be able to. Color of the background shouldn’t matter, making sure of course that the icons were a bright enough color to be seen 🙂
What you need to be careful of is the sizing of the logo. Make sure you have enough space on the right side to add the icon div.
hi ive tried this but having little problem please i need your help thank you the images are not appearing
here my site http://alfurqancentre.org.uk/
@farahali00 Hi! I checked your source code – I don’t see the code I’ve listed above inserted in your source code. Please do that so I can see what is going wrong. Thanks!
Great video! I am trying to do the same thing with the theme for my site but the code is totally different : (
I am using Debut. Theme demo >>> http://debutdemo.wordpress.com/
Since I am building the site offline I can’t send a link, but here is a screenshot >>> http://cl.ly/image/2T3O3f453s2N
Do you recommend any other tutorials or forums where I can find a way to get the social icons in my header?
@mgonzalezregueiro Thanks for the feedback. Question – are you self-hosting WordPress (ie your own domain using WordPress.Org download) or having WordPress.Com host your site? If it is WordPress.Com you won’t be able to change any of the code. If you are self-hosting I’ll try and help you out.
@SJCWebDesignLLC Thank you so much! I am self-hosting. I have hit a hard wall on this one and would appreciate any help you could provide!
@mgonzalezregueiro Sometimes it’s just a matter of trial and error. Have you attempted to input any of code from the post? Do you see a functions.php, header.php and a style.css? For me to help, it’s best if I can actually see the code on your website live, is there anyway that is possible on your end?
@SJCWebDesignLLC I can copy and past the code onto a google doc then share it with you so we can both comment and chat through it. Or is there a better alternative?
Either way, my email is [email protected]. Please let me know what would be best.
@mgonzalezregueiro What I can try to do is install the debut theme on my demo site – larrysnow.me. I can’t do that right away – maybe a day or two as I’m busy doing other projects.
@SJCWebDesignLLC that would be great!
I was wondering if you could help me find out why the social media icons are not clickable. http://www.goodworknetwork.org/w/
@dmorris329 Hi there links look good to me except the YouTube one there is a space after the / after YouTube.com
@SJCWebDesignLLC @dmorris329 When I try and click on them nothing happens. When I hove hover them same thing nothing happens. I have trie chrom and firefox.
@dmorris329 Interesting. It worked when I viewed the site in Safari mobile. But I see the problem viewing from my desktop. Go into the code and redo all the quotes (” “). Copying directly from my post puts the ” all in one direction instead enclosed.
@SJCWebDesignLLC thank you for your help
Pingback: How to Add Social Media Icons to WordPress Header | Lawrence Snow