Aweber - Email Marketing Made Easy
Add Social Media Icons to Thesis Photo by: treyevan

Add Social Media Icons to Thesis

October 13, 2010 · 10 comments

in Thesis

Thesis 1.x Notice: Thanks for reading this post! So, here's the deal. I wanted you to be aware that this post was written prior to the release of Thesis 2. So that means the instructions or other information provided applies specifically to Thesis 1.x and not the latest 2.x version. Thanks!

I was asked by a reader of my blog how I added the social media sharing icons below each post. Should I ever change the way these look on this blog, here’s how they appear as of the time I wrote this post:

Social Media Share Icons in Thesis

They’re added to the end of each post below the related posts. It doesn’t really matter how they look, because you should create your own styling or your own buttons, but here’s the code I used to create this. Before I get to that, I wanted to give credit where credit is due. These icons were inspired by the share icons I saw on the Blogussion blog. I also found the code for the share links on a blog which I just can’t recall right now, but it’s pretty standard code.

Anyway, here’s the code. Put this in your custom-functions.php file:

The Code

function share_buttons() {

<?php if (is_home() || is_category() || is_page() ){ ?>
<?php } else { ?>

<ul id="share-buttons">
		<a href="<?php the_permalink(); ?>&title=<?php the_title(); ?>" rel="nofollow" title="Stumble It!" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/custom/images/su.png" alt="StumbleUpon" /></a>
		<a rel="nofollow" title="Tweet About It!" href="<?php the_title(); ?> <?php the_permalink(); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/custom/images/twitter.png" alt="Twitter" /></a>
		<a href="<?php the_permalink(); ?>&title=<?php the_title(); ?>" rel="nofollow" title="Submit to Digg" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/custom/images/digg.png" alt="Digg" /></a>
		<a rel="nofollow" href="<?php urlencode(the_permalink()); ?>&amp;title=<?php urlencode(the_title()); ?>" onclick="';noui&amp;jump=close&amp;url=<?php urlencode(the_permalink()); ?>&amp;title=<?php urlencode(the_title()); ?>', 'delicious', 'toolbar=no,width=550,height=550'); return false;" title="Bookmark this post on"><img src="<?php bloginfo('template_directory'); ?>/custom/images/delicious.png" alt="Delicious" /></a>
</div><!--end social-media-->

<?php } ?> 



I should point out that this will add share links to StumbleUpon, Twitter, Digg and Delicious only. If you Google around town, you can probably find the code for others too. So this code will add the social media icons to your Thesis theme below each post. I used the thesis_hook_after_post_box hook, but you can use whichever hook you’d like. You can read this post I wrote about Thesis hooks.

Something else I wanted to point out is that you’ll notice I’m using some conditional tags at the top so that the icons do not appear on the home page, category pages and pages. It didn’t make sense for me to include them there, but you can adjust those where needed for your situation.

Also, you’re going to need to place your icon images in the images folder inside your custom folder in Thesis, and make sure they’re named correctly based on the image names you see in the code above.

The Styling

You can style these however you’d like, but this is the css code I used which you can insert in the custom.css file:

.custom #share-buttons { 

.custom #share-buttons li { 
	padding:7px 6px;

	.custom #share-buttons li a {
		text-decoration: none; 

.custom #share-buttons img { 

	.custom #share-buttons img:hover {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE 8 */
		filter: alpha(opacity=70); /* IE 5-7 */
		-moz-opacity: 0.7; /* Netscape */
		-khtml-opacity: 0.7; /* Safari 1.x */
		opacity: 0.7; /* Good browsers */

Be sure to put the correct height and width for your icon images on line 19 and 20. Of course, you can style this however you want. I also added a hover state using opacity. I think I got this neat trick from Chris Coyier at Something I didn’t add here is that I wrapped it all in another div so I could create that grey background behind the icons. I’ll leave that to you as to how you want to style it.

So that’s how to add the social media share icons to your Thesis theme. Now go ahead and click them below and share this post!

Was this post helpful? Consider subscribing to my blog via RSS or

This Site Runs on the Thesis WordPress Theme

Thesis Theme thumbnail

If you're someone who doesn't understand a lot of PHP, HTML, or CSS, Thesis will give you a ton of functionality without having to alter any code. For the advanced user, Thesis has incredible customization possibilities via extensive hooks and filters. And with so many design options, you can use the template over and over and never have it look like the same site.

If you're more familiar with how websites work, you can use the fantastic Thesis User's Guide and world-class support forums to make more professional customizations than you ever thought possible. The theme is not only highly customizable, but it allows me to build sites with a much more targeted focus on monetization than ever before. You can find out more about Thesis below:

{ 10 comments… read them below or add one }

Leave a Comment

When commenting, you can use basic HTML tags. If you are pasting in any code, please escape it here and then include that code within <pre></pre> tags. Thanks!

CommentLuv badge

Previous post:

Next post: