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">
	<li>
		<a href="http://www.stumbleupon.com/submit?url=<?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>
	</li>
	<li>
		<a rel="nofollow" title="Tweet About It!" href="http://twitter.com/home?status=<?php the_title(); ?> <?php the_permalink(); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/custom/images/twitter.png" alt="Twitter" /></a>
	</li>
	<li>
		<a href="http://digg.com/submit?url=<?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>
	</li>
	<li>
		<a rel="nofollow" href="http://delicious.com/save?url=<?php urlencode(the_permalink()); ?>&amp;title=<?php urlencode(the_title()); ?>" onclick="window.open('http://delicious.com/save?v=5&amp;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 del.icio.us"><img src="<?php bloginfo('template_directory'); ?>/custom/images/delicious.png" alt="Delicious" /></a>
	</li>
</div><!--end social-media-->

<?php } ?> 

<?php
}

add_action('thesis_hook_after_post_box','share_buttons');

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 { 
	list-style-type:none; 
	overflow:hidden; 
	margin:0; 
	height:60px;  
}

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

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

.custom #share-buttons img { 
	width:125px; 
	height:45px; 
}

	.custom #share-buttons img:hover {
		cursor:pointer;
		-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 css-tricks.com. 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 }

lawton chiles October 13, 2010 at 10:26 am

Thank you-I’ve done my best before I saw your reply but maybe now it’s too cluttered? http://www.chilesadvertising.com

Just trying new things out, even if it’s ugly.

My CSS file might be a big currupted, gotta re install it.

Now i have to figure out how to take the header and sidebars and comments off fora Thesis landing page…
lawton chiles recently posted..Words Are Your Weapons-Weekly Roundup

Reply

Avi D October 13, 2010 at 11:23 am

I love the opacity trick you have going on. I thought that it was jquery but it’s awesome to see that it’s good ol’ css which works cross-browser! It’s a very smooth look you have goin….

I intend using this technique on my site too….not the social buttons but the opacity trick. Thanks…

Reply

Thesis-Blogs.com October 13, 2010 at 11:34 am

Yeah, it’s pretty cool. I learned it from my favorite web genius Chris Coyier. I would usually create an image sprite for something like this, but this way is much quicker.

Reply

Wow January 30, 2011 at 10:08 am

Thanks for the tip! However, the whole page seem to have moved after installing the buttons. The Leave A Comment box moved to the upper right side of the page, beside the content, when it should’ve just been below the buttons. The whole page looked messed up. How can I get it back to the normal size? Here’s the link: http://thecouchwriter.info/2010/06/freelancing-rocks-and-sucks/

Reply

Elizabeth February 23, 2011 at 6:44 pm

Great post!

I’m using the ShareThis plug-in to add social media icons to my posts, and I’m having some difficulty with it. Specifically, the share icons are showing up only on my individual blog post pages, not on the blog page where all of the excerpts are (http://dotcomdiva.com/blog/). Ideally I want the share widgets on both and they should reflect the same counts.

Any idea how to correct this? Alternatively let me know if you do paid consulting.

Cheers!

Reply

Thesis-Blogs.com February 23, 2011 at 7:01 pm

Hi Elizabeth. Thanks for commenting. Usually this sort of plugin that you’re using has a setting to enable the share links on the home page as well. I haven’t used the one you’re referencing before, so I don’t know for sure. If it doesn’t have that option, then there may be another option to insert the links manually, in which case you would need to add some code to the custom-functions.php file and attach that to a hook. You could use the ‘thesis_hook_byline_item’ hook and it should show up on the home page as well. One thing though that you might have to test is that since you have individual posts on the home page, check to make sure that the link that is shared on either FB or Twitter, are links to the actual post and not just the main blog URL.

As to whether I do paid consulting, yep I do that. You can contact me through the ‘hire me’ link in the navigation if you’d like to discuss that. Thanks.

Reply

anuj@webtricks March 2, 2011 at 9:32 am

hi,how i can add more social icon ?
anuj@webtricks recently posted..5 Most Used SEO WordPress Blog Plugins Recommended For New Blog

Reply

Thesis-Blogs.com March 2, 2011 at 1:55 pm

You would just add the additional code for the other links to the code provided above. You’d have to research what the links are for other social media sites.

Reply

Robert Sail September 25, 2012 at 7:57 am

Hello,
Great thesis tutorial, I will use something similar on my wedding website. Thank you for your help.

Regards
Robert Sail
Robert Sail recently posted..Trent Bridge Nottingham Wedding Venue

Reply

Rob @ Local Exposure August 14, 2013 at 3:11 am

Hello,

Thanks for the great tutorial, we are still rocking thesis 1.8 and have just used this on one of our company reseller sites.

Kind regards
Rob
Rob @ Local Exposure recently posted..Google’s New Photo Spheres

Reply

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: