How to Add Social Media Icons to WordPress Header
March 3rd, 2013 by admin
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
Written by - Visit WebsitePosted in Wordpress Tutorial Videos
March 3rd, 2013 at 3:52 am
Hi Michelle – the steps outlined in this video should? work in most themes. However, every theme is different and with it comes different nuances.If you get stuck reply back here and I’ll help best I can.
March 3rd, 2013 at 3:52 am
do you know how to add icons to the header of celestial lite??
March 3rd, 2013 at 3:52 am
Hi Emily – there is a link in the description for the HTML code used in this tutorial. If you have more questions? send me an email: lawrence(dot)snow(at)sjcwebdesign(dot)com
March 3rd, 2013 at 3:52 am
Hi there, I was wondering if you have the html code that I can just copy and paste? to re-align my icons?
March 3rd, 2013 at 3:52 am
Sure Dimos – send me your website URL and I’ll? take a look. Email me at lawrence(dot)snow(at)sjcwebdesign(dot)com
March 3rd, 2013 at 3:52 am
hello larry? I have a problem in wordpress! the social buttons appear verically not horizontally, can you help me?
March 3rd, 2013 at 3:52 am
you definitely have to make? that vid for the child themes
March 3rd, 2013 at 3:52 am
outstanding? video, i learned a hellava lot… let me absorb it all in(^;
March 3rd, 2013 at 3:52 am
Absolutely. If I have the time I might make a vid on that. But in the mean time do a search for WordPress child theme to get an idea? on how to do it.
March 3rd, 2013 at 3:52 am
I’m wondering if there is a way to do this with a sort of child? theme functions.php and header.php so it isn’t effected when a theme is updated.
March 3rd, 2013 at 3:52 am
I just created a new video about selling on youtube. it’s the most popular video I’ve ever created. just watch this: /watch?v=0NI3mbU_4G8 ?
March 3rd, 2013 at 3:52 am
Great info.? Thx.
March 3rd, 2013 at 3:52 am
Hi Joanna yes I believe so. Check out healthifiedmom(dot)com as an example. From looking at the code they are using something called Universal Sidebar. Although I’m not sure if that’s part of Pagelines or a sidebar widget they? created.
March 3rd, 2013 at 3:52 am
GREAT VIDEO! I am using the Pagelines Theme, do you? think the steps might work with Pagelines, too?
March 3rd, 2013 at 3:52 am
Thanks and thank you for the? comments!
March 3rd, 2013 at 3:52 am
Thank you and keep up? the good work!
March 3rd, 2013 at 3:52 am
I’m sure there is a way to do what you are asking, in fact I? know of some premium themes that do just that (check themeforest) via a widget or options within the themes themselves. So what I would do (if I had the time) is create a widget for the header file and in the widget the user would enter their corresponding social media URL in a predefined field inside the widget. If you’re a developer you may want to visit premium websites and checkout how they do it.
March 3rd, 2013 at 3:52 am
First of all thank you for this tutorial ! I think this is useful if you want? to set the social media buttons for yourself, but what if you want to set them up ….by default, and let the users to add their profile link? something like a href=S a M p E l(dot)com/ and after that fwslash to put an php variable that takes the value from the user? can you explain please how can you do that without making the user to look inside the code and do it from the admin pannel? Thank you in advance!
March 3rd, 2013 at 3:52 am
thanks for? the helpful tips
March 3rd, 2013 at 3:52 am
Hey Sean -? thanks very much for the feedback! I appreciate it.
March 3rd, 2013 at 3:52 am
Great thanks for the? tutorial! Worked great
March 3rd, 2013 at 3:52 am
No problem. Yep, happens all the time. Glad? the tutorial helped!
-Larry
March 3rd, 2013 at 3:52 am
Hi Steve,
Thanks for the quick reply. Yes it was an error on my coding. I guess when you are looking at code for so long sometimes you easily overlook the smallest and simplest thing. I forgot to close one of the a href tags. Thanks again for the GREAT tutorial… Works Perfectly.
Scott?
March 3rd, 2013 at 3:52 am
Thanks for the comment. Without looking at the code my guess would be there is a problem with the a href tags – also check your ” quotes – if you copied? it from my site the ” quotes in the code might be facing the opposite way. I’d happy to take a look at your code – send to lawrence(dot)snow(at)sjcwebdesign(dot)com.
March 3rd, 2013 at 3:52 am
Hi, Thanks for the tutorial. I have everything working great without the ul but I do have one? issue. The space around the icons is active with the links from the icons. I have tried everything but cannot get it to go away. I have used a div and images only all without being able to remove the linking in the empty space around the icons. Do you have any suggestions or ideas on why this would happen?
Thanks
Scott