Stylizing Threaded/Nested Comments in WordPress 2.7

Standard

WordPress 2.7 Comment Style Starters:


Wordpress Stacked Logo

One of the features I love in WordPress 2.7 is the ability to have threaded (nested) comments up to 10 levels deep. While viewing comments on this – or any WordPress 2.7-powered – site, you’ll notice a Reply button (assuming nested discussions are enabled). Clicking that will enable you to reply directly to that comment, keeping discussions in context.

This is probably not all inclusive, but here is the basic structure for ol.commentlist as it exists in the Default theme’s comments.php. To take advantage of the new discussion features, I copied this file over to my own theme. (You’re more than welcome to roll your own.) For many of the elements, more than one class is used with it. Where applicable, I’ve chosen the most descriptive class (e.g. li.comment instead of li.alt) as the parent for child formatting.

ol.commentlist {}
ol.commentlist li {}
ol.commentlist li.alt {}
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment {}
ol.commentlist li.comment div.comment-author {}
ol.commentlist li.comment div.vcard {}
ol.commentlist li.comment div.vcard cite.fn {}
ol.commentlist li.comment div.vcard cite.fn a.url {}
ol.commentlist li.comment div.vcard img.avatar {}
ol.commentlist li.comment div.vcard img.avatar-32 {}
ol.commentlist li.comment div.vcard img.photo {}
ol.commentlist li.comment div.vcard span.says {}
ol.commentlist li.comment div.commentmetadata {}
ol.commentlist li.comment div.comment-meta {}
ol.commentlist li.comment div.comment-meta a {}
ol.commentlist li.comment * {} - (p, em, strong, blockquote, ul, ol, etc.)
ol.commentlist li.comment div.reply {}
ol.commentlist li.comment div.reply a {}
ol.commentlist li.comment ul.children {}
ol.commentlist li.comment ul.children li {}
ol.commentlist li.comment ul.children li.alt {}
ol.commentlist li.comment ul.children li.bypostauthor {}
ol.commentlist li.comment ul.children li.byuser {}
ol.commentlist li.comment ul.children li.comment {}
ol.commentlist li.comment ul.children li.comment-author-admin {}
ol.commentlist li.comment ul.children li.depth-2 {}
ol.commentlist li.comment ul.children li.depth-3 {}
ol.commentlist li.comment ul.children li.depth-4 {}
ol.commentlist li.comment ul.children li.depth-5 {}
ol.commentlist li.comment ul.children li.odd {}
ol.commentlist li.even {}
ol.commentlist li.odd {}
ol.commentlist li.parent {}
ol.commentlist li.pingback {}
ol.commentlist li.pingback div.comment-author {}
ol.commentlist li.pingback div.vcard {}
ol.commentlist li.pingback div.vcard cite.fn {}
ol.commentlist li.pingback div.vcard cite.fn a.url {}
ol.commentlist li.pingback div.vcard span.says {}
ol.commentlist li.pingback div.commentmetadata {}
ol.commentlist li.pingback div.comment-meta {}
ol.commentlist li.pingback div.comment-meta a {}
ol.commentlist li.pingback * {} - (p, em, strong, blockquote, ul, ol, etc.)
ol.commentlist li.pingback div.reply {}
ol.commentlist li.pingback div.reply a {}
ol.commentlist li.pingback ul.children {}
ol.commentlist li.pingback ul.children li {}
ol.commentlist li.pingback ul.children li.alt {}
ol.commentlist li.pingback ul.children li.bypostauthor {}
ol.commentlist li.pingback ul.children li.byuser {}
ol.commentlist li.pingback ul.children li.comment {}
ol.commentlist li.pingback ul.children li.comment-author-admin {}
ol.commentlist li.pingback ul.children li.depth-2 {}
ol.commentlist li.pingback ul.children li.depth-3 {}
ol.commentlist li.pingback ul.children li.depth-4 {}
ol.commentlist li.pingback ul.children li.depth-5 {}
ol.commentlist li.pingback ul.children li.odd {}
ol.commentlist li.thread-alt {}
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}

Here is the CSS I’m using to stylize my comments below. (You can see an example of the nesting here.) Even though a number of the selectors are currently unused, I am keeping them in place in the event I decide to do something with them in the future.

I updated the following code to account for the presence of pingbacks in a comment thread. For my site, I used the more generic selector of ol.commentlist li instead of specifying a class (such as comment or pingback). This will allow pingbacks to be styled in much the same way as comments. The CSS above lets you target the types individually. (Which, if you wanted pingbacks to look different, you’d obviously would want to do.)

ol.commentlist { list-style:none; margin:0 0 1em; padding:0; text-indent:0; }
ol.commentlist li { }
ol.commentlist li.alt { }
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment { border-bottom:1px dotted #666; padding:1em; }
ol.commentlist li div.comment-author {}
ol.commentlist li div.vcard { font:normal 16px georgia,times,serif; }
ol.commentlist li div.vcard cite.fn { font-style:normal; }
ol.commentlist li div.vcard cite.fn a.url {}
ol.commentlist li div.vcard img.avatar { border:5px solid #ccc; float:right; margin:0 0 1em 1em; }
ol.commentlist li div.vcard img.avatar-32 {}
ol.commentlist li div.vcard img.photo {}
ol.commentlist li div.vcard span.says {}
ol.commentlist li div.commentmetadata {}
ol.commentlist li div.comment-meta { font-size:9px; }
ol.commentlist li div.comment-meta a { color:#ccc; }
ol.commentlist li p { font-size:11px; margin:0 0 1em; }
ol.commentlist li ul { font-size:11px; list-style:square; margin:0 0 1em 2em; }
ol.commentlist li div.reply { font-size:11px; }
ol.commentlist li div.reply a { font-weight:bold; }
ol.commentlist li ul.children { list-style:none; margin:1em 0 0; text-indent:0; }
ol.commentlist li ul.children li {}
ol.commentlist li ul.children li.alt {}
ol.commentlist li ul.children li.bypostauthor {}
ol.commentlist li ul.children li.byuser {}
ol.commentlist li ul.children li.comment {}
ol.commentlist li ul.children li.comment-author-admin {}
ol.commentlist li ul.children li.depth-2 { border-left:5px solid #555; margin:0 0 .25em .25em; }
ol.commentlist li ul.children li.depth-3 { border-left:5px solid #999; margin:0 0 .25em .25em; }
ol.commentlist li ul.children li.depth-4 { border-left:5px solid #bbb; margin:0 0 .25em .25em; }
ol.commentlist li ul.children li.depth-5 {}
ol.commentlist li ul.children li.odd {}
ol.commentlist li.even { background:#fff; }
ol.commentlist li.odd { background:#f6f6f6; }
ol.commentlist li.parent { border-left:5px solid #111; }
ol.commentlist li.pingback { border-bottom:1px dotted #666; padding:1em; }
ol.commentlist li.thread-alt { }
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}

If you would like to learn more about the enhancements made in comments, here are a couple of sites you should check out for further information:


WordPress 2.7 Comment Style Starters:

68 thoughts on “Stylizing Threaded/Nested Comments in WordPress 2.7

    • WordPress 2.7 just hit RC1 and I have no problems recommending it for non-critical sites… I’ve been running development versions for a while now and haven’t had any major issues.

  1. Wow, thank you! Post couldn’t come at a more perfect time! I spent quite a while trying to figure the styling out myself. This helps a ton!

    • Glad to be of assistance, John! I plan on creating a few styles that people can use to get started that are a little more creative than what I currently have on my site. I should have them available by this weekend.

  2. baal666

    Could you give an example of what a WP 2.7 comments.php file would look like with such CSS?

      • baal666

        Wow! Thanks a lot! I’ve been searching all over the net for an easy way to customize 2.7 comments, and everywhere people were talking about microid function, but how you did it is clean, and easy. Thanks! You rock!

      • I used this but it made the reply button and gravatar centered. Well not centered kind of in the middle of the post.

  3. baal666

    Just a last question: do you know how to customize the date and how to replace “Says” by something else? So far my feeling is that 2.7 does not (yet?!) offer easy customization as previous versions.

    • That I am not sure of (yet) The new wp_list_function isn’t well documented. I would definitely keep an eye on this page in the Codex though: wp_list_comments.

      As for customizing the date, this should (hopefully) help: Formatting Date and Time. You’d make the changes in the backend by going to Settings > General (/wp-admin/options-general.php). There should be some options for changing the way dates are displayed as well as a custom option.

      • baal666

        Thanks.. But it does not work for the date; it does not take the correct format…

        I have another question if you don’t mind: how do you make the avatars bigger?

        I tried this

        ol.commentlist li div.vcard img.avatar { border:5px solid #ccc; float:right; margin:0 0 1em 1em; width:50px; height:50px;}

        but I think it simply took the 32X32 picture to make it larger. I’d like to use the avatars that are 80×80 standard I think and reduce them to 50X50 rather than taking 32X32 and making them better, because I lost quality of the picture with that strategy. How would you do this?

        • What you’re wanting to do would likely require editing core code, which is not recommended… as upgrades will likely undo modifications you make to core files. However, it appears you can tweak /wp-includes/comment-template.php to make some of the changes you’re wanting to make. Backup this file before committing any changes to it.

          Lines 1238-1239 have some defaults there: $defaults = array('walker' => null, 'max_depth' => '', 'style' => 'ul', 'callback' => null, 'end-callback' => null, 'type' => 'all',
          'page' => '', 'per_page' => '', 'avatar_size' => 32, 'reverse_top_level' => null, 'reverse_children' => '');
          . Change 'avatar_size' => 32 to 'avatar_size' => 50 and that should increase the size of avatars.

          To change “says:” to something else, go to Line 1177: <?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>

          • You don’t have to edit the core code, simply modify your call the wp_list_comments passing in an array of values you want to change from the defaults, as in:

            wp_list_comments(array('avatar_size'=>40, 'reply_text'=>'Reply to this Comment'));

  4. baal666

    Thanks!

    I’ll have a look at this. I hope WP 2.8 will allow us to customizations more easily. So far, I am disappointed of 2.7

    • Well, this is fairly typical of most recent WordPress releases. The more customized you want things, the more tinkering/hacking that is required ;)

  5. Chris and baal you don’t need to edit any core files to change the way 2.7 outputs the comments. You have to us something called a callback. I’ve documented briefly how to do it here. Basically the new 2.7 loop still uses all the old tags just it makes it easier to create a simple comment loop. I’m pretty sure after 2.7 is officially released better documentation will start to appear.

      • baal666

        Very interesting stuff in here…

        I did use your css and comments.php to test it. For some reason, each time I hit “reply” the textara gets huge all over the screen. Do you have any idea how to arrange this?

        Thanks again

          • McKack

            It’s happening here too as I’m writing this comment… Seems the textbox only remembers the size of the original layout it was in (at the bottom) so my best guess is some javascript is needed to resize it for each time you click the reply button on someones comment. Wish I knew how to…

  6. Chris,

    Much much much thanks for this. This saved me a ton of work styling my comments.

    Jan Dembowski

  7. Chris, I have a different issue, I’d like your help with.
    The reply link isn’t showing on my site (using 2.7 RC 1)
    Instead I have a permalink, not reply.

    Any ideas? I’m hoping it’s a setting I overlooked.

    • bean

      I am having the same problem with certain themes. I can import the comments.php from the default theme into the theme directory and no threading and no reply links. So far, it has failed for three themes and worked on eight. I can not figure out why though!

      • Make sure they’re enabled! Go to wp-admin/options-discussion.php and make sure the checkboxes next to ‘Enable threaded (nested) comments ___ levels deep” and ‘Break comments into ___ pages with ___ comments per page and the page displayed by default’ are checked. (They are off by default.) If that doesn’t work, let me know.

  8. So my question would be, short of purchasing this theme, how do I get your comments on my site? I love your layout of your themes. I have your comments.php from above but it only shows the styling.

    Any help would be appreciated.

    • I am with Matthew here! I would love the comments.php file for this site. Very clean and just what I was looking for. very nice work!

      • Check out the two “Style Starters” I posted recently:

        These will help you get started with a set of styles you can copy into your theme’s stylesheet to get this same look onto your blog. The idea with the style starters is that you would take what I’ve done and adjust the colors to better match your theme.

        Hopefully that’ll help you out. If you have any questions, let me know.

        • Thanks a lot for your reply Chris. After reading many of the forums that discuss the new Comment features (nesting), I have come to the conclusion that you and Otto are the experts and that I am in a similar predicament as baal666. I have been “getting by” with some reverse engineering and am extremely appreciative of the actual development that is being done in the WordPress/web development community. I have begun to get a better general idea of .php and .css files and hope the jump to 2.7 will help me further that understanding.

          Ok, butter time is over, on to my questions…

          If you check out my site, you will notice that I have placed comment style #2 into my style.css file. I simply pasted it over the pre-existing comment section in hopes that it would work. The file was altered slightly, but not in the way I was expecting. First, I don’t have the reply button underneath my comments. I was expecting this to appear, so I could be able to utilize the nesting nesting feature. Second, I was hoping there would be a “Notify me of followup comments via e-mail” section that I could allow people to subscribe to.

          I am interested in solving my comment dilemma one problem at a time, so am much more interested in getting my first issue fixed, but would really appreciate it if you could help me out with both.

          What other files do I need to alter?

          • Scott, I sent you an email, but I figured others might find this useful, so I’m posting here as well.

            Replies have to be enabled. In your backend, go to Settings > Discussion. Look for the following and make sure the checkbox is checked next to it:
            Enable threaded (nested) comments __ levels deep

            As for how the comments look… Their look is dependent on the comments.php that comes with the Default theme in WordPress 2.7. It also works great with Otto’s implementation. (I’m now using that on my site.) Pay careful attention to his instructions… because you also have to include this prior to

            If you have any further questions, let me know.

          • Thanks again Chris, I am up and nested. I had it enabled under Settings > Discussion, I didn’t have the default theme comment.php loaded on the site. Once I got that up and running I was able to get the colors the way I wanted.

            I have begun to play a little bit more, and another question came up. Why is the date and time for each comment a link? I imagine this has some function, so I styled the div.comment-meta and left it on my site. However, when I clicked the ones on your site it takes me to your 404 – Page.

            I really appreciate the replies you gave me. Happy Holidays!

          • It’s for getting a permalink to the comment. The links would allow folks to jump directly to a comment on a page… There’s a bug in how it is implemented on my site. I think it could be related to allowing comments to go to multiple pages, but I am not sure…

  9. This was so much helpful. I wrote a post about threaded comments on my blog. Had success and styling this is the best place to look. Thanks for sharing Chris.

  10. Chris, this was a big help, thanks. I’ve got a minor irritating problem though. The first comment on a post indents for some reason I can’t explain. I’ve tried adjusting padding and margins in the CSS without success.

    Here’s an example: http://gorey.com.au/archives/3046

    Any suggestion would be welcome.

    • Don’t worry, in a separate part of the theme’s CSS images were padded 20px from the left. I’ve fixed that.

  11. I really like how you have this set up on your site! Looks very slick. I am working on customizing it with my old theme.

    Your current CSS means the admin reply style will be overridden by the threaded (depth) replies, correct? I want to have comments by the admin take priority even if they are threaded (depth) comments. How would I go about that?

    • The easiest way would be to have that selector appear later in the cascade. Or you could group multiple classes to stylize them more specifically: ol.commentlist li.comment.alt ul.children li.bypostauthor

  12. Harrison, I am trying to do this to my blog but, my css file (designed for earlier version i suppose) doesnt have all those classes, also when I add them it doesnt work.

    I understand I have to edit something, and you are referring us to ottos post, ottos blog is not showing anything here, just the sidebars without content, so any help will be appretiated

  13. Hi Chris… I like ur comment model its very light!
    I would appreciate it if you can give css and comment.php for this. :D

  14. Hi, Chris, I used a wordpress plugin to achieve the thread comments. Luckily, wordpress 2.7 could do this by itself. Then I come here cause this article could help me to find how to use this NEW function in wordpress 2.7. Hope the later versions can customize it easier :)

  15. Ingenious work, really, and I say that as a complete fool in such matters. ;-)

    I was wondering if you might allow me to bother you with a minor question: Would you possibly know the equivalent selector in lines 35 and 36 …

    #ol. commentlist li.even { background:#fff; }
    ol. commentlist li.odd { background:#f6f6f6; }

    … for the sandbox-10-theme?

    many thx in advance _ willyam

  16. I’ve been searching for hours for instructions as to how to customize my comments. Thank you so much for this awesome information!

Comments are closed.