Add social media icons to navigation bar

Add social media icons to navigation bar

I have recently become interested in learning more about WordPress themes and how to modify and create them. Normally with a premium theme you can setup social icons from somewhere within the dashboard and the theme’s custom settings but when you write your own you probably won’t have that so you will need to code it yourself or use a plugin. I found I didn’t really like any of the plugins positioning or style so I went about figuring out how to add them myself.

I have titled this post add social media icons to navigation bar because that is how it looks but strictly speaking my social icons aren’t actually in the navbar, they are part of the header. I am a novice when it comes to website coding (CSS, PHP, HTML etc) so there may well be better ways to achieve this but this is how I did it and I am pretty pleased with the results.

First off you need to locate and download some social media vectors you like the look of. There are loads of free to use ones out there so you should be able to find something that suites your theme’s styling. If you have an images directory already in your theme put the .png’s there, if not create an images folder.

Next you need to modify your header.php file with this:

<div id="social">
	<div id="socialicons">
		<a href="http://www.yourwebsite.co.uk/feed/" target="_blank"><img src="../images/rss.png" alt="email icon" /></a>
		<a href="https://www.facebook.com/pages/yourpage" target="_blank"><img src="../images/facebook.png" alt="email icon" /></a>
		<a href="https://twitter.com/yourpage" target="_blank"><img src="../images/twitter.png" alt="email icon" /></a>
		<a href="http://lnkd.in/yourpage" target="_blank"><img src="../images/linkedin.png" alt="email icon" /></a>
	</div>
</div>

You will need to replace all the URL’s here with the appropriate ones for your social networking pages and the URL of your vectors. You can add additional lines if you want to add more social icons.

Next you need to edit your CSS, depending on your themes framework depends on if you have multiple CSS files, for some it might just be style.css others might need to add it to bootstrap.css for example. My CSS is as follows:

#social {
  display: block;
  position: fixed;
  top: 45px;
  right: 5%;
  z-index: 9999;
}
#socialicons  img{
  position: relative;
}

The important parts here are display and position. Having the extra div’s in the PHP means I can fix the position of the social icons at the top of my page and stay there when I scroll down the page. If I just have the one div and try to use position: fixed then all my icons bunch up on top of one another. The extra div means I can then use relative positioning for the icons themselves so they don’t bunch up. The ‘top’ and ‘right’ settings place my social ‘container’ in the position on the page I want, in my case they appear on the navbar and stay there when I scroll down the page. You might want them elsewhere so adjust these values as needed or if you want them on the left use ‘left’ instead of right. You can also add a load of other styling choices here as well such as backgrounds and borders etc.

You might also want to add this extra line somewhere in your CSS as well to compensate for the admin bar when you are logged in.

body.admin-bar #social { top: 76px !important; }

For me it is 76px, this is because the admin bar adds 28px so I have added 28 to 45 to come up with 76px. So when the admin bar is active my social icons appear 76px from the top instead of 45px, therefor accounting for the extra 28px the admin bar adds.

Doing this myself instead of with a plugin gave me a lot more freedom over the style of my social icons. Also as a general rule I try and keep plugins to a minimum as they can add a lot of bloat to your site.

Hope this has been helpful.

One thought on “Add social media icons to navigation bar

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>