WordPress Tip: Implement WordPress’s Threaded Comments

WordPress’s threaded comments feature is not entirely now; it’s been around since 2.7 (the current version of WordPress is 2.7.1). But even though under Settings > Discussion you see the ability to activate threaded comments and indicate how many levels deep you want it to be, you have to actually make some changes to your theme for threaded comments to work.

The following screenshot shows an example of threaded comments.

Threaded Comments. Click the image to see the actual post.

Threaded Comments. Click the image to see the actual post.

You see that you can reply to comments directly within the thread, rather than at the bottom. If you receive a lot of comments, threaded comments can add a lot to the usability of the conversation.

Implementing Threaded Comments

To implement threaded comments in WordPress:

  1. Go to Settings > Discussion and select Enable threaded (nested) comments X levels deep. (I chose 3 levels deep only.)
  2. Make sure your theme doesn’t already have threaded comments. Navigate to a post with a comment. If your theme already has threaded comments, you’ll see a Reply link next to each comment. If not, continue following the steps below.
  3. Make sure you’ve upgraded to the latest version of WordPress (2.7 at least).
  4. In your header.php file, add if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ ); directly before wp_head, so that it looks like this:
    <?php if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ ); wp_head(); ?>
  5. Download the latest release from WordPress, unzip the file, and browse to wp-content/themes/default. Open the default theme’s comments.php file and copy the contents.
  6. Back up your existing theme’s comments.php file in case something goes wrong.
  7. Navigate to Appearance > Editor and select Comments.php. Paste in the comments.php content you copied in step 5. Save the update.
  8. Navigate to a post with comments and see if the Reply link appears next to the individual comment. If so, you implemented it correctly.

Styling Threaded Comments

Now, you’re not done. When I looked at my threaded comments, my comment form spilled over the margins, and the nested comments appeared in the same white color, making them harder to distinguish from the upper level. Your theme was probably designed before threaded comments were launched, so you have to add some code to your stylesheet to make the threaded comments look good.

Here is what I added to my stylesheet to style my threaded comments:

#comment {width:525px; padding:10px;}
.commentlist li ul li {background-color: #f3f2f1; border:1px solid #e5e4e2; padding-bottom:10px; margin-bottom:10px; margin-top:13px;}
.commentlist li ul li ul li {background-color: white;}

Depending on your theme, you may need to add different code. Someone else has a lot more style they added to their theme. If you’re trying to style the threaded comments list, this support post may be helpful. (Note: I wasn’t able to get bulleted and numbered lists to look right in comments at all levels, but given that almost no one manually codes bulleted or numbered lists in comments, I doubt it will be much of a problem.)

Threaded Comments Plugins

If you don’t want to change your theme, you can rely on a number of threaded comments plugins instead:

Finally, here’s more technical information about the threaded comments function. Remember that I also offer WordPress Consulting services, so if you’re trying to get threaded comments to appear on your theme and you have trouble, let me know.

Related Posts

37 thoughts on “WordPress Tip: Implement WordPress’s Threaded Comments”

  1. Otto

    You don’t really need to go so crazy with your styling rules. The “li ul li” stuff is somewhat over the top.

    Try things like this:
    .commentlist li.depth-1 {whatever}
    .commentlist li.depth-2 {whatever}
    .commentlist li.depth-3 {whatever}

    And so on. WordPress’s new threaded comments functions add a lot of useful classes to each comment’s LI, allowing you to reference them that way.

    Also look closely at the classes of “odd”, “even”, “thread-odd”, and “thread-even”.

    1. Tom Post author

      Otto, thanks for your comments on my post. I’ll try implementing the style tips you suggested. Overall, I’m really glad to see threaded comments roll out. I think it greatly enhances the usability of conversations on blogs.

  2. Pingback: WordPress Threaded Comments I 39 d Rather Be Writing Tom Johnson | garden statues

  3. peonchy

    it doesn’t work, the instructions you gave above
    nothing happens when the php code line is added at the top of the header file.

    according to someone else’s blog, you need to add in this line to replace the comments loop in the comments.php file.

    I think you should correct the article, as it is wrong.

    1. Tom Post author

      Did you also replace the comments.php file with the Kubrick theme’s comments.php file?

      About the code above, you may want to post it into notepad first, because the apostrophes may be rendered as character codes or something if you don’t. I’m not sure. I need to find a better way of posting code in my posts.

  5. JP

    Great tutorial, I found some others but they weren’t as simple or easy to follow as yours. Now I have threaded comments, and one less plugin to worry about. Thanks for sharing.

  6. James

    Hello, great blog you got here.
    Very interesting and I like it!

    If you want you can visit this blog that I just found,its new and I like reading new blogs.
    You might find it Interesting like I found yours.

    the url is TheSoundOfVintage.blogspot.com

  8. Pingback: Threaded Comments In Wordpress | Robot Forest

  9. Steven

    Thanks for the article. Couldn’t figure out why Threaded Comments wouldn’t work for me. Read your article, did what you said to do, now they work great. Thanks again.

  11. LivingonDividends.org

    Darn. It worked BUT only for the first two main-level comments. After the first two, nested comments display as if they were main-level comments and are not nested.

    Do you know of any other changes I could try? I do have an older theme. But I followed your instructions EXACTLY.

    Thanks!

  12. LivingonDividends.org

    Sorry. I don’t mean to spam your comments. You can delete them please.

    Just wanted to let you know that it works!!!

    Turns out the problem was the particular post that I was testing on since I had changed the comments.php a bunch. After trying a clean post with no comments, it works like a charm!!!

    Thank you!

    1. Tom Post author

      Glad you found the instructions helpful. Really the hard part about it is styling the different levels of comments. In my implementation, I only styled for 3 levels of comments. I love the threaded comments feature now that I added it to my blog. It makes comment conversations much more usable.

  13. Exploring The Internet

    Thanks a lot for your tutorial here. It is a big help for me. I made my own theme last month but it was not comment-threaded. After I applied your suggestion, now my new theme is comment-threaded. Thanks again! Lanna

  14. Sage

    I don’t have reply on all of the comments. How do I fix this?

    Once there is a reply to a comment, you can’t reply to the reply.

    Does that make sense?

  18. loren

    What I have been looking for is a way to collapse long lists of threaded comments. It would particularly be fantastic if one could select a specific level to collapse or even have the page open with certain levels collapsed. Is there any Ajaxified plugin that does this?

  21. Infographiste

    Great tutorial, I found some others but they weren’t as simple to follow as yours. Now I have threaded comments, and one less plugin to worry about. thank you for sharing and taking the time

  22. WildKat

    Thank you! This made things so much easier. I don’t know why I didn’t think of just copying the file like that myself. I really like the theme I’m using now. In fact I went back to it after trying out some others and I kept reading about copying and pasting things here and there and it all seemed very complicated. Then I find your post by accident while looking for a threaded comments plugin that would work and it is so simple and easy to understand!

    In a couple of minutes I have the comments on my blog fixed and am very happy with the results! I also found your blog and will definitely come back.

  23. Pingback: I'm Just Sharing » Blog Archive » Update on Wordpress 2.8 Upgrade

  24. Pingback: I'm Just Sharing » Blog Archive » Is Your Comment Process In Error?

  26. Pingback: The Seven Deadly Sins of Blogging: Sin #7, Being Inattentive | I'd Rather Be Writing

  27. Pingback: List of my favorite WordPress development tutorials - XavorTM

Comments are closed.