How to Add Social Media Icons to a WordPress Header – 2011 Theme

How to Add Social Media Icons to a WordPress Header – 2011 Theme

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 http://www.youtube.com/watch?v=j9ihqEKHMHc. 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:

*****WARNING: This process does edit the parent theme. If there are subsequent theme or WordPress updates, the code changes might be erased. *****

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

Yes – I do use Chrome and what you are looking at is the Inspect Element function, this helps me look at the code and troubleshoot any issues.

CODE: http://bit.ly/Z2V90I

WARNING: This process does edit the parent theme. If there are subsequent theme updates, the code changes might be erased.

CONNECT:

Web: http://larrysnow.me
Facebook: http://on.fb.me/Z37vG8
Twitter: http://www.twitter.com/lawrence_snow
Google +: http://bit.ly/YJTBob

See ya in the next video!

41 replies
  1. Larry Snow
    Larry Snow says:

    Hi Tim, there are several WordPress tutorial references but none that I know of that specifically touch on adding social icons to the header. However, if you can afford $25 I’d check out Lynda.Com which has several tutorials on WordPress.

    Reply
  2. Tim Woods
    Tim Woods says:

    Larry, I have a few questions. What reference would you recommend for learning more about what you demonstrated in this video. I have a 2011 theme I’m working and I’ve spent 3 days on youtube trying to learn code and php. But I feel like I’m chewing up too much time.

    Reply
  3. Larry Snow
    Larry Snow says:

    Without looking at the code that’s tough to say, but if you copied the code from my website, you’ll need to change all the " quotes in the div. My other guess would be you are missing an end tag in the div. Send me the URL to lawrence(dot)snow(at)sjcwebdes­ign(dot)com and I’ll take a look at the source code.

    Reply
  4. New Channel youtube.com/user/CarlPlusGaming
    New Channel youtube.com/user/CarlPlusGaming says:

    Good tutorial, 1 question do you know how to remove the Header Link? I have a Home button so its rather pointless. since it just goes Home as well

    Reply
  5. Larry Snow
    Larry Snow says:

    I’m not sure why this code in the header.php file would interfere with the contact form 7 plugin. Is a contact form located in the header.php file? Perhaps it’s the CSS?

    Reply
  6. Tim Woods
    Tim Woods says:

    Another quick question: do you have a tutorial on how to make horizontal sidebars to display 3 widgets, side-by-side with pics in each box?

    Reply
  7. Larry Snow
    Larry Snow says:

    Hi Jenny – I’d be happy to help you out. What is the name of your website? If you’d like you can email me the specifics lawrence(dot)snow(at)gmail(dot)com.

    Reply
  8. Larry Snow
    Larry Snow says:

    Hi Mattias. What theme are you using? Yes please send the URL to lawrence(dot)snow(at)sjcwebdesign(dot)com. I’ll take a look at the code and see if I can help you out.

    Reply
  9. Larry Snow
    Larry Snow says:

    My suggestion would be that you place the social icons div inside the search box div and right below/underneath the code for the search box in the header.php file.

    Reply
  10. Fellipe Anderson Mendes
    Fellipe Anderson Mendes says:

    Hi, Lawrence, great video, I have a question, there’s a way to put the Social Icons over the image of the header? since the header image is colorful i can’t reduce it and place it aside. please help me, and thanks.

    Reply
  11. Alison Rose Munn
    Alison Rose Munn says:

    Thank you for the great tutorial! I am using 2011 and would like to try to keep my site title & description while adding social media icons to the right of them – is that possible? I mess up the heading every time I try to place the icons…

    Reply
  12. Bülent Şirikçi
    Bülent Şirikçi says:

    Hello Larry. Thanks for preparing and sharing this video which explains exactly the way I would like to. I added the social icons to my header(twentytwelve theme) But my header width increased and I just couldn’t get it back to its old width in style.css Please see "www.sir-mar.com" How can I remove empty white spaces at bottom and top of the social icons. Also is there a way to clear thin lines(rectangle) around the feaured image on my home page? If you could spare a little time for these 2 request I would be appreciated. 

    Reply
  13. Danny Lee
    Danny Lee says:

    Great tutorial! I loved it!
    I have a question on how to add the Whishlist to the wordpress header? I just installed YITH Woocommerce Whishlist and I couldn’t figure out how to add that to the very top navigation bar next to the shopping cart. I’ve got log out, shopping cart, and search product on the top navigation bar, I just want to add another Whishlist.
    Any help would be appreciate it!!!
    Regards,
    Danny

    Reply
  14. Greg Desoto
    Greg Desoto says:

    I am a wordpress expert and I created a series of 55 video tutorials for wordpress. WP developers say that this is the most comprehensive wordpress training ever. go here: –> /watch?v=XL2kQCl5PdI <– or go to my channel to watch it

    Reply
  15. Larry Snow
    Larry Snow says:

    Hi Admir, specifically what issue are you experiencing? Is there a link to show a live working example of how it’s not working for you? I’ll try and help you out.

    Reply
  16. Larry Snow
    Larry Snow says:

    Hi Lapsusone – I’ll do my best to help you out. Please send me an email to lawrence(dot)snow(at)sjcwebdesign(dot)com with specific details (website url, theme used, etc)

    Reply
  17. Marvin Dore
    Marvin Dore says:

    Great video thanks! How would you put the social icons underneath the search bar, like attach them right beneath it?

    Reply
  18. Larry Snow
    Larry Snow says:

    Hi there! Send me an email with website link so I can take a look and try to help you out. Address is: lawrence[dot]snow[at]sjcwebdesign[dot]com

    Reply
  19. Mattias Persson
    Mattias Persson says:

    Hi!

    Ive been sitting with this tutoral a few hours now and.. i cant get it to work.. 🙁
    My images were huge and above the header..
    whats wrong? ive copied your html & css into mine

    mystic..

    Reply
  20. Larry Snow
    Larry Snow says:

    Hi Alison. I haven’t tried it, but let me take a look over the weekend. By the way – beautiful image of your eyes on your website 🙂

    Reply
  21. Leth A
    Leth A says:

    Hi Snow, do you have the codes you use in moving to the social icons to the right in clear format? I am using a 11" laptop and couldn’t see well it even if I blow up the video. Thanks a Lot and more power to you.!

    Reply
  22. Larry Snow
    Larry Snow says:

    I’d personally leave it in, but if you really want to remove the link, going by the twenty twelve theme – go to the header php file and look for the a href right after the h 1 site title tag and delete the entire line of code leaving the h 1 end tag. But I’d save the code somewhere just in case you change your mind.Since you are using the catchbox theme it might be a little different for you.

    Reply
  23. Chloe Ticknor
    Chloe Ticknor says:

    For some reason no matter where I put the code in my header.php, I end up with a question mark box where the image should be. My website is http://www.chloeatconcerts.com

    Reply
  24. Jenny Melrose
    Jenny Melrose says:

    This is a great tutorial. I have the brunelleschi theme and it accepted the code and looked perfect for 24 hours, but has now put the button vertically, rather than horizontal. Could it be the placement with the header.php. Any help would be greatly appreciated.

    Reply
  25. Larry Snow
    Larry Snow says:

    Hi Alison – well I tried and wasn’t able to get the icons aligned with the text. They were either above or below. When I get more time I’ll revisit if I come up with a solution I’ll post here.

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

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