Justin S. Lewis

I don’t like using plugins for share buttons when I’m designing a WordPress theme. Instead, I add something like this to my functions.php:

   // social media
    	function custom_social_media_links() { ?>

    <a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>" title="Click to share this article on Facebook" target="_blank"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/facebook.png" alt="Share this article on Facebook" /></a> 

    <a href="http://twitter.com/home?status=<?php the_title(); ?> – <?php the_permalink(); ?>" title="Click to share this article on Twitter" target="_blank"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/twitter.png" alt="Share this Article on Twitter" /></a>

    <a href="http://reddit.com/submit?url=<?php the_permalink() ?>&title=<?php the_title(); ?>"title="Click to share this article on Reddit" target="_blank" rel="nofollow"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/reddit.png" alt="Add this Article to Reddit"/></a> 

    <a href="http://www.stumbleupon.com/submit?url=<?php the_permalink() ?>&title=<?php the_title(); ?>" title="Click to share this article on StumbleUpon" target="_blank" rel="nofollow"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/stumbleupon.png" alt="Add this Article to Stumbleupon" /></a> 

    <a href="mailto:?subject=<?php the_title(); ?>&body=<?php the_permalink() ?>" title="Send this
    article to a friend!"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/email.png" alt="Email this Article to a friend" /></a>

Make sure your icons are located in your theme’s images folder. You can get some free icons here.

Then add this to your theme wherever you want the buttons to show up:

<?php custom_social_media_links(); ?>

You can wrap that last bit of code in a div and style it with CSS.

For example, I have placed my code with this:

 <p class="share"><strong>Share:</strong><?php custom_social_media_links(); ?> </p>

Styled it with this:

 .share {width:100%;
    	padding: 0.4em 0 0.4em 0;
    	font-size: 1.2em;
    	line-height: 1.6em;
    	color: #888;
    	clear: both;
    	border-bottom-width: thin;
    	border-bottom-style: solid;
    	border-bottom-color: #000000;
    }

So it looks like this:

You can add or remove any of the share links/icons you want by editing the function code above.