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.
Wayne John is a health coach for people that want to lose weight, gain weight, improve athletic performance, or simply maintain a healthy lifestyle. Wayne has lost over 55 pounds and improves his current health every day by using simple, straight-forward techniques that anyone can integrate into their lives to achieve the same. Contact Wayne today to realize your own health and fitness goals, or get started now by completing and submitting the free Wellness Profile. He also has been developing websites since 1995 and programming solutions for clients even longer. He'd rather be outside having fun in the sun though.
Twitter: ariherzog
says:
“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…”
To be fair, Wayne, that sentence presumes one doesn’t change the file. In actuality, actions can be added anywhere in the file. I have about a dozen custom functions, each with its own action, and the action is directly underneath the respective function. Makes it easier for me to delete stuff when I go experimental.
Twitter: ariherzog
says:
Thanks for sharing the Thesis function, btw, Wayne. It’s been a few months since I removed Twitter links on my blog’s comment section — but just stole your code.
You may want to edit the above, though, for your code includes your display of the CommentLuv badge and some page breaks to fit that. To the unclear coder, that stuff may confuse ‘em!
Twitter: waynejohn
says:
Thanks for calling that out. I should have caught that, but I guess it was my time to be bitten by my own code. Sigh…
Good points all around, Ari. I agree with placing the action next to the function. Seems that is better than grouping all the actions at the top. It might be tomato tomato, but I like your method better now that I think about it.
Thanks Ari! Hope that doesn’t bite anyone else…
Twitter: sabahblogclub
says:
That is one good WordPress theme you have there. Will bookmark your theme and maybe change my blog with it in the fiuture. If my blog can gain any profit…..
Twitter: waynejohn
says:
Thanks, that’s Thesis, not me! Keep pluggin away and learning and you’ll get the profits.
Twitter: http://www.baldydog.com
says:
And my programming education continues..can I get a WayneJohn coding cert?
Twitter: waynejohn
says:
Hey, look at your site! Nice! Really going for it eh? Looking good!
Twitter: http://www.baldydog.com
says:
I want to redo it and make it a total wordpress site..another project that is on the backburner.
Twitter: waynejohn
says:
If you want any help with that, just give me a shout Adam. Looks to me like it would take about 8 hours to get done. Give or take a few hours.
Twitter: justynabizdra
says:
Hi John,
Thanks for your excellent tutorial and for finding time to answer my question in such a thorough way
The code you made works perfectly. Twitter input box looks great on my blog now!!!
Here is to Thesis
By the way, are you Thesis developer? (The keyword suggests so)
Twitter: waynejohn
says:
Nope, not a “thesis” developer, but a developer in general. All these things are using the same technologies I use…they just package them up different.
Glad you liked it!
Twitter: FinallyFast
says:
I apologize in advance as this is a little off topic, but there is so much hype around Thesis these days (and frameworks in general), why are folks so quick to drop $90 or $165 on Thesis with free alternatives like Joomla around? I suppose I’m a little disconnected from the whole framework scene and use standalone WordPress themes exclusively at this point, but I’m definitely open to experimenting with thesis at this point (especially for my work blog where the business would pay the fee).
Twitter: ariherzog
says:
Joomla is a different blog platform, as is Typepad and Blogspot and Squarespace, etc. Thesis is a skin that runs on top of WordPress, similar to Genesis and Headway and Woo, etc.
If you love your Porsche with its boxter engine and want more power, wouldn’t you pay the money for add-ons?
Twitter: FinallyFast
says:
O, I know that Joomla is a different platform, but as far as can tell it’s the only CMS with a built in framework and has a similarly devoted development fanbase to WordPress. What I’m asking really is whether Joomla is a worthy alternative to Thesis. Or are there some benefits of the Thesis framework that aren’t available or aren’t fully realized in the Joomla iteration that make it worth paying for.
Twitter: ariherzog
says:
Joomla has a devoted fanbase? If you said Drupal, I’d agree; but Joomla?
I put Joomla in the same category as Expression Engine; they have their purposes and their devotees, but not to the level of WordPress and Drupal.
My 2 cents.
Twitter: waynejohn
says:
Ari’s right. Thesis is nothing more than another theme that you apply to WordPress. However, it comes well built, with a ton of features and is easier than most other themes to manipulate.
The problem with other themes is that you’re constrained to the developers way of doing things. For instance, if other themes didn’t provide a way for end-users to modify their install, the next update of the theme would likely break their changes. Thesis provides a nice way to accommodate those changes, like this post points out, so we can upgrade WordPress, the theme, our plugins and everything should be right as rain after the upgrade.
You are constrained somewhat to how Thesis does things, but they’ve thought that through pretty well, and overall I’m pretty pleased with my purchase so far (developer license).
So what you have is apples and oranges to some extent. Both are good systems, and they both have their following. I don’t know many blogs that are running on Joomla though.
Twitter: FinallyFast
says:
Apparently I was further out of the loop than I thought!
@Ari
I’ve honestly never heard of Drupal, but I’ll definitely be looking into it.
@Wayne
I totally get it now. A lot of the hype around Thesis, as far as what I’ve read, covers how customizable it is. My thought was that any WordPress theme is pretty customizable if you understand a bit of CSS, but If it’s built in such a way that you can update the theme without having to redo all of your changes, that’s actually pretty awesome.
As far as popular websites/blogs using Joomla: check out this list. I don’t know that all of them can be substantiated, but both IHOP.com and mcdonaldsarabia.com definitely use Joomla and say so in the source code.
Twitter: ariherzog
says:
Look at http://drupal.org — which powers http://whitehouse.gov, among other websites. I’m sure you’ve seen Drupal sites and thought they were something else.
Twitter: waynejohn
says:
Themes that I’ve used in the past have always had some element that I wanted changed, but no way to change it without having to remember the change come upgrade time. I’m pretty pleased with Thesis so far. More importantly, I’m glad I’m finally making an effort to remember to leave a clean upgrade path! I’ve bitten myself too many times on that in the past. lol
It’s really hard to keep up with all the stuff out there. I’ve spent time on my host just installing whatever, over and over again, just to get an idea of what everything is capable of, and when it might be useful to use. I might have to do that again pretty soon…there are some new things out there that interest me. Specifically, open source classified systems.
Mmmm..Ihop…now I want a double blueberry plate… We both know that with some graphics, and a little css work, we can make any platform look however we want. Even mask what the backend system is to snoopers. Joomla has it’s place among the best open source CMS systems for sure.
Twitter: waynejohn
says:
Actually, I wouldn’t call Joomla a blog platform, as it’s more closely related to a true CMS than anything else. However, those lines are beginning to blur a bit as WordPress can also be used as a poor-mans CMS too.
Twitter: JoyMystic
says:
Thanks Wayne for the article, tips, and code. You and Ari seem to put in place a very nice set of features that enriched the default WP comment system and made it rewarding and welcoming for others to post. If I drop Intense Debate, I will definitely go your way. I also run Thesis. Best!
Twitter: waynejohn
says:
I’ve toyed with the idea of installing Intense Debate a few times, but never really took the dive to get it going. Something about having control over that area makes me happy.
Glad to have you here, Joy! Hope to hear more from you in the future. Cheers!
Twitter: AboriginalMama
says:
This made a little bit of sense, then I read Ari’s comments and it made even more sense. I’m not fluent in code. =)
This looks like a really great little option, though. Especially since Twitter is so unbelievably huge for bloggers.
Delena
Twitter: ariherzog
says:
Heh, I’m not fluent in code either. Probably because I failed a logic course in college.
I think link back to twitter profile page from Twitter link through comment can have an impact on pagerank of that twitter page. The following twitter profile http://twitter.com/peterdrew has a pagerank of 6 (checked from http://www.prchecker.info/check_page_rank.php)) and I don’t know how :s
Any idea guys ?
Twitter: waynejohn
says:
Well, it’s another page that can be indexed by Google, and PR can be applied to any page. I remember at one point my twitter stream was a PR 6, but I think that’s gone or at least, I don’t see any PR applied with my browser plugin I use.
I think any links that are from sites that are worthy to place links are good links. To be honest with you, Nasif, I don’t place much emphasis on link building. I just try to focus on creating relationships and allowing the links to just happen as they happen.
Thanks for taking time out to comment. Perhaps some of the other commentators here have some thoughts they can add to your question.
Plugins are very useful to bloggers. The ability to have a twitterlink can attract more commenters who are into twitter too. As we all know, twitter has been one of the most popular networking site so it’s beneficial to have it too. Great tutorial for the twitter link positioning!
Twitter: Radioheada
says:
Hey Wayne
I have just came from Justyna’s blog. The plugin works fine.
Thanks a lot
Martyna
Twitter: waynejohn
says:
Good news! Thanks for sharing!
Twitter: pixelate_co_cc
says:
Sorry to bump an old post but I did the same for evolve theme using this tutorial. How do I edit the length of the field ?
Twitter: waynejohn
says:
You should be able to set the width via css.