In WordPress 2.7 Features, a new feature – Threaded Comments is introduced.

The problem is that most of the wordpress bloggers are facing is that their theme doesn’t support Threaded or Nested Comments.

To check whether Threaded Comments is supported by your current theme or not, Follow the below steps:

1. Upgrade WordPress is to 2.7 version, if not yet upgraded.
2. Login to WordPress admin and go to Settings -> Discussion
3. Check on “Enable threaded (nested) comments ‘n’ levels deep”.
4. Click Save changes to enable Threaded Comments.
5. View any post of your blog that contains few comments.

If you see a Reply link after each comment like shown below, then your WordPress Theme supports Threaded Comments otherwise it doesn’t support:

You will see reply links for every individual comment

My current theme doesn’t support it. I have made some changes to comments.php and style.css to support Threaded Comments. But, the changes are not yet live on my blog. I have done whole testing on my Local PC and the screenshot is taken from there. I need to do little bit of tinkering in CSS. By the way, if you are new to CSS then Learn CSS by reading this Book. Download It Free!

Continue reading this post, To implement Threaded Comments feature in your WordPress theme
Before you proceed further, please make a backup of comments.php, functions.php and style.css

If you want your theme to be backward compatible (compatible with WordPress 2.7 and older versions), then do the following:

You can skip the below steps, if you just want your theme to be compatible with WordPress 2.7

1. Copy comments.php with a new name legacy.comments.php. This legacy.comments.php will be used, if your wordpress is older version and comments.php will be used for WordPress 2.7.
2. Copy the below code and paste in Themes functions.php file

<?php
add_filter( 'comments_template', 'legacy_comments' );
function legacy_comments( $file ) {
	if ( !function_exists('wp_list_comments') )
		$file = TEMPLATEPATH . '/legacy.comments.php';
	return $file;
}
?>

3. Above code will check whether wp_list_comments function exists or not. If exists, it will cleverly use comments.php (which will contain Comment Threading feature) otherwise it will use legacy.comments.php which is original comments.php code that came with the theme.

JavaScript Comment Functionality

To allow full JavaScript functionality with the comment features in WordPress 2.7, the following changes must be made to header.php.

To support the new JavaScript functionality with comment threading, add the following in the header.php immediately before the call to wp_head():

if ( is_singular() ) wp_enqueue_script( 'comment-reply' );

Now replace the below code in your comments.php file

<div id="comments-wrap">
<?php // Do not delete these lines
	if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
		die ('Please do not load this page directly. Thanks!');

	if ( post_password_required() ) { ?>
		<p class="nocomments">This post is password protected. Enter the password to view comments.</p>
	<?php
		return;
	}
?>

<!-- You can start editing here. -->
<?php // Begin Comments & Trackbacks ?>
<?php if ( have_comments() ) : ?>
<h6 id="comments-wrap"><?php comments_number('No Comments', 'One Comments', '% Comments' );?> to &#8220;<?php the_title(); ?>&#8221;</h6>
	<div class="navigation">
		<div class="alignleft"><?php previous_comments_link() ?></div>
		<div class="alignright"><?php next_comments_link() ?></div>
	</div>
<ol class="commentlist">
	<?php wp_list_comments(); ?>
</ol>
	<div class="navigation">
		<div class="alignleft"><?php previous_comments_link() ?></div>
		<div class="alignright"><?php next_comments_link() ?></div>
</div>
<?php // End Comments ?>

 <?php else : // this is displayed if there are no comments so far ?>

	<?php if ('open' == $post->comment_status) : ?>
		<!-- If comments are open, but there are no comments. -->

	 <?php else : // comments are closed ?>
		<!-- If comments are closed. -->
		<p><?php _e('Sorry, the comment form is closed at this time.'); ?></p>

	<?php endif; ?>
<?php endif; ?>

<?php if ('open' == $post->comment_status) : ?>

<div id="respond">

<h4 class="postcomment"><?php comment_form_title( 'Leave a Reply', 'Leave a Reply to %s' ); ?></h4>

<div class="cancel-comment-reply">
	<small><?php cancel_comment_reply_link(); ?></small>
</div>

<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p>

<?php else : ?>

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">

	<?php if ( $user_ID ) : ?>

<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Log out &raquo;</a></p>

	<?php else : ?>

	<p>
	<input type="text" name="author" id="author" class="textarea" value="<?php echo $comment_author; ?>" size="28" tabindex="1" />
	<label for="author"><?php _e('Name'); ?></label> <?php if ($req) _e('(required)'); ?>
	</p>

	<p>
	<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="28" tabindex="2" class="textarea" />
	<label for="email"><?php _e('E-mail'); ?></label> <?php if ($req) _e('(required)'); ?>
	</p>

	<p>
	<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="28" tabindex="3" class="textarea" />
	<label for="url"><?php _e('<acronym title="Uniform Resource Identifier">URI</acronym>'); ?></label>
	</p>

	<?php endif; ?>

	<p>
	<label for="comment"><?php _e('Your Comment'); ?></label>
	<br />
	<textarea name="comment" id="comment" cols="60" rows="10" tabindex="4" class="textarea"></textarea>
	</p>

	<p>
	<input name="submit" id="submit" type="submit" tabindex="5" value="<?php _e('submit'); ?>" class="Cbutton" />
	<?php comment_id_fields(); ?>
	</p>
	<?php do_action('comment_form', $post->ID); ?>
</form>
<?php endif; ?>
</div>
<?php else : // Comments are closed ?>
<p><?php _e('Sorry, the comment form is closed at this time.'); ?></p>
<?php endif; ?>
</div>

Most of the changes are done. If everything is done properly, you should be seeing Comment Threading appearing on the post. But, with the new code for comments in place, you need to style the comments area on the WordPress Theme with more design integration than previously.

Below is the snippet of CSS Styling that i added to current Theme’s style.css, you can refer this for your understanding and style it according to your Themes look:

.alt {margin: 0;padding: 10px;}
#comments ol {list-style-type: none;line-height: 18px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;padding-top: 0px;padding-right: 0px;padding-bottom: 10px;padding-left: 5px;}
#comments ul li {list-style-type: none;list-style-image: none;list-style-position: outside;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 5px;padding-top: 5px;padding-right: 0px;padding-bottom: 0px;padding-left: 0pt;}
.commentlist {padding: 0;text-align: justify;}
.commentlist li {margin: 15px 0 10px;padding: 5px 5px 10px 5px;list-style: none;}
.commentlist li ul li { margin-right: -5px;margin-left: 10px;list-style: none;}
.commentlist li li {background:none;border:none;list-style:none;margin:3px 0 3px 20px;padding:3px 0;}
.commentlist li .avatar {border:1px solid #ccc;margin:15px 8px 6px 0;float: right;padding:2px;width:45px;height:45px;}
.commentlist cite, .commentlist cite a {font-weight: bold;font-style: normal;font-size: 1.1em;}
.commentlist p {font-weight: normal;line-height: 1.5em;text-transform: none; margin: 10px 5px 10px 0;}
#commentform p {font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;}
.commentmetadata {font-weight: normal; margin: 0;display: block; color: #ca5433;}
.commentmetadata a, .commentmetadata a:visited {color: #fa7703;}
.commentmetadata a:hover{ color: #333333;}
.children { padding: 0; }
.thread-alt {background-color: #f8f8f8;}
.thread-even {background-color: white;}
.depth-1 {border: 1px solid #ddd;}
.even, .alt {border-left: 1px solid #ddd;}

If you don’t follow any part of the above post or want any clarification. Please leave a comment. I would be happy to respond.

Any suggestions to improve this post are also welcome. I will change this post to make it more clear.

Hope you have implemented Comment Threading on your WordPress Theme!!

You Should Also Check Out These Posts:

• How to add Comment Link in Single Post – WordPress
• How to Remove WordPress Meta Generator tag
• WordPress 2.7 “Coltrane” is released!
• WordPress Fatal error: Allowed memory size of xxx bytes exhausted (Solved) – PHP Error
• WordPress 2.6 Final Version is out! Grab it