How to Add Social Media Buttons Underneath the Header

By Thomas Griffin|inLine Tutorials|5 Comments

I have had a couple requests from people wanting me to show them how to get the social media buttons underneath the header like I have on this site. This will make for a good tutorial, so follow along to learn how you can do this and your site too. We will be using both your child theme’s functions.php file and style.css file.

First of all, you will need to download the image. Unzip the file and find the image titled “social.png”. Upload that image into the images folder of your child theme. If you haven’t already downloaded that, click on the “Sample Child Theme” link in the navigation menu above to get the sample child theme.

Instructions for your functions.php file

Copy and paste the following code into your functions.php file:

// add social icons to the right of the secondary nav menu
add_action( 'inline_secondary_nav', 'tgm_social_icons' );
function tgm_social_icons() {
	echo '<div class="social-icons">';
		echo '<ul class="social">';
			echo '<li><a class="rss" href="http://feeds.feedburner.com/inlinetheme" title="RSS Feed" target="_blank">RSS Feed</a></li>';
			echo '<li><a class="twitter" href="http://twitter.com/jthomasgriffin" title="Twitter" target="_blank">Twitter</a></li>';
			echo '<li><a class="facebook" href="http://facebook.com/thomasgriffinmedia" title="Facebook" target="_blank">Facebook</a></li>';
			echo '<li class="last"><a class="google" href="https://plus.google.com/117070403922420030160/posts" title="Google+" target="_blank">Google+</a></li>';
		echo '</ul><!--end .social-->';
	echo '</div><!--end .social-icons-->';
}

Change the links with the href=”" to match your own. It may be that you only want to use a couple of these buttons. If this is the case, remove the list items that you do not want, and make sure that you add the class of “last” to the very last list item in your unordered list. This will keep the styling in check.

Instructions for the style.css file

Next, copy and paste the following code into your style.css file:

/* :..[ Social Icons ]..: */

.social-icons { float: right; display: inline; width: auto; height: auto; margin: 7px 0 0; padding: 0; }
.social-icons .social { list-style: none; margin: 0; padding: 0; }
.social-icons .social li { float: left; margin-right: 5px; width: 24px; height: 24px; }
.social-icons .social li.last { margin-right: 0; }
.social-icons .social li a { display: block; outline: none; width: 24px; height: 24px; text-indent: -9999px; }
.social-icons .social li a.rss { background: url('images/social.png') no-repeat scroll 0 0; }
.social-icons .social li a.twitter { background: url('images/social.png') no-repeat scroll -24px 0; }
.social-icons .social li a.facebook { background: url('images/social.png') no-repeat scroll -48px 0; }
.social-icons .social li a.google { background: url('images/social.png') no-repeat scroll -72px 0; }

That will display the icons exactly in the same way as on this site. If you have removed any of the icons from the list, you can remove the subsequent CSS related to it in here as well if you would like (although it is not necessary).

That should wrap it up! Let me know if you have any questions.