Thesis Tutorial – Displaying Users Twitter link in the Comments Section

by George Serradinho on November 12, 2009



I recently reviewed the TwitterLink Comments WordPress Plugin and this post will now explain how to manually implement the Twitter link in your comments section. If you know the plugin already, then you can carry on reading below. If not, then I suggest you familiarise yourself with plugin functionality first.

Please remember to backup your custom.css and custom_functions.php files.

First of all, head over to the TwitterLink Settings page. Go to the ‘Link Format’ section and enable the manual link (see image below). This will ensure that the plugin does not automatically place the users Twitter link, we will decide where we would like it displayed.

WordPress Plugin - TwitterLink Comments Setting

WordPress Plugin - TwitterLink Comments Setting

Thesis theme currently has 3 hooks for the comment section that can be used. This gives you a bit more leverage on where you would like the link to appear.

The 3 Thesis Comment Hooks:

  • thesis_hook_before_comment_meta – Within dt.comment, before the comment’s meta information. If there is more than one comment on the page, this hook is fired for each one.
  • thesis_hook_after_comment_meta - Within dt.comment, after the comment’s meta information. If there is more than one comment on the page, this hook is fired for each one.
  • thesis_hook_after_comment - Within div.format_text, after the comment’s text. If there is more than one comment on the page, this hook is fired for each one.

Thesis CSS Styling

The css styling must be copied to your custom.css file. I think this is straight forward as we are using the same styling as with thesis note and alert boxes. The only difference is that the class name is different and we have used another image and background colour.

Thesis Function

The function must be copied to your custom_functions.php. I have used the ‘thesis_hook_after_comment_meta’ hook below, but I also show you examples of the other two hooks below. You can upload any image and then use that instead of mine.

Download: Thesis Tutorial - Displaying Users Twitter link in the Comments Section (176) 1.29 KB

I have edited this post and put the CSS and PHP in a text file. Download the zipped file and get it working on your site in less than 5 minutes.

Examples of the 3 Thesis hooks

Below are examples of what the result will be when using the 3 hooks.

TwitterLink Comments - 3 Thesis hooks

TwitterLink Comments - 3 Thesis hooks

You might have to play around with the formatting if you would like to enhance it a bit, the choice is yours.

Final Thought

So, this Thesis tutorial was very easy to accomplish and I hope it was easy for you too. Did you implement this on your site? Would you? I would like to hear back from you all, all comments welcomed.

Submit post to StumbleUpon Submit post to Twitter Submit post to Delicious Submit post to Digg Submit post to Reddit Submit post to Technorati Submit post to Facebook Submit to Shoutmeme.com

Other Interesting Posts:

WordPress & Thesis Customizations

This webiste is using Thesis theme & WordPress. I can create you a similar website or update yours.

View my services or portfolio for more details.

Author Information

Article by George Serradinho

I am the proud owner of Serradinho and have made this my second home. I'm into blogging, downloads, WordPress and the internet in general. I also love meeting and helping others and learning new techniques.

{ 2 trackbacks }

Smashing Saturday: Link Love For Bloggers | Sahil Kotak dot Com
November 14, 2009 at 12:40 pm
eBlogTip: Friday Link Love #1 | All Tips That Every Blogger Needs!
November 20, 2009 at 11:34 am

{ 52 comments… read them below or Leave your opinion! }

1 Roseli A. Bakar November 12, 2009 at 8:51 am

Follow on Twitter Follow @EzyBlogger on Twitter.



Awesome George ! Just what I was looking for.
Roseli A. Bakar´s last blog ..Setting Up Facebook Fan Pages and Groups My ComLuv Profile

Reply

2 George Serradinho November 12, 2009 at 9:01 am

Follow on Twitter Follow @gfserradinho on Twitter.



@Roseli – glad to be of help, let me know when you have implemented it so that I can see what you have done.

Reply

3 izzat aziz November 12, 2009 at 12:46 pm

Follow on Twitter Follow @izzataziz on Twitter.



another thesis tutorial, and i just can read and amaze with how easy to do stuff with thesis.. but just thati don’t have thesis theme to play with.. sigh -.-

but great tutorial still :)

Reply

4 James November 12, 2009 at 1:37 pm

An outstanding Thesis enrichment tutorial Serradinho I re-tweeted this post but there are 3 questions I’d love to ask:

1. What plugin you use for recent posts widget that displays thumbnails
2. How to make “Sign up for RSS via Email” On the sidebar
3. Finally how to create related post and and bookmark in one line beneath each post.

Thank you very much :)

Reply

5 George Serradinho November 12, 2009 at 1:58 pm

Follow on Twitter Follow @gfserradinho on Twitter.



@James – thanks for stopping by. I have tried to answer as best I can.

1. You can read a post about the plugins over at Alex’s site
2. I will see if I can post about it.
3. I will see if I can post about it.

Reply

6 James November 12, 2009 at 5:34 pm

@Serradinho Thank you so much for the response and would you want to post about the 2nd n 3rd questions? I’ve subscribed to your rss via email to make sure I got noticed! Thanks again mate

And I have visited Alex page and followed the guide I did it but I couldn’t display date on the right side beneath title post just like yours, can you tell how to make date position just like yours?

Ragards

Reply

7 George Serradinho November 12, 2009 at 6:26 pm

Follow on Twitter Follow @gfserradinho on Twitter.



@James – I sent you an email with details about the date. I will post about question 2 and 3.

Reply

8 James November 13, 2009 at 1:38 pm

Serradinho – Email received thank you, your kindness is unspeakable mate:)

Reply

9 George Serradinho November 13, 2009 at 2:13 pm

Follow on Twitter Follow @gfserradinho on Twitter.



@James – no problem mate, always happy to help others out.

Reply

10 Anand Srinivasan November 12, 2009 at 2:22 pm

Follow on Twitter Follow @knewthis on Twitter.



I’ve not had these plugins on my main website since it was simply a site on statistics and facts where not many people were interested to comment upon. But I am now writing on a new blog, and I think I will install this and also comment luv..
Anand Srinivasan´s last blog ..3 + 1 Things A Niche Blogger Needs To Be Successful My ComLuv Profile

Reply

11 Sandesh Mascarenhas November 12, 2009 at 9:28 pm

Follow on Twitter Follow @sandeshtkm on Twitter.



A good out look on thesis. I have heard a lot bout thesis it just that I need to try it. But for that I need to get more experience in blogging since I am a newbie to blogging.

Reply

12 Rajesh Kanuri November 13, 2009 at 10:17 am

Follow on Twitter Follow @rajkanuri on Twitter.



nice tips.. grabbed thesis will change my theme soon..
Rajesh Kanuri´s last blog ..WordPress 2.8.6 is Available: Update It Now For Multi User Blogs My ComLuv Profile

Reply

13 George Serradinho November 13, 2009 at 1:04 pm

Follow on Twitter Follow @gfserradinho on Twitter.



@Rejesh – let me know how it goes and good luck :)

Reply

14 Dennis Edell November 13, 2009 at 9:16 pm

The 3rd post in 10 minutes explaining manual working of plugins…cool as it is, I think my head is about to pop. lol
Dennis Edell´s last blog ..He/She Has Unsubscribed – Should You Ask Why? My ComLuv Profile

Reply

15 Dennis Edell November 13, 2009 at 9:18 pm

Hmm, just for Thesis even. Would you happen to know how on a non-thesis theme?
Dennis Edell´s last blog ..He/She Has Unsubscribed – Should You Ask Why? My ComLuv Profile

Reply

16 George Serradinho November 14, 2009 at 10:41 pm

Follow on Twitter Follow @gfserradinho on Twitter.



@Dennis – all themes come with a function file that you can edit. The only issue would be to make it display in the right place. You will have to know more about your theme and put the call to the function where you want it to be displayed.

Reply

17 Dennis Edell November 15, 2009 at 8:48 pm

I’ll look into that, thanks. :)
Dennis Edell´s last blog ..He/She Has Unsubscribed – Should You Ask Why? My ComLuv Profile

Reply

18 Extreme John November 14, 2009 at 6:11 am

Follow on Twitter Follow @extremejohn on Twitter.



YESSS!! I was hoping I would find a new Thesis tutorial from you in my reader tonight!! Very excited over here.

I have also been playing around with customizing and changing certain things around with Thesis as well, I need to play with the Open Hooks plugin a little more so I can stop putting stuff into the custom functions.php file.

Great tutorial you give me something new to try out.
Extreme John´s last blog ..What is Blog Engage? My ComLuv Profile

Reply

19 George Serradinho November 14, 2009 at 10:51 pm

Follow on Twitter Follow @gfserradinho on Twitter.



@Extreme John – glad to be of help. As you play more with Thesis, you start to know it more. I suggest installing WP locally so that you can experiment with it before going live.

Reply

20 Tinh November 15, 2009 at 3:12 pm

Follow on Twitter Follow @eblogtip on Twitter.



I implemented but it failed and caused errors on my blog then I used another tip with WP Twitip ID and it worked but the Twitter ID box moved down to under Submit button. Do you know how to fix this? Thanks
Tinh´s last blog ..SupaTweeta Challenge III Winners! My ComLuv Profile

Reply

21 George Serradinho November 15, 2009 at 5:43 pm

Follow on Twitter Follow @gfserradinho on Twitter.



@Tinh – I’m using it and it works fine, make sure when you copy it that you just double check the function to see that it is all ok.

Reply

22 Tinh November 16, 2009 at 7:59 am

Follow on Twitter Follow @eblogtip on Twitter.



I have just fixed it, I forgot to turn automatically add twitter feature off in the TwitterLinks setting. But, the box field for this still not showing, I cleared cache already but nothing show up?
Tinh´s last blog ..LunarPages Weekend Offer: 50% Off Total Bill! My ComLuv Profile

Reply

23 George Serradinho November 16, 2009 at 8:58 am

Follow on Twitter Follow @gfserradinho on Twitter.



@Tinh – the tutorial is to show the twitter link in the comments, not to show the box in the comment form. I suggest you read the plugin details about how to edit the comments.php file to insert the field in the comment form.

Reply

24 Tinh November 16, 2009 at 9:06 am

Follow on Twitter Follow @eblogtip on Twitter.



So, can you share the way to tweak like yours, very appreciate that as I am bad at coding. You can send it through my email if possible. Thanks thousand times!
Tinh´s last blog ..LunarPages Weekend Offer: 50% Off Total Bill! My ComLuv Profile

Reply

25 Tinh November 18, 2009 at 5:24 am

Follow on Twitter Follow @eblogtip on Twitter.



I know George, it is hard for you to share how to tweak comments.php but I personally think that if the tip is for general readers who are most newbie and bad at coding, you should guide them how to do that. Anyway, thanks very much and I will try to do it by myself and hope it works :-)
Tinh´s last blog ..Join Ad.ly Referral Program and Win a Macbook Pro! My ComLuv Profile

Reply

26 George Serradinho November 18, 2009 at 7:12 am

Follow on Twitter Follow @gfserradinho on Twitter.



@Tinh – the plugin developers explains what needs to be done. Anyone installing a plugin should read the details.

Reply

27 Tinh November 18, 2009 at 5:57 am

Follow on Twitter Follow @eblogtip on Twitter.



Hi George, so sorry to disturb u several time, pls forgive me as I did it successfully now :-)
Tinh´s last blog ..Join Ad.ly Referral Program and Win a Macbook Pro! My ComLuv Profile

Reply

28 George Serradinho November 18, 2009 at 7:13 am

Follow on Twitter Follow @gfserradinho on Twitter.



@Tinh – glad you got it right. See, you can do it ;)

Reply

29 Tinh November 18, 2009 at 1:20 pm

Follow on Twitter Follow @eblogtip on Twitter.



That is right, I learn from doing. Thanks
Tinh´s last blog ..Christmas Contest: 5 One Theme V2.0 Giveaways with License for Life My ComLuv Profile

30 Minh December 1, 2009 at 4:19 pm

Follow on Twitter Follow @ngoanhminh on Twitter.



Hi Tinh, can you let me know where you put name=”atf_twitter_id” in comments.php :D
Minh´s last blog ..Cùng bảo vệ môi trường với Plugin Online Leaf My ComLuv Profile

Reply

31 George Serradinho December 1, 2009 at 4:31 pm

Follow on Twitter Follow @gfserradinho on Twitter.



@Minh – I will send you an email and update the post.

32 Klaus @ TechPatio November 17, 2009 at 5:24 pm

Follow on Twitter Follow @TechPatio on Twitter.



Nice tip – I’ll try it out later and see if I can make it look as nice as you have :)

On a side not, how do you make your own comments have a different background color with Thesis, did you create a post on this earlier perhaps?
Klaus @ TechPatio´s last blog ..Google To Rank Sites Based On Speed? Matt Cutts Explains My ComLuv Profile

Reply

33 George Serradinho November 17, 2009 at 5:35 pm

Follow on Twitter Follow @gfserradinho on Twitter.



@Klaus – So you want to know? mmmm…… will see what I can do.

Reply

34 Klaus @ TechPatio November 17, 2009 at 5:36 pm

Follow on Twitter Follow @TechPatio on Twitter.



Oh I figured it was something you hacked yourself and it was an easy thing :) No worries if it’s not though.
Klaus @ TechPatio´s last blog ..Caroline Wozniacki’s Breasts Are Really Popular My ComLuv Profile

Reply

35 George Serradinho November 17, 2009 at 5:48 pm

Follow on Twitter Follow @gfserradinho on Twitter.



@Klaus – look at css code. there is one problem I can’t figure out. Look at posts where I comment first.

Reply

36 Klaus @ TechPatio November 17, 2009 at 5:51 pm

Follow on Twitter Follow @TechPatio on Twitter.



Oh, so your comment has to be a reply (level 2 or below) to be colored?
Klaus @ TechPatio´s last blog ..Caroline Wozniacki’s Breasts Are Really Popular My ComLuv Profile

Reply

37 George Serradinho November 17, 2009 at 6:30 pm

Follow on Twitter Follow @gfserradinho on Twitter.



@Klaus – it’s on my list to fix up, I have a few others things to attend to.

Reply

38 Klaus @ TechPatio November 17, 2009 at 6:31 pm

Follow on Twitter Follow @TechPatio on Twitter.



I think I found it – it has probably something to do with the “author”-bit. I’ll see if I have time to play around with it later !
Klaus @ TechPatio´s last blog ..Caroline Wozniacki’s Breasts Are Really Popular My ComLuv Profile

39 John Samuel November 18, 2009 at 4:06 pm

But in the admin profile, I cannot find a way to enter the Twitter ID
John Samuel´s last blog ..Happy Birthday Firefox! It’s 5 years of Happy Browsing My ComLuv Profile

Reply

40 George Serradinho November 18, 2009 at 5:58 pm

Follow on Twitter Follow @gfserradinho on Twitter.



@John – read the readme.txt file for the plugin, the developer explains what to add and where.

Reply

41 Klaus @ TechPatio November 20, 2009 at 1:55 am

Follow on Twitter Follow @TechPatio on Twitter.



I can’t seem to get mine to work like yours. It just puts a blue box below the comment form (above the CommentLuv button). Yours has a nice text input box up where the e-mail address etc. are entered.. how did you do that? :)
Klaus @ TechPatio´s last blog ..iPhone Free Week: Introduction To A Week With HTC Tattoo (Android) My ComLuv Profile

Reply

42 George Serradinho November 20, 2009 at 7:30 am

Follow on Twitter Follow @gfserradinho on Twitter.



@Klaus – go to the plugin readme.txt file as they tell you how to add it to the normal comment form. Let me know if you don’t come right.

Reply

43 Klaus @ TechPatio November 20, 2009 at 11:35 am

Follow on Twitter Follow @TechPatio on Twitter.



I tried that – but the only Thesis hook I could find to manually insert a HTML input box is this one:

thesis_hook_comment_form
Within form#commentform, just before the paragraph containing the comment form’s submit button.

– and that puts it below the comment textarea. Yours is ABOVE the comment textarea… what hook did you use for that?
Klaus @ TechPatio´s last blog ..iPhone Free Week: Introduction To A Week With HTC Tattoo (Android) My ComLuv Profile

Reply

44 George Serradinho November 20, 2009 at 11:58 am

Follow on Twitter Follow @gfserradinho on Twitter.



@Klaus – did you see my comment that you have to read the readme.txt file for the plugin.

I never used a hook for this at all. The code can be directly inserted in the comments.php file (updated manually). I suggest you do the same.

Reply

45 Klaus @ TechPatio November 20, 2009 at 12:02 pm

Follow on Twitter Follow @TechPatio on Twitter.



Ahh… but then it will be gone with the next Thesis update :( I’m not too fancy about editing core theme files.
Klaus @ TechPatio´s last blog ..iPhone Free Week: Introduction To A Week With HTC Tattoo (Android) My ComLuv Profile

Reply

46 George Serradinho November 20, 2009 at 4:00 pm

Follow on Twitter Follow @gfserradinho on Twitter.



@Klaus – I know what you mean, but I made a backup of the file and it’s the only way as there is not a hook for it. At least I don’t know about one. If you want me to change it for you, let me know (I’m running thesis 1.6).

Reply

47 Klaus @ TechPatio November 20, 2009 at 4:21 pm

Follow on Twitter Follow @TechPatio on Twitter.



No worries – I’ll figure it out, soon you can come insert your Twitter username in my comments :)
Klaus @ TechPatio´s last blog ..Friday Flick Find: Four Amazing Impressions My ComLuv Profile

48 Klaus @ TechPatio November 21, 2009 at 12:17 am

Follow on Twitter Follow @TechPatio on Twitter.



Thanks for your help – now twitterlink works at my thesis theme too :)
Klaus @ TechPatio´s last blog ..How To Make Me UnFollow You On Twitter My ComLuv Profile

Reply

49 Klaus @ TechPatio November 21, 2009 at 12:19 am

Follow on Twitter Follow @TechPatio on Twitter.



By the way, you should add this to the value of the twitter username field in your commentform: php echo $comment->twitlinkid;

then the Twitter username is automatically displayed for returned users.
Klaus @ TechPatio´s last blog ..Apple’s Tablet Delayed Till Late 2010 My ComLuv Profile

Reply

50 Klaus @ TechPatio November 21, 2009 at 12:21 am

Follow on Twitter Follow @TechPatio on Twitter.



Disregard my last message – turns out that code just takes the twitter username of the last commenter, and inserts that instead :(
Klaus @ TechPatio´s last blog ..Apple’s Tablet Delayed Till Late 2010 My ComLuv Profile

Reply

51 Minh December 1, 2009 at 4:53 pm

Follow on Twitter Follow @ngoanhminh on Twitter.



i have just received your mail then follow your instruction. now, it’s working fine as it should

many thanks!
Minh´s last blog ..Cùng bảo vệ môi trường với Plugin Online Leaf My ComLuv Profile

Reply

52 Ana December 4, 2009 at 12:41 am

Follow on Twitter Follow @TruAnaGoncalves on Twitter.



That’s a very smart idea, and I like the functionality of it too!

Thanks so much Serradinho.

Will have a play about with it, once I familiriase myself with it a little more.

Reply

Leave your Opinion

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv Enabled

Previous post:

Next post: