I’ve switched to Thesis! Want to have an awesome theme like this? Get one here!

Customizing the placement of the TwitterLink WordPress plugin with Thesis

I was asked by Justyna Bizdra from RSS Marketing how I managed to relocate the output of the Twitter textbox on my comment form.  It’s a good question, and simply replying to the comment wasn’t good enough since there are probably a number of users out there with the exact same question.  If you’re running Thesis and using the TwitterLink plugin, read on to learn how to customize the placement of this great plugin.

In my comments, you’ll see that I offer commentators the ability to link to their Twitter profile if they would like to.  This is done with the TwitterLink plugin by Andy Bailey.  It’s a great plugin, and I believe it adds value to my blog and to my visitors here.  I’ve never had a problem with it.  However, one thing I don’t like about WordPress is that when it comes to the comment form, you really don’t have a lot of options in terms of formatting the positions of elements you can add there.  Not without some custom coding, at least.

When you add the TwitterLink plugin to your install of WordPress, by default, the plugin will place itself at the very bottom of the comment form, underneath the submit button.  This isn’t the most ideal placement for the input textbox, since users could easily miss the opportunity to input their Twitter usernames if they click the submit button prematurely.

Ideally, the TwitterLink input textbox is in line with all the other input textboxes.  See my comment form below as an example of what I mean.  It comes right after website, and in my opinion it works best in the position it’s in.

Moving the position of the TwitterLink plug-in

If you would like to move your TwitterLink plugin input textbox into a similar position, here is how I’ve done this.  Because I am running the Thesis theme, this change was really easy, and ensures that I can continue to upgrade WordPress, Thesis and my plugins without the fear of causing failure when I perform an upgrade to any part of my blog.

1.) The first step is to modify the settings for TwitterLink.  Where it asks “Add Twitter Field Automatically?”, input “No”.  We don’t want TwitterLink to place the control, we’ll do that ourselves.  Also, the setting for “Manual Link”, specify “No”.  Everything else you can specify to your tastes.

2.) Second, edit your Thesis custom_functions.php file in the Thesis – Custom File Editor.  Add the following function to the bottom of the file:

UPDATE! It was brought to my attention in the comments below that my code also included my call to Comment Luv as well…I’ve updated the code and there should be no problems now.

function add_twitter_username_field(){
 echo "<p><input class=\"text_input\" type=\"text\" name=\"atf_twitter_id\" id=\"atf_twitter_id\" value=\"\" tabindex=\"4\" />";
 echo "<label for=\"atf_twitter_id\">Twitter</label>";
 echo "</p>";
}

This adds the input textbox, and the label which reads “Twitter”.  However, we need one more element to put this altogether.  Having the function is useless unless we add one more statement that will ensure the function is called whenever the comment form is displayed.

3.) We need to add an action to the custom_functions.php file.  Near the top of the Thesis custom functions file, you’ll see an area that the authors of Thesis have dedicated to adding new actions.  In that area, add the following hook:

add_action('thesis_hook_comment_field', 'add_twitter_username_field');

The layman read on this is “Add an action, when the “thesis_hook_comment_field” is available for us to inject commands, we want the “add_twitter_username_field” function to be executed.

From there, if you need to apply any custom CSS to the form, you can do so in your custom.css file.  I found that I didn’t need to as the control conformed to the existing styles that the other input textboxes were already using.

Conclusion

When you add custom plugins to WordPress, they don’t always place themselves in the most optimal position.  Sometimes the position will be in the least optimal position, as is the case with the TwitterLink WordPress plugin.  Thankfully, if you’re running Thesis, it’s pretty easy to modify where this plugin outputs its code.  By making the changes I’ve laid out above, the TwitterLink plugin will be visible to the user before the submit button, making it appear to be more a part of the comment form.

Comments on this entry are closed.