I’ve been asked many times by many people how I do my comments. Be it the comment numbers, the alternately styled even and odd entries, the special formatting that applies to my comments, the shadows behind the gravatars, or the live previewing of comments, it seems that my comments template has struck a chord with a lot of you in some way or another. I can’t say I can take credit for any of them, I’ve borrowed from a lot of designers to get those comments to appear the way they do now — elements from people like D. Keith Robinson, John Oxton, Michael, and Matt — and I still tweak them once in a while.
I’ve said it before and I’ll say it again: I’m no one’s web designer. I don’t know color. I don’t know spacing. I’m no elegant CSS stylist, and my CSS code itself is a hideous travesty (PHP code, at least for my plugins which are more classically organized, I can format elegantly… CSS I just fling crap hither and yon). I can’t think in terms of design for some reason, it’s just hard. That’s likely why the redesign I referred to, what, two months back still hasn’t occurred. So, if you’re looking for insightful commentary on choosing colors and making your CSS a joy for others to behold both in resultant style form and in syntax, you’re barking up the wrong tree. If, rather, you want to borrow some elements that you see in my comment template, you should find something useful below.
So, let’s break the features of my comment template down into manageable chunks. You can see my entire comment template here so pull that up in a separate tab or window to follow along, and keep that stuff in mind that I said before about not being an HTML stylist, okay? First, here’s a representative example of the comments output so we’re all on the same page.
Alternating Backgrounds
As you can see, I use alternating colored backgrounds for a couple of reasons: to provide some visual interest and to more easily distinguish adjacent comments. The default template that shipped with WordPress 1.5 had built-in support for this, so it’s not black magic. Let’s see what causes it.
[code lang="php"]/* This variable is for alternating comment background */ $oddcomment = "graybox";[/code]
PHP isn’t black magic either. Here we’re declaring a variable that we can use later called $oddcomment and we’re assigning it a value of the string "graybox". Later on, when we’re actually outputting our comments, you can see that we’re echoing the value of that variable as the class for our comment list item.
[code lang="php"]
This wouldn’t be very useful if we didn’t alternate the class for each comment, so luckily down at the bottom of the comment output loop you can see the magical clearing of the variable.
[code lang="php"][/code]
For those not overly familiar with programming or with PHP this code says ‘if the variable $oddcomment has a value of the string "graybox" then set the value of the variable $oddcomment to be an empty string, otherwise set the value of the variable $oddcomment to be the string "graybox".’ So, the first time we output a comment, it will have a class of "graybox". Then we reach this code which says ‘yes, the value of $oddcomment is "graybox" so I need to set the variable to an empty string,’ and the next comment will have a class of an empty string. Which is just dandy.
Now all we have to do is style it. This is cake with CSS, of course. Here are my style declarations for the base comment list item and the override to change the background color on the alternate comments.
[code lang="css"].commentlist li { margin: 15px 0 3px; padding: 5px 10px 3px; list-style: none; background-color: #F0F4FF; -moz-border-radius: 7pt; } li.graybox { background-color: #DFE4F8; }[/code]
Styling That Comment Index
I wanted to display the comment number — not the comment ID which, to me, is utterly useless to show to readers — in the comment so people could easily reference previous comments. Since the comments are ordered lists, you’d think it would be easy to specify a style for just the numbers but you’d be so wrong. In the currently-unimplemented CSS3 draft specification a new selector has been created to do this very thing and there’s a workaround for Mozilla users in the form of the -moz-list-number pseudo-selector, but there’s a way to do it that’s slightly less easy but at least it’s universally available.
Look for this part in the code.
[code lang="php"]$commentcount=1;[/code]
Using our keen understanding of PHP we know that this creates a variable called $commentcount and sets its value to 1. Wonderful. However, it’s what we do with it that counts.
[code lang="php"]
[/code]
Ah-ha! Within the comment loop we find this code segment. We’re declaring a div with class of "commentnumber" and… what the hell is that? If you know PHP that ain’t tricky, but for those of you who don’t that little PHP section says ‘print out the value of the $commentcount variable as it stands right now and then increment its value.’ The first comment will therefore have HTML output that looks like this
[code]
[/code]
And then the $commentcount variable gets incremented so it now has a value of 2, ready to be output for the next comment. Easy, right? Now all we have to do is style that DIV like we want. Here’s my style declaration for the commentnumber class.
[code lang="css"].commentnumber { font: italic normal 14px 'Times New Roman', Times, serif; margin-top: -5px; float:right; color: #B4D8FE; font-size: 28pt; font: italic; }[/code]
Noteworthy Comment Styling
I apply a different style to my posts. Why? I love me. What I have to say is obviously sooo vastly superior to what everyone else has to say that it’s simply expedient to highlight my own words so the eye is drawn naturally to the pure goodness therein.
Yeah right. I simply figure that, especially in the case of comments on my plugins, people will want to graphically easily distinguish something written by me perhaps in response to their query. Therefore, some delineation seems appropriate. So, how do we identity my posts?
[code lang="php"]comment_author == "ColdForged" ) { ?>
Why, we use the handy dandy comment author field! What this confusing looking mess says is ‘if the author of this current comment is named "ColdForged" I’m going to output a list item with a class of "cfpost", otherwise I’m going to output the standard comment list item.’ Now, does this have security concerns? Anyone can post as “ColdForged” after all. True, but it’s doubtful I’d allow that comment to hang around long. The nice thing is you can have any kind of test you want for whether it’s “you” including email address. That’s likely the best choice as people generally cannot see your email address on comments. You can get as wacky as you want, checking name, email, URL, and even IP if you so desire.
Now all that’s left is to have some style overrides for the "cfpost" class. For mine, I have a slightly lighter background and a heavy border, and I’ve also made the comment index slightly darker.
[code lang="css"]li.cfpost { background-color: #F6F8FE; border: 2px solid #88C2FE; }
.cfpost #commentnumber { color: #88C2FE; }[/code]
What’s nice is that we can extend this however far we want. Want it so that certain specific readers have their own style? Have a check for their name or email address. As written, this particular method is not very extensible so if you had too many special cases you’d likely want to break it out into a function that returned the appropriate class to use based on the comment parameters, but I’ll leave that as an exercise for the reader.
But I want more!
That’s it for part 1. Next time we’ll talk about slightly more advanced topics like my gravatar usage, input hiding, and live comment previews. If there’s anything else you’d be interested in discussing, let me know here.
63 Responses to “ColdForged’s WordPress Comment Template Deconstructed, Part 1”
[...] mment Template Deconstructed Categories – WordPress Hack LinkyLoo — Mark WP Comment Template Deconstructed: Eve [...]
very informative and nicely presented article.
appreciations and thanks to you.
Real cool article thanks man
Finally someone explains how to do comment numbers without ordered lists!
I think the shadow under gravatars could be improved a bit : in IE it is somehow too square and the img used is a bit straight dark. In FF it’s fine, of course.
Now reading this page, I realize my own comments are very similar and this design tends to propagate all over the web. Soon time to find something else
[...] tle=”Permanent Link: “> Nice Tutorial on styling the comment.php template. WP Comment Template Deconstructed: Eve [...]
Wonderful article… can’t wait for the part deux… When is it coming out?
Very cool!
Nice tutorial you’ve got going here CF. I was wondering about a couple of these things myself. I look forward to part 2.
[...] « Flare up Comments After reading CF’s writup about his WP comment [...]
Nice. Just changed my own blog. Nothing to complicated here. Looking forward to part 2.
[...]
制作wp commentæ¨¡æ¿ April 20, 2005 on 9:09 pm | In WordPress
Thanks for posting this tutorial. I could find no other way of numbering the comments. Thanks, I look foward to reading your next one.
Great tutorial. Lots of good information, looking forward to part 2.
[...] comments. Despite how drastic the changes appear, this was remarkably easy. I followed the excellent instructions provided over on Co [...]
i have what might be a silly question, and i ask because i am a dumb-bunnie when it comes to reading instructions and learning stuff.
if i were to say, copy and paste your templete into mine and just change relevant parts (so it will pertain to my site) would that work?
learning disability here blush i can never seem to understand what i am reading so that i can actually do it. school was a blast.
i have to be shown step by step. sigh
It likely would, though there may be some functions that are dependent on certain plugins.
Great post! I’ve admired your design for some time now, especially the comments section. I added the “comment counter” to my blog, It’s very elegant!
Thanks for the kind words, everyone.
In terms of “when the next installment will occur” I’m taking Ozh’s criticism to heart and am going to see if I can’t clean up my gravatar shadows in IE, since they are squarish. Of course, they’re squarish because IE can’t handle transparent PNG files, but I don’t think I necessarily need transparent PNGs any more.
I tried doing this all on my own but… any time I tried to add the code to have my own posts look different it gets rid of my entire comment template AND side bar. Everything vanishes.
Any ideas on what I might be doing wrong?
Good reason for me to upgrade to 1.5, because your comments are very pretty. But all the gravatars are white for me, with the background image as defaultgrav.png. I’ll skip that part LOL (FF 1.0.2 w/ Proxomitron and I don’t block gravatar.com)
[...] Comment Template Deconstructed This looks pretty useful too… coldforged.org  [...]
wow, this is cool, even the gravatar previews! i do have comment preview on my blog, and i was thinking it would be nice to put in a guide for simple html tags people can use in their comments. i know i’ve seen one somewhere before, but i’m not sure if they’re hard coded into the comments page or if they come from a plugin. but your site rocks! I’m using your imageheadlines too btw. thanks!
this is cool, even the gravatar previews! i use your image headings on my blog and i’m thinking of incorporating your alternating colors for comments as well. i’m looking for a way to put in a simple html guide for comment posters, like a guide to tags just over the comment form. i know i’ve seen them somewhere before, i’m just not sure if they’re from a plugin or if they’re hardcoded into the comments page. am currently drooling at your asides plugin
I’m pretty sure most of those are just static HTML in their comment template. I was tempted and may still add it someday, but hopefully since I allow Markdown people will visit the Markdown link instead
.
Ok so I’ve been playing with your tutorial for comment styling. You can see the results so far here.
As you can see the comment count starts after the first comment. Any clue why?
Secondly I did a search of the site and have not been able to locate the second part of the tutorial. Has it been written?
I’d have to see the code to tell, Marc. Perhaps you can put it in a pastebin and post the URL back here for me to look at?
Not yet. Haven’t had the time, really, but I’ve still got it in the back of my mind.
Here is the URL at the Pastebin, that is the comments.php file.
I just had a commenter post to a new thread with the same result. Her comment had no number and mine response to her’s displayed the number “1″
Don’t worry about the Part 2 tutorial, no hurry, but one question. are the drop shadows on the grav image a derivative of what is listed at A List Apart?”
Try this version… you left out one line
.
Doubtful, as it was done well before the ALA article and is pretty much a hard-coded hack. It’s no magic, and can really be figured out by looking at the CSS and at the default gravatar image.
[code lang="css"].commentlist .grav { margin: -5px 3px 0px -5px; float: left; width:40px; height:40px; padding:7px !important; border:0 !important; background:transparent url(/images/defaultgrav.png) 7px 7px no-repeat; }[/code]
Thanks CF, worked like a charm. Now after quickly replacing the comments.php with your corrected one I have to go back in and see what I missed.
I looked at your CSS previously in an attempt to decipher the coding for the grav drop shadow, but couldn’t figure it out. Maybe I was expecting to see an image called up similar to ALA’s and didn’t see it.
Think I’ll toy with your version and see what I come up with. Thanks you’re the greatest!
Hello, i’ve followed your guidelines for re-desining te comment template. Thanks for pointing out everything. I was surprised that with the common sense in your explanation you can reach a lot. I also use the image-headline plugin. This makes blogging more fun. Thanks. My website is http://www.mazalien.nl/weblog/
i really loved your site and found it to be very friendly and helpfull.
I cant get the Comment Preview to work. Shows only error on
<?php comments_Div(); ?>I didn’t cover comment previews here, so if you simply copied the template you’d probably be stuck. That said, you need this plugin for comment previews.
I’d like to modify the comments input PHP to allow the poster to utilize certain HTML tags in a user-friendly way, to accent their posts. For example, if you are logged into WP as the admin (dashboard), you can add a comment to a category/topic using an enhanced input frame that allows you to insert link reference tags, embolden text, etc. Is it possible to isolate and modify that code and plug it into the comments templates so that the poster can utilize these features?
This is a simple (stupid) question, but does someone know how to format the comment text using a different font than the usual
or bodytext? Sorry, I’m pretty much a CSS moron no matter how I try.
I just implemented this but I am having a problem – the first comment has no number and the second respose starts at ’1′. I saw this asked in the comments already but I couldn’t find a solution listed?
Sorry blake, that’s a little too general of a question and I’m not up to CSS tutoring. There’s a lot of places on the web that should be able to help you more.
What are you initializing your counter variable to? If the answer is “I don’t know” you need to initialize it to one before the comments loop.
thanks for the quick reply…
does initializing the variable mean this line of code:
$commentcount=1;
if so, yes, I have that in the same place you have it in your code. Or is it something else you’re referring to?
That’s the one. There’s got to be something not quite right with it because it’s acting as though it is undefined on the first iteration through the comments loop then actually gets defined and incremented from the default zero to one and therefore actually echoed on the second comment. Make sure that the variable is named the same in your initial definition and where it’s echoed and incremented… it’s definitely acting like a typo or perhaps some other scoping problem. Look carefully, it’s likely to be a small typo. If that’s not the case, can you post your comment template code here and tell me when you posted it so I can take a look? Thanks.
I have posted my comment template here. I did carefully look for typos but I have looked at this code for so long now, I may very well be overlooking something…?
Thanks. It was a scoping problem. You had the variables defined in an
ifclause that ended before the comment loop ever started, thereby taking them out of scope. Try the one I modified here.FYI, the
ifclause ended at line 17 in your code and that’s where the variables ceased to exist.aha, so I didn’t have that piece of code in the right place… fixed it and it works like a charm now! thanks so much for your time and help!
Just wanted to leave you a note to say thank you for such a clear and easy explanation. Came in very, very handy!
Yes, thank you for this deconstruction! Oh shit, I just saw the comments preview box! lol!
Thanks , this is a nice hack for wordpress
I am running WP 1.52. I have got your numbers working fine. Now how do I remove or hide the standard wordpress numbering on the left? Appreciate any help. Cheers
hey I´m so silly it helps to read the complete article. :} Thanks.
hey I´m so silly …..it helped to read the complete article. :} Works fine now. Thanks.
Firstly let me thank you for sucha useful and easy to read post. I have stolen almost, if not, every ideas presented here but I now want to add another specific reader.
I noticed you finished with “What’s nice is that we can extend this however far we want. Want it so that certain specific readers have their own style? Have a check for their name or email address. As written, this particular method is not very extensible so if you had too many special cases you’d likely want to break it out into a function that returned the appropriate class to use based on the comment parameters, but I’ll leave that as an exercise for the reader.”
But I have neither the time nor the skill to even begin to start this. Is there any way either you or one of your readers could tell me how to add another specific reader.
I tried adding comment_author == “Specific Reader 1″ ) { ?> “>
But it doesn’t work.
TIA Phillip
It should. Perhaps try it against the email address instead. Also, if there are any odd characters in the name, you may end up with odd behavior. Email address would be more easily tested against.
Hi, thanks for the reply. The code above went all screwy, so I’ll try and explain succinctly.
What I was trying to show was that when I simply duplicated the first three lines I get:
Parse error: parse error, unexpected T_ENDFOREACH in /home/username/public_html/wp-content/themes/2007/comments.php on line 72
I’m not sure if I should be adding any other code at the end. Sorry I’m a bit dim!
Lastly I can’t use the email address because both user will actually be me, I want to format different when I post different things.
Thanks for you help so far. If you need to see exactly what I’m using it’s here: http://www.planetphillip.com/comments.phps
Bah, not knowing PHP doesn’t make you dim. Here’s a sample that should get you further.
Thank you so much. You are now number three on my hero list! BTW the link didn’t seem to work, I had to view the source to find it.
[...] ColdForged’s WordPress Comment Template Deconstructed, Part 1 [...]
good, thanks!
i am trying to implement this and it looks like i have the same problem as another user where the comment numbers are skipping the first comment and putting the “1″ on the second. i assume i am missing a line like the last person, but can’t figure out which one…
i am wondering if it has to do with missing this: $commentcount=1;
but i have no clue where to put it or how to put it
any help?
is there a way you can do this without php? I want to alternate style with just html and javascript. Thanks for any help.
It has everything to do with missing that variable initialization.
Instead of initializing the first comment to “1″, you’re just incrementing the variable from what php assumes to start at 0 after writing the first comment; hence you get “1″ as the second comment.
You want to put that snippet of code just after the line that evaluates whether there are comments or not. It should be placed after something like this:
I know this is almost two years old, but it’s still one of the best step by step WordPress comment stylings I’ve seen. Thanks!
test my comment
I think my previous comment didnt recorded well. Here again:
Hi, I’m using WP 2.5.1. I copy and paste your comments.phps code and replace all code inside my \themes\theme_name\comments.php
But I cant get it right. All comments are not displayed. I have disable another plugins which are Guestbook Generator and Paged Comments.