WordPress 2.7 Comment Threading Howto
The new UI of 2.7 is nice and all, but what really amazed me was that the developers integrated comment threading, at least, if the theme supports it. So after a few tweaks and going through Otto’s article a number of times until I finally understood how it works, I was able to use the new feature in my theme.
The feature has been integrated in my theme since 2.7-Beta1 was released, yet only now did I realize that my reference was a bit too technical, even for me, that I decided to write another howto that is simplified. Before jumping in, I would highly advise to disable any comment threading plugin, including Disqus, to avoid any unwanted hiccups. Of course, the decision to do this is all up to you.
Still here? Then let’s begin.
There will be two files that needs editing. Three, if you want to release your theme and make it backwards-compatible. This howto is for those that are NOT going to make their theme backwards-compatible. In other words, the instructions on this page is for WordPress 2.7 and above only.
The files that need editing would be header.php and comments.php, both can be found in your theme folder.
In header.php, you would need to add a line between the <head></head> tags, preferably at the line right before the wp_head() function.
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
Simple, right? Right. In comments.php, however, it gets tricky. And a little bit dangerous. But not to worry. As long as you know how to read and compare codes, and with some patience, you’ll do just fine. But for safety’s sake, make sure you back up your comments.php file. All done? Good.
Open your comments.php file in your favorite text editor. Then, look for the line of code where you see
if ( have_comments() ) :
Below or after that, you would usually see the opening tag for a list <ul> or <ol> with a class of commentlist. To use the new threaded comments feature, anything in between the opening and closing tags of the list should be replaced with the following:
<?php wp_list_comments(); ?>
So your comments loop should look like this:
<ul class="commentlist">
<?php wp_list_comments(); ?>
</ul>
Then after that, you would need to add the following lines of code to enable paged comments, that is, if you enabled it in the Settings > Discussion page.
<div class="navigation">
<div class="alignleft"><?php previous_comments_link() ?></div>
<div class="alignright"><?php next_comments_link() ?></div>
</div>
So for the code that shows the comments, etc., the following is the resultant code:
<?php if ( have_comments() ) : ?>
<h3 class="tooltitle"><?php comments_number('No Replies', 'One Reply', '% Replies' );?> to "<?php the_title(); ?>"</h3><ol id="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 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. -->
<div class="tooltitle">No Replies to "<?php the_title(); ?>."</div>
<?php else : // comments are closed ?>
<!-- If comments are closed. -->
<div class="tooltitle">Comments are closed.</div><?php endif; ?>
<?php endif; ?>
Now, on to the form. The function we added in the header.php file actually makes it possible for the comment form to appear directly below the comment being replied to, but we need to make the form behave the way it is expected. The script looks for the id “respond,” so that’s what you look up in the form. Usually, it’s a place holder with an anchor tag like this: <a id="respond"></a>. It may sometimes appear in the comment form title:<h3 id="respond"><?php _e('Leave a Reply'); ?></h3>. All you have to do is remove that id and enclose the whole form in a div with the “respond” id. The form code is usually found after this line of code:
if ('open' == $post-> comment_status) :
So that’s what you look for first before enclosing the whole comment form in a div with id="respond".
<div id="respond">--- Comment Form Code ---
</div>
The comment form code usually starts with the comment form title of “Leave a Reply” usually enclosed in <h3></h3> (e.g. <h3>Leave a Reply</h3>)
A line of code that lets you cancel your reply must be inserted just after the comment form title.
<div id="cancel-comment-reply">
<small><?php cancel_comment_reply_link(); ?></small>
</div>
And it should be before the line of code below:
<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
Still with me? Good. Just one more line of code and you should be all set. This line of code makes it display two hidden inputs: comment_post_ID and comment_parent. Your comment form must have the comment_post_ID, so you have to remove it. Simply look for this line of code:
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
and replace it with
<?php comment_id_fields(); ?>
and you’re all done. Click here to see Otto’s live sample.
Save it and overwrite your comments.php file in your theme folder and you should have a working threaded comments section. If in case it doesn’t work, you did remember to make a backup of your comments.php file, right? So all you have to do is put it back in, overwriting the one you edited, and start over again.
You can post your questions in the comments section, and I’ll see what I can do. For styling questions, I would suggest you read Otto’s article. If in case you wanted me to check up on your comments.php file before you commit the changes, you can send it over to mail at will dot ph and I’ll review it for you for free, if time permits, that is.
Happy Hunting!
