HOW TO: Customizing Tweet Buttons using Conditional Statements in WordPress

A few days ago, I came across an interesting “problem” on this site. The Tweet button for each blog post used the same format. First came the blog post title, then the URL, and finally the referring Twitter account (in this case, the @49Pixels Twitter account). I wanted to be able to retain this default behaviour within certain posts, but create a customized implementation for posts within a specific category. I also wanted to customize the copy and the URL of those posts. But how?

The answer lay within two rarely used, but powerful components of the WordPress architecture: conditional statements and custom fields. The solution I’ve devised is simple and flexible enough for any WordPress installation, and is documented below.

NOTE: As with any new code implementation, you’ll want to make sure to test in a development environment before pushing your changes to a production server. I recommend MAMP if you’re working in an OS/X environment, or WAMPServer if you’re working in a Windows environment.

Getting Started

The first step in this process will be to open the single.php file for your WordPress theme. You’ll find this file located in wp-content/themes/theme-name/. Place your cursor on the line where you want your Tweet button to appear, and insert the following code:

	<a href="http://twitter.com/share" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>:" data-via="49pixels" class="twitter-share-button">Tweet</a>

In order for this button to render properly, add this code snippet to your header.php file:

	<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

NOTE: Head over to the Twitter Developer Center to learn more about implementing a Tweet button for your blog.

Building the conditional statement

The next step will be to build the framework for the conditional statement:

<?php /* If the user is reading a post in the 49Pixels Live category, load custom Twitter variables. */ ?>
	<?php if (in_category('75')) { ?><?php }; ?>
<?php /* If the user is reading any other post, use the default Twitter query string parameters. */ ?>
	<?php if (! in_category('75')) { ?><?php }; ?>

What I’ve done here is use a conditional statement that declares “if this blog post is in a certain category, display a Tweet button with customized variables”. In this case, those variables are meta keys and values specific to that blog post (more on that in a moment). The last part of that conditional statement declares “if this blog post is in any other category, display a Tweet button with the default variables”. Conditional statements are a very powerful WordPress feature, and have been implemented in various places throughout this site. Head over to the WordPress Codex to learn more about Conditional Statements.

NOTE: I’ve used the number “75″ to denote the numerical value of the 49Pixels Live category on this blog. You’re free to use either the numerical value of your desired category, or the category’s slug. I prefer using numerical values as they never change (unless the category is deleted), but your mileage may vary.

As you can see, there’s nothing within our conditional statement right now, so let’s add the code to render a Tweet button on our page:

<?php /* If the user is reading a post in the 49Pixels Live category, load custom Twitter variables. */ ?>
	<?php if (in_category('75')) { ?>
		<a href="http://twitter.com/share" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>:" data-via="49pixels" class="twitter-share-button">Tweet</a>
	<?php }; ?>
<?php /* If the user is reading any other post, use the default Twitter query string parameters. */ ?>
	<?php if (! in_category('75')) { ?>
		<a href="http://twitter.com/share" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>:" data-via="49pixels" class="twitter-share-button">Tweet</a>
	<?php }; ?>

Using Meta Keys & Values in WordPress

I mentioned above I’m using meta keys and value to retrieve specific data related to blog posts within a certain category. Let’s take a look at the above code snippet again, this time with a few small edits:

<?php /* If the user is reading a post in the 49Pixels Live category, load custom Twitter variables. */ ?>
	<?php if (in_category('75')) { ?>
		<a href="http://twitter.com/share" data-url="<?php echo get_post_meta($post->ID, 'tweet_url', TRUE); ?>" data-counturl="<?php the_permalink(); ?>" data-text="<?php echo get_post_meta($post->ID, 'tweet_copy', TRUE); ?>" data-via="49pixels" class="twitter-share-button">Tweet</a>
	<?php }; ?>
<?php /* If the user is reading any other post, use the default Twitter query string parameters. */ ?>
	<?php if (! in_category('75')) { ?>
		<a href="http://twitter.com/share" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>:" data-via="49pixels" class="twitter-share-button">Tweet</a>
<?php }; ?>

In the first half of my conditional statement, I’ve instructed WordPress to retrieve the key/value pairs for both the tweet_url and tweet_copy custom fields. The second half of my conditional statement will remain as-is.

In the example below, you’ll see the values I’ve added for each custom field. Once you’ve created your custom field and added the value, it can be used for any post (including any posts already published). And because I like to see how many people click on my links, I’ve included a shortened URL so that I can track how many times it was shared, by whom and on which platforms this was shared, along with other details.

A quick aside: Twitter automatically shortens long URL’s using their t.co shortener. I’ve recently discovered that bit.ly is now tracking clicks to t.co URL’s, as long as you are using a shortened URL mapped to a domain that you own (in this case, 49px.ca).

For example, if I share this blog post on Twitter and click on the shortened URL in that tweet, bit.ly will register that activity. You can see an example of that by visiting the analytics page for that blog post at https://bitly.com/49pxlive-ep5+.

NOTE: In order for this data to be retrieved, you will first need to create and add the custom fields to your blog post, along with their values. Custom fields can be added in the (you guessed it) Custom Fields section of any blog post. Please refer to the Custom Fields entry on the WordPress Codex for step-by-step instructions. And while you’re there, read up on how to retrieve and display meta key/value pairs.

Wrap Up

The final step in this process will be to add the finished code snippet below to your themes index.php file. This file is located in wp-content/themes/theme-name/.

<?php /* If the user is reading a post in the 49Pixels Live category, load custom Twitter variables. */ ?>
	<?php if (in_category('75')) { ?>
		<a href="http://twitter.com/share" data-url="<?php echo get_post_meta($post->ID, 'tweet_url', TRUE); ?>" data-counturl="<?php the_permalink(); ?>" data-text="<?php echo get_post_meta($post->ID, 'tweet_copy', TRUE); ?>" data-via="49pixels" class="twitter-share-button">Tweet</a>
	<?php }; ?>
<?php /* If the user is reading any other post, use the default Twitter query string parameters. */ ?>
	<?php if (! in_category('75')) { ?>
		<a href="http://twitter.com/share" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>:" data-via="49pixels" class="twitter-share-button">Tweet</a>
<?php }; ?>

And that’s all you need to do! Load up your site in your development environment and ensure everything is working properly. If everything is indeed working properly, upload your header.phpindex.php and single.php files to your production server.

If you’re stuck and need some help, or have a question, please add a comment below and I’ll give you a hand.

Finally, if you found this blog post valuable, please help me out by sharing it via Twitter, Facebook, or Google Plus.

Leave a Comment

Your email address will not be published. Required fields are marked *