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.

Madcap FlareAdobe Robohelp

By Tom Johnson

I'm a technical writer working for the 41st Parameter in San Jose, California. I'm interested in topics related to technical writing, such as visual communication, API documentation, information architecture, web publishing, JavaScript, front-end design, content strategy, Jekyll, and more. Feel free to contact me with any questions.

  • http://ottodestruct.com 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”.

    • http://idratherbewriting.com Tom

      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.

    • http://idratherbewriting.com Tom

      Otto, for some reason, when I click people’s hyperlinked names in comments, the page returns an error. It has something to do with the threaded comments and the no follow. Do you know what might be the trouble? It renders links like this:

      http://tc.eserver.org/%27%20rel=%27external%20nofollow

  • Pingback: WordPress Threaded Comments I 39 d Rather Be Writing Tom Johnson | garden statues()

  • 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.

    • http://idratherbewriting.com Tom

      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.

  • http://jigoloistanbuls.wordpress.com jigolo

    very nice , great article thank you.

  • http://www.codeforexcelandoutlook.com/blog/ 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.

  • http://TheSoundOfVintage.Blogspot.com 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

  • John

    test

    • asd

      test2

    • Test User

      Testing 123

  • Pingback: Threaded Comments In Wordpress | Robot Forest()

  • http://www.sbdigitalarts.com 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.

  • http://livingondividends.org LivingonDividends.org

    You ROCK! Now I have threaded comments! Just need to play with styling more before I launch.

    And I didn’t have to add a plugin either with your method! Thank you!

  • http://livingondividends.org 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!

  • http://livingondividends.org 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!

    • http://idratherbewriting.com Tom

      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.

  • http://www.learningwp.com 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

    • labony

      testing

  • http://mountainsageblog.com 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?

  • http://mountainsageblog.com Sage

    Just adding this so I get an email for replies.

  • http://www.asyareklam.com.tr promosyon

    Thanks a lot for your tutorial here.

  • http://www.kompozisyonornekleri.com ubocek

    thanks I working http://www.ucretsiztarot.com or http://www.kompozisyonornekleri.com my web site .Thakns :)

  • 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?

    • http://idratherbewriting.com Tom Johnson

      I’m not sure, but the P2 theme does this. You might email Joseph Scott and ask him. The P2 theme has a lot of custom coding.

  • http://classichammonds.net leslie parts

    This makes things a lot easier to follow. Much easier.

  • http://didyouknow.org txtface

    Thank you! Thank you! And thnx again! Tried it on one of my blogs with an old template and it worked perfect first time.

  • http://www.mxky.com 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

  • http://www.wildkat.co.uk/blog 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.

  • Pingback: I'm Just Sharing » Blog Archive » Update on Wordpress 2.8 Upgrade()

  • Pingback: I'm Just Sharing » Blog Archive » Is Your Comment Process In Error?()

  • http://jobs-in-pakistan-dubai.blogspot.com/ http://jobs-in-pakistan-dubai.blogspot.com/

    These blog provide good information that help me to improve my performance. Career Pakistan assists individuals with foreign education or overseas work experience find appropriate jobs in Pakistan

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

  • Pingback: List of my favorite WordPress development tutorials - XavorTM()

  • Jay

    Thanks pal you saved my day , I found a tuorial here http://bavotasan.com/2009/how-to-add-nested-comments-to-your-wordpress-theme/ it worked but the template validation using template check sowed error comments_form () is required ,anyway i deleted all that followed your steps and it works like a charm

  • http://cknews.info/ Черкассы

    http://cknews.info – Новини Черкаси – Новости Черкассы. Всі новини м. Черкаси та Черкаської області в одному місці