WordPress Tip: Implement WordPress's Threaded Comments

by Tom Johnson on May 31, 2009
categories: technical-writing • wordpress

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.

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:

• Brian's Threaded Comments
• Yet Another Threaded Comments plugin
• Greg's Threaded Comments
• WordPress Threaded Comments (this is what's implemented on Jane's blog right now)

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.