A Single Article
Read it, comment, and share it with your friendsFull-featured comments.php template for Wordpress
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
42 Trackbacks/Pingbacks
Other blogs referencing this article40 Comments
Responses to my articleThe 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/
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.
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.
Thanks for sharing this, I will consider using a modified version.
Thanks a bunch!
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
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.
Sounds ggod and easy to manage, will try.
Two quick suggestions:
Cheers!
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…
This looks like the one they got at TechCrunch (separate comments and ping/trackbacks)! Gotta try this soon
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!)
How do i change it so that the comments aren’t centered on the page. i want them to align on the left.
Ian: That’s a CSS thing (has nothing to do with this file), so you have to modify the CSS in your template.
this is just what i was looking for, thanks a bunch^^
Christian: hAtom implementation has been partly done in the SandBox and K2 themes, if you want to take a look.
Stephanie: Thanks, hopefully I’ll have the time soon.
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!
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.
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.
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…
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.
Christian, Thanks, I’ll look for where to add that into the template.
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() )That should have read compare the post author’s email to the comment author’s email.
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.
Michael, I was looking at the codex and according to the documentation,
get_the_author_emailobfuscates 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?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.
Great, exactly what i needed right now, just 2 secons of google search
Thanks a lot!
Hey thanks a lot ….. It was really helpful to have your ready made comment template.
Nice comment template, thank you!
I think the hidden field “comment_post_ID” needs an
< ... />on line 177 to validate.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
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.
Yeah, see, my template uses id=”comments” but not class=”commentlist”… adding that might make things work.
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.
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 definedThis 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”
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?
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â€
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!
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!
No worries, I’m glad everything worked out!
Leave a comment
Share your thoughts with the worldYou can use Markdown, or you can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>Please keep comments respectful and on topic.
This form is guarded by Akismet, so don't waste your time trying to submit spam. It won't work. Ever.