Full-featured comments.php template for Wordpress

Posted on October 15, 2006.

The most time consuming aspect of my new design (code-wise) was the comments.php template. I already had a few features, such as author highlighting (via a plugin), gravatars, live previews, etc. enabled from my previous design, but this time I decided to bring it full circle and add very important features like alternating styling and separation of comments from pingbacks. I looked up some code from around the web to get the job done and I noticed there aren't too many resources offering a standalone comments template that's easy to build on (and doesn't require a platform theme like K2). So I decided to share my comments.php file (with some modifications to make it even more flexible).

Here is the php source file: comments.phps. You can download this file, rename it to comments.php, and drop it into your theme directory to use it.

It's a rather large file, but I added comments where appropriate so you can figure out what's going on. As I mentioned, you can drop it in as-is and it should work fine (with Wordpress 2.0+ at least and probably even 1.5+). It has some code taken from the Author Highlight plugin which I modified heavily to contain the functionality in this comments template.

Here's a quick rundown of what this file offers:

Trackback link
Ordered list of trackbacks/pingbacks with total number displayed and without messy pingback text
Ordered list of comments with total number displayed and author/date separated from content
Striping of all comments (class="odd/even") as well as highlighting of author comments (class="highlight")
Standard comment form that is only slightly different from the one in the default Wordpress template
Code-comments to call out where you can add Gravatar and Live Preview plugin calls
Option to change author name, author e-mail, and class name for author comment highlighting

Hopefully the comments in the code are enough to make everything clear. I provided a lot of classes and ids to make the file CSS-ready and the file should validate as XHTML 1.0 Strict/Transitional. If anyone needs more information, I might be able to provide it in a week or so when I have the time. I might also be able to post some example CSS for making the comments look clean and easy to read. Until then, enjoy the template file and let me know what you think.

P.S. If you are wondering what this template file can produce, it's pretty close to the comments section of this site, without all the fancy CSS styling.

Get a trackback link

67 Trackbacks/Pingbacks

Pingback: Weblog Tools Collection » WP Hack: comments.php template on October 15, 2006
Pingback: WP Hack: comments.php template « WordPress New Plugins, Themes, & Widgets on October 15, 2006
Trackback: VibeTalk on October 15, 2006
Pingback: Improved comments.php Template / The WordPress Bloggerâ€™s Resource, WordPress Hacks, Tips & Tricks / Osplay.com on October 15, 2006
Pingback: HackTalk.org » WP Hack: comments.php template on October 16, 2006
Pingback: [i:rrhoblog] » links for 2006-10-16 on October 16, 2006
Pingback: Osplay Themes » Blog Archive » Here we go again! Hot news for those who isn’t sleepin’ on October 17, 2006
Pingback: Cool New WordPress Theme / The WordPress Bloggerâ€™s Resource, WordPress Hacks, Tips & Tricks / Osplay.com on October 17, 2006
Pingback: Standing Tall » Blog Archive » WP ã®ãƒ’ãƒ³ãƒˆï¼šã‚³ãƒ¡ãƒ³ãƒˆã¨ãƒˆãƒ©ãƒƒã‚¯ãƒãƒƒã‚¯ã‚’åˆ†ã‘ã‚‹ã€ãã®ï¼’ on October 18, 2006
Pingback: links for 2006-10-18 en newdisco on October 19, 2006
Pingback: Christian Montoya » Ugly Icons on October 20, 2006
Pingback: Feature Packed Comments.php File at Easy Wordpress on October 22, 2006
Pingback: WordPress Station » Blog Archive » Full-Featured omments.php Template on October 22, 2006
Pingback: links for 2006-10-28 » Way Over Yonder in the Minor Key on October 28, 2006
Pingback: åšå®¢è”ç›Ÿ » å¦‚ä½•ä¸ªæ€§åŒ–ä½ çš„è¯„è®ºé¡µé¢ï¼Ÿ on November 16, 2006
Pingback: links for 2006-11-21 at SridhaReena on November 21, 2006
Pingback: å¦‚ä½•ä¸ªæ€§åŒ–ä½ çš„è¯„è®ºé¡µé¢ï¼Ÿ - åšå®¢è”ç›Ÿ on December 5, 2006
Pingback: FunkWadCuintWhich » The gathering Wordpress Theme on December 29, 2006
Pingback: Ryan Arrowsmith » Blog Archive » Creating a Wordpress Theme: Part I on January 13, 2007
Pingback: Ryan Arrowsmith » Blog Archive » Creating a Wordpress Theme: Part II - Using Includes on January 14, 2007
Pingback: The Lemonade Theme on January 23, 2007
Pingback: Â¡Perestroika! — yukei.net on February 3, 2007
Pingback: The Skittlish Theme for Wordpress | The Barley Hut on March 18, 2007
Pingback: The gathering Wordpress Theme | The Barley Hut on March 28, 2007
Pingback: The Lemonade Theme | The Barley Hut on March 28, 2007
Pingback: Themes: skittlish : Wordpress guy on March 30, 2007
Trackback: ã¨ã‚Šã‚ãˆãšã„ã£ã¨ã‘!? on April 7, 2007
Pingback: Learning By Design » How to Style Author Comments with WordPress Sandbox Theme on April 9, 2007
Pingback: Gtan.cn » å¦‚ä½•ä¸ªæ€§åŒ–ä½ çš„è¯„è®ºé¡µé¢ï¼Ÿ on April 26, 2007
Pingback: Minimal Wordpress Theme · BlogoCola on May 11, 2007
Pingback: Presenting The Tao of You on May 14, 2007
Pingback: Night kirin » åšå®¢æ–‡ç« » Full-featured comments-ä¸ªæ€§åŒ–ä½ çš„è¯„è®ºé¡µé¢ on June 3, 2007
Pingback: Grady Is Freed | Barley Hut on July 23, 2007
Pingback: å…³äºŽthemeså¿…é¡»äº†è§£çš„10+ä»¶äº‹ | ç‚äº¦ç²¾å“æ”¶è— on July 30, 2007
Pingback: New Blog Design Coming - by Lawrence Salberg on July 31, 2007
Pingback: ddd | World of Bastiaan on August 5, 2007
Pingback: Joshanastasia V2 on September 5, 2007
Pingback: What’s new: Lunatic! | pria.purnama aka anima on October 8, 2007
Pingback: Miklb's Mindless Ramblings on October 17, 2007
Pingback: Sim Blog » Blog Archive » å¦‚ä½•ä¸ªæ€§åŒ–ä½ çš„è¯„è®ºé¡µé¢ï¼Ÿ on October 25, 2007
Pingback: Designing and Coding a Wordpress Theme From Scratch (Part 10) on April 30, 2008
Pingback: The gathering Wordpress Theme • Griffin and Hoxie on July 28, 2008
Pingback: Skittlish | Themes Viewer on August 1, 2008
Pingback: TechKnack » New Layout on October 8, 2008
Pingback: The Skittlish Theme for Wordpress • Griffin & Hoxie on October 23, 2008
Pingback: Presenting The Tao of You • Griffin & Hoxie on October 23, 2008
Pingback: Grady Is Freed • Griffin & Hoxie on November 19, 2008
Pingback: Theme: 7 Color Options Skittlish Wordpress Theme « ShaadiTools on January 26, 2009
Pingback: 30 astuces pour améliorer la présentation des commentaires dans WordPress | Presse-Citron on February 10, 2009
Pingback: 30?Wordpress ?????????? - ??? on February 13, 2009
Pingback: 30??????Wordpress????? on February 17, 2009
Pingback: 30???Wordpress??????? at ?????? on March 2, 2009
Pingback: 30???Wordpress??????? - ????_blog on March 2, 2009
Pingback: 30 Most Wanted WordPress Comments Page Hacks | instantShift on March 4, 2009
Pingback: Wordpress plugin and hacks V | Beat Fly Blog on March 24, 2009
Pingback: WordPress??? » Blog Archive » ?????Wordpress????? on April 5, 2009
Pingback: 30??????Wordpress????? - ???? on April 5, 2009
Pingback: 30?Wordpress???????? : ??? on May 2, 2009
Pingback: 30??????Wordpress????? - ???? on May 14, 2009
Pingback: Comment Templates - WordPress Tavern Forum on July 9, 2009
Pingback: 10 Things You Must Know About WordPress Themes : Performancing on July 12, 2009
Pingback: Usando trackbacks | DRENARE ESTÉTICA TOTAL on July 22, 2009
Pingback: 30???Wordpress??????? | ???? on August 17, 2009
Pingback: 33 Most Useful Worpdress Comments Page Hacks - Themeflash : One Stop For All Your Web Resources on September 14, 2009
Pingback: Wordpress???????30??? | WordPress??????????? on September 26, 2009
Trackback: untell.com on December 5, 2009

70 Comments

Eugenia on October 15, 2006

The following code replaces the line that reads like:
{if 'open' == $post->comment_status}
and it hides the comment-posting form if a story is older than XX days (in this example is 10 days):

{capture name=pdate}{the_time d='U'}{/capture}
{capture name=diff}{$smarty.now-$smarty.capture.pdate}{/capture}
{if $smarty.capture.diff/86400 > 10}
Sorry, comment posting is closed as this blog post is now archived.
{elseif 'open' == $post->comment_status}

Thanks to http://schinckel.blogsome.com/ for it.

I also have lots of social bookmarking info that goes on the bottom of comment.php here: http://eugenia.blogsome.com/2006/09/21/social-bookmarking/
Christian Montoya on October 15, 2006

Eugenia, doesn't that code require Smarty? I thought Wordpress didn't come with Smarty by default. Anyway, I know there are plugins to do that too.
Eugenia on October 15, 2006

Yes, you are right, that requires Smarty, which is installed by default on Blogsome.com's wordpress blogs.

The second link, for social bookmarking icons doesn't require it.
Andiz on October 15, 2006

Thanks for sharing this, I will consider using a modified version.

Thanks a bunch!
AJ on October 15, 2006

Nice of you to release this Christian. I was going to restyle my comment area, now I'll probably build from this instead of starting from scratch

Thanks a bunch
Joe on October 15, 2006

Ha! that's funny. I was thinking the same thing - I just wrote up a how-to on adding Live Preview and a few other cool plug-ins to comments. I like this post because it requires less work to start.

Thanks!

For more links to comment plug-ins you can add to Christian's template, drop by and check out my Customizing Wordpress Series.
milo on October 16, 2006

Sounds ggod and easy to manage, will try.
Stephanie Booth on October 16, 2006
Two quick suggestions:
- use hAtom on the comments: http://microformats.com/wiki/hatom
- integrate coComment: http://cocomment.com/integrate
Cheers!
Christian Montoya on October 16, 2006

Stephanie: Yes, anyone who would like to can integrate coComment, I've heard good things about it. As for hAtom, it would be hard to align Wordpress comments with it, but maybe it would be worth a try…
Oskar Syahbana on October 16, 2006

This looks like the one they got at TechCrunch (separate comments and ping/trackbacks)! Gotta try this soon
Christian Montoya on October 16, 2006

Oskar: I dare say it's even better than the one at TechCrunch… at TechCrunch, the header for Trackbacks/Pingbacks is displayed even if there are none, and it doesn't display the total for either one. Must have been a noob job (I kid I kid!)
Ian on October 17, 2006

How do i change it so that the comments aren't centered on the page. i want them to align on the left.
Christian Montoya on October 17, 2006

Ian: That's a CSS thing (has nothing to do with this file), so you have to modify the CSS in your template.
anima on October 18, 2006

this is just what i was looking for, thanks a bunch^^
Stephanie Booth on October 18, 2006

Christian: hAtom implementation has been partly done in the SandBox and K2 themes, if you want to take a look.
Christian Montoya on October 18, 2006

Stephanie: Thanks, hopefully I'll have the time soon.
tai on October 18, 2006

Hi,
I'd like to let you know that I've translated all strings and your comments in the file into Japanese and put it on my blog below:
http://tekapo.com/st/2006/10/18/commentsphp-template/
Thank you for the file!
Gurdit on November 25, 2006

The live preview is very interesting, but I was a little surprised to see that the live preview doesn't change smiley codes to actual smileys - But then again, that may be because you may have disabled smileys? I suppose I'm about to find out when I submit this comment.
Christian Montoya on November 25, 2006

Live Preview can't handle smileys because that would require running a JS version of the the smiley conversion function that is in the Wordpress core.
Michael on December 21, 2006

Just curious about the author highlighting. How does that work if you are logged in when leaving the comment? It doesn't appear to add the class, or perhaps I missed something. I did look at the element using web developer extension for FF…
Christian Montoya on December 21, 2006

Michael: The author highlighting checks for your e-mail address and name. You have to enter that information directly into the code in the file. Otherwise it just won't work.
Michael on December 30, 2006

Christian, Thanks, I'll look for where to add that into the template.
Michael on December 30, 2006

I found the place to add the info, however with a quick search of the support forums, I found a way of dynamically comparing the post author's email to the email in the post, and creating the highlight class.
Around line 96:
I changed if (strcasecmp($this_name, $author["name"])==0 && strcasecmp($this_email, $author["email"])==0)

to if ( $comment->comment_author_email == get_the_author_email() )
Michael on December 30, 2006

That should have read compare the post author's email to the comment author's email.
Christian Montoya on December 30, 2006

Michael, yes, thanks for reminding me of that! I thought of making that change a week ago but never got around to updating the code. I'll do it soon. Thanks again.
Christian Montoya on January 8, 2007

Michael, I was looking at the codex and according to the documentation, get_the_author_email obfuscates the email address with URL encoding before it returns it. I'm not sure if that's correct, but it seems like that would cause problems with the comparison. Any thoughts?
Michael on January 14, 2007

You've got me there. I grabbed the code from a post by Kafkaesqui, , whom I have great respect for his WP coding fu. It worked fine in the one site I've tested it with.
Pablo Rosales on May 3, 2007

Great, exactly what i needed right now, just 2 secons of google search

Thanks a lot!
Arpit Jacob on May 5, 2007

Hey thanks a lot ….. It was really helpful to have your ready made comment template.
Lukas on September 26, 2007

Nice comment template, thank you!
I think the hidden field "comment_post_ID" needs an
< ... /> on line 177 to validate.
Markus on November 8, 2007

Indeed a very nice comment template.
But there is one thing I'm worried about:
The Ajax Comments Plugin doesn't work with your comments.php.
I'll try to fix it by myself, but if anyone has a solution for the problem, it would be nice to know
Christian Montoya on November 8, 2007

Markus: I have an idea… the demo site for that plugin has the following in the comments markup:

<ol class="commentlist">...<li id="comment-6">

I don't remember if I stripped that stuff from my template file… probably if the OL has that class and every comment has the ID "comment-theCommentID" then the plugin will work… no promises though, since it also changes the form a bit.
Christian Montoya on November 8, 2007

Yeah, see, my template uses id="comments" but not class="commentlist"… adding that might make things work.
Markus on November 8, 2007

I changed the ol-class some minutes ago, but no effect :-/

But it's funny: I changed the class & then saw your comment. I'm on the right way… I'll try the comment-ID-thing & report it here!

Thanks for the fast answer.
Markus on November 8, 2007

Well, since you are using the "comment-commentID" in your code, there has to be something else - I sent a comment and got an error with firebug:
$ is not defined

This error is produced by this part of the source:

Directly after the submit-button, theres also this part of code:

Could this produce an error because of name="comments_post_ID"??

These two points are the ones I suppose to be "guilty"
Christian Montoya on November 8, 2007

That Firebug error is usually related to Javascript, not markup, so is it possible that Prototype and Scriptaculous, which the plugin is using, are conflicting with something else?
Markus on November 8, 2007

Again, this time with all the html-code:

This error is produced by this part of the source:
input type="hidden" name="_wp_unfiltered_html_comment" value="0e4ef44147" /

script type="text/javascript"#

!– $('commentform').onsubmit = ajax_comments_submit; //–#

/script

Directly after the submit-button, theres also this part of code:
input type="hidden" name="comment_post_ID" value="7" /

Could this produce an error because of name=â€comments_post_IDâ€??

These two points are the ones I suppose to be â€œguiltyâ€
Markus on November 8, 2007

Strange: I matched everything with the original Ajax-Comment-Plugin-Homepage, I even changed the input button from < button > to < input type="submit" >… and it still won't work. Seems like it's not a problem caused by your comments.php.
Anyway, thanks for your immediate help!
Markus on November 8, 2007

Now that was plain stupid… I just loaded it up into the plugins-folder without a "ajax-comments"-folder itself. The missing folder made the trick… Sorry! Everything works fine!
Christian Montoya on November 8, 2007

No worries, I'm glad everything worked out!
Sabuj Kundu aka manchu on October 25, 2008

Thanks for this comment template. I like this. I just added this to my blog with some modification to make it compatible with my current theme and stylesheet. Great ..weldone.
minanube on November 9, 2008

i found error on line 16

here the error notification :
Parse error: syntax error, unexpected T_STRING in /Users/minanube/Sites/wptes/wp-content/themes/malang/comments.php on line 16
VagsPriessape on November 17, 2008

i want to share my free wordpress theme here.

Preview:
http://www.elegantthemes.com/preview/eVid/

Download:
http://www.sendspace.com/file/6uv0n2
Brad Hart @ A DoFollow Blog on November 19, 2008

This is a really nice comments template.
demonboy on November 30, 2008

Word! This is exactly what I've been looking for! Thank you for the code, it's perfect for customising. Keep up the good work.
demonboy on November 30, 2008

Hey, one other thing: these curved corners on the form input fields are really smart. How is this done?
Tomas Sramek on February 26, 2009

Commented code is always appreciated. Thanks for sharing it with WP community! I am pretty sure i will use it somewhere.
zhangyanping on February 27, 2009

its very good
RaiulBaztepo on March 28, 2009

Hello!
Very Interesting post! Thank you for such interesting resource!
PS: Sorry for my bad english, I'v just started to learn this language See you!
Your, Raiul Baztepo
PiterKokoniz on April 7, 2009

Hi !! My name is Piter Kokoniz. oOnly want to tell, that I like your blog very much!
And want to ask you: will you continue to post in this blog in future?
Sorry for my bad english:)
Thank you!
Your Piter
Max on May 11, 2009

Thank you VERY much for this!
Sajid Latif on May 12, 2009

Very Interesting post! Thank you for such interesting resource!. Nice Work…
Gustavo on July 22, 2009

Thanks for the great comments layout !
I translated the fields to Portuguese-br (Brazil) and works fine !
buda on July 24, 2009

Thanks for you help on this matter! I´ve been looking everywhere for something like this.

Thank you so much man!
andol on July 27, 2009

is that code capable with wp v2.8?
sooran on September 15, 2009

tancks.
This Post Helped me
Good Time
comment on September 17, 2009

thanks for the comment.php file
cody on September 20, 2009

How do you get this to be paginated? Or be limited to five or so per page?
Oes Tsetnoc on September 30, 2009

thanks for posting this comment.php file
insurgent on October 9, 2009

just testing ya stuff
jhony on December 28, 2009

salutare
Caras Ionut on December 28, 2009

hello, can u help-me with this script, because im novice and i try but is not working .., how work this script? Plss help me, i will apreciate. Many thanks in advance
Markus on January 2, 2010

Hi Christian!

I've got a really strange problem with the comment form – as far as I can tell, it appeared in Wordpress 2.9. The comment counter counts two additional comments and I have no idea how to fix that…

Do you have any idea what I could change to fix this?

Thanks!
Markus
Travis Berry on January 11, 2010

Thanks for the easy to use comments.php file. I have implemented it in my site at http://www.travisberry.com . Thanks again.
Infographiste on January 30, 2010

Hey thank you for sharing this with all of us, I will consider using a modified version for a customer
Kai Johnson on January 30, 2010

Hey, thanks for posting this comments.php. Somehow mine got borked and I was not planning on learning WordPress templating, so this saved me lots of time. BTW, your Amazon wishlist doesn't have a ship to address
Christian Montoya on January 30, 2010

Whoops! Problem solved. I also removed items that I have at this point
Nathan McGurl on February 4, 2010

Great stuff! Many thanks. I made a little change to the code so that if there is only one comment is doesn't say 1 Comments.

At about line 81 replace Comments with:

`
Comment Comments

`

I hope that this is useful. Your page has been a great timesaver to me!
Nathan McGurl on February 4, 2010

Oops!

more like this:

Comment Comments

but remove the / from the ?
Nathan McGurl on February 4, 2010

last time… this time using postable (just like you said I should!!)

<?php if ($numComments = 1) { ?> Comment <?php } else { ?> Comments <?php } ?>

The Montoya Herald, a weblog about Blueprint, jQuery, design, music and life, publishing on the web since September 2005. Written by Christian Montoya: developer, designer and entrepreneur.

I Recommend

Like What I Do?

On this domain

Elsewhere