UPDATE: Hello there! I have created a new video that you might be interested in – How to Add Social Icons to a WordPress Header for the 2011 theme!
While working on a client’s new WordPress website I thought it would great to have social media icons in the header. I had an idea on how, but I kept on getting stuck because the social media icons would inevitably get pushed under the header image.
For my client’s website I chose the 2010 theme. Of course there are other themes out there that have the social icons/badges all set up for you, but the client wanted a simple look and you can’t get any more simpler than the 2010 theme.
So like any good developer does he goes looking to Google to see if anyone had the same problem and in my case if they solved it. I came across a couple of forums posts on WordPress.Org website, but like me the developer experienced the some problem.
I was able to put the pieces together and successfully added the social media icons to the development WordPress website. Now I will agree this isn’t the only way, but I’m used to making list item navigation menus so it felt more comfortable to use them to align the images.
The three pieces you have to edit are:
- style.css to add your styles for the div tag, ul, li and img tags
#header_icons img {
float:left;
height:32px;
width:32px;
margin:0;
margin-left:10px;
}
#header_icons{
float: left;
padding-top:5px;
width:195px;
z-index:-999;
padding-bottom:10px;
}
#header_icons ul{
height:32px;
margin:0px;
padding:0px 0px 0px 0px;
}
#header_icons ul li{
display: inline;
float:left;
text-align:left;
height: 32px;
margin:0px;
padding:0px;
height:32px;
}
- functions.php to edit the header image height and width; this gives you the room to add the social media icons
- header.php to add the div, ul, li, and img tags
<div id=”header_icons”>
<ul>
<li><a href=”http://www.twitter.com/” target=”_blank” alt=”Twitter”><img src=”Twitter-icon.png” /></li>
<li><a href=”http://www.linkedin.com/ target=”_blank” alt=”LinkedIn”><img src=”linkedin-icon.png” /></li>
<li><a href=”http://www.facebook.com/” target=”_blank” alt=”Facebook”><img src=”FaceBook-icon.png” /></li>
<li><a href=”/feed/” target=”_blank” alt=”RSS Feed”><img src=”Feed-icon.png” /></a> </li>
</ul>
</div>
NOTE: Be sure to check the ” in the above code after you copy and paste in your files – a few end up pointing in the wrong direction and the code will break.
Every theme is different and has its own nuances and its own way doing things. If the above doesn’t work, ask the developer of theme if they can assist.
Below is a tutorial I made to show you how I did it using the 2010 theme.
Hi,
I'm wondering if anyone can help me out. I know nothing about CSS :p
I'm using the Forever theme for my blog, loverlyshe.com.
I would like to add a set of social media icons centred in the middle of the page BELOW the header.
If possible I'd also like to remove the border from the header, and increase the height of the header as well.
NO idea where to start. Any help greatly appreciated!
- spam
- offensive
- disagree
- off topic
Like