Add The New Twitter Tweet Button to Thesis

So Twitter has a cool new tweet button you can add to your blog. I’m sure there’s a bunch of plugins you could use to add it, like this one for example, but most times I prefer to add this sort of thing without a plugin. Here’s what I did to add the Twitter tweet button to my Thesis site:

Step 1: Generate your Twitter tweet button code

Visit the Twitter Tweet Button code generator on Twitter. Customize it how you’d like and simply grab the code.

Step 2: Add the code to your custom functions file

Using Thesis hooks, we’re going to add the tweet button code to the top of every post. So, this is just where I chose to put the button. Of course, you should decide where you want it and use the applicable Thesis hook. Add this code to your custom-functions.php file:

function tweet_button() {

if (is_single()) { ?>
<div class="tweet-button">
	<!--ADD YOUR CODE HERE-->
</div><!--end tweet-button-->
<?php } else { 	}
}

add_action('thesis_hook_before_headline','tweet_button');

Paste in the code you copied from the Twitter site where it says “Add your code here.” Note that the way I have this coded is that the button will only show up on single posts, not on actual pages. It wouldn’t make sense to tweet a contact page for example. If your requirements are different, you’d just have to modify the code so the button shows up where you want. Just use WordPress conditional tags for your needs.

Step 3: Add the CSS

I wrapped the code in a div with a class of “tweet-button”. This is so that I could float the button to the right, or position/style it how I want. Again, you should add your own positioning based on where you want it in your theme. This is just the way I did it, and a starting point for you to customize it. Add this to your custom.css file:

.custom .tweet-button { float:right; margin:0 0 0 15px; }

That’s it!

Pretty simple. Now click the button and tweet this post!

Tagged as: Social Media, thesis tips, Tweet Button, Twitter