How I added the Twitter ID field to comments on Twitip.com

A couple of days ago I added the ability for those leaving comments on my TwiTip Twitter Tips blog to add their Twitter ID as well as their URL to comments. Since doing this I’ve been asked time and time again how we did it. In this guest post Sean Walberg (the guy who actually made it happen and who is my server admin on TwiTip) explains how he did it.

If you’ve been to Twitip.com in the past couple of days, you’ve probably noticed that commenters have Twitter IDs in their posts:

This was something Darren thought up while we were preparing to move his server, and asked me to put it in place. Twitip runs on WordPress, which is easily extended through plugins. Fortunately, someone wrote a plugin to take care of most of what’s needed to do this.

The steps we’ll follow here are:

1. Get the plugin and activate it
2. Configure the plugin for the new Twitter ID field
3. Modify your theme to capture the information in your comment form
4. Modify your theme to print the Twitter ID in the displayed comments

The first thing you’ll need is the Extra Comment Fields plugin. I used Version 1.2 Beta if you want a direct download link.

There’s one PHP file in there that you’ll put in your wp-content/plugins/ directory. When you go back to your WordPress Admin page, you’ll see the Extra Comment Fields plugin in the Inactive Plugins section of your Plugins page (off to the right of your screen, between Settings and Users). Activate this plugin.

The Extra Comment Fields plugin is tricky in that there are several references to the field name, and they all have to match (including the case). I chose “twitter” which should be easy enough to remember.

From the WordPress Admin screen, navigate to Settings, then Extra Comment Fields. (If you don’t see Extra Comment Fields in the list of plugins, go back a step and make sure you activated it)

Type “twitter” into the text box and click “Add Field”. Your screen should look like this:

This step makes the necessary changes to the database to store the comment. Heed the warning you see, if you delete this field, it removes the column in the database.

Next, go into your theme directory, it’s in wp-content/themes/. Darren runs Thesis, so we’re looking at wp-content/themes/thesis. Open up comments.php. Find the spot where the comment form is displayed by looking for comment_author_url.

You’ll want to add a new comment field with the name of “twitter”. This will depend a lot on your theme, but cutting and pasting goes a long way here. The big change, though, is that WordPress doesn’t keep this value in your cookie, so you can’t pre-populate this in the value attribute (in simpler terms, people who have commented before will have their name, email, and URL filled in, but not the Twitter ID). In Thesis, you’ll have:

                        else { // Otherwise, give your name to the doorman
?>
                                        <p><input class="text_input" type="text" name="author" id="author" value="<?php echo $comment_author; ?
>" tabindex="1" /><label for="author"><?php _e('Name', 'thesis'); ?></label></p>

                                        <p><input class="text_input" type="text" name="email" id="email" value="<?php echo $comment_author_emai
l; ?>" tabindex="2" /><label for="email"><?php _e('E-mail', 'thesis'); ?></label></p>
                                        <p><input class="text_input" type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>"
 tabindex="3" /><label for="url"><?php _e('Website', 'thesis'); ?></label></p>

                                        <p><input class="text_input" type="text" name="twitter" id="twitter" value="" tabindex="4" /><label for
="twitter"><?php _e('Twitter id', 'thesis'); ?></label></p>
<?php

In the default theme, it’ll look like this:

<?php else : ?>

<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />

<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>

<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />

<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>

<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
<label for="url"><small>Website</small></label></p>

<p><input type="text" name="twitter" id="twitter" size="22" tabindex="4" />
<label for="twitter"><small>Twitter ID</small></label></p>


<?php endif; ?>

At this point load your site in your browser to make sure everything looks OK.

The last step is to print the Twitter ID alongside the comments. This is also done in comments.php. The comments are printed out in a loop which varies from theme to theme. In Thesis, you’ll start right after:

<?php
thesis_hook_before_comment_meta();
thesis_comment_meta($comment_number);
thesis_hook_after_comment_meta();
?>

(It’s entirely possible there’s an easier way to do this in Thesis)

In the default theme, you’ll see the following, and you’ll want to start right before it.

                        <?php comment_text() ?>

Wherever you end up starting, insert the following code:

<?php if ($comment->extra_twitter) {
// Strip out the @ if they put it there because we're going to need to get rid of it for the url anyway
$extra_twitter = preg_replace("/^@/", "", $comment->extra_twitter);
$extra_twitter = htmlentities($extra_twitter); ?>
<a href="http://twitter.com/<?=$extra_twitter ?>">@<?=$extra_twitter?></a>

<?php } // extra_twitter ?>

The Extra Comment Fields plugin puts the data from the twitter field in a method of the $comment object called extra_twitter (and if you called your variable foo, it would be called extra_foo, and so forth). The above code checks to see if it’s been set (that is, someone submitted a Twitter ID), and if so, strips off any leading “@”. This allows people to enter their Twitter IDs both with and without the @. The code then calls the htmlentities function to strip out any funny stuff, and then print it out as a link. If you want to style the link with any CSS, change the HTML accordingly.

That’s it!

Sean Walberg is a network guy, freelance author, and systems administrator.