Blog entries have been known to strike impassioned conversations between a myriad of readers. When these readers leave comments they are often replying to the content in other comments.

Comment threading connects these comments with links such that each comment can be linked to the comment it is in reply to, ensuring future readers can more easily follow the conversation and add their construtive thoughts to the discussion.

There are generally two types of threading one can deploy on their blog:

1. Chronological Threading

Chronologically threaded comments are displayed strictly in chronological order with a simple note saying, "this comment is in response to So-and-so's comment"...

2. Hierarchical Threading

Hierarchical threaded comments appear nested, meaning comments in response to other comments appear next to one another. Typically the "child" commenet is displayed under the "parent" comment and slightly indented...

Installing Threaded Comments

Starting with Movable Type 4.15, Movable Type's default templates will have chronological threading support built in. Any new blog, web site or forum created using Movable Type will not need to modify their templates in order to take advantage of this feature.

Users upgrading to Movable Type 4.15 however will need to make slight modifications to their templates in order to create threaded comments on their site.

Setting up the Reply To links

1. The first step is to add the <$mt:CommentReplyLink$> template tag where you would like the "reply to this comment" link to appear. The tag must be within an <mt:Comments> container tag. We recommend placing it in the comment byline:

   <p class="comment-footer">
     Posted by <$mt:CommentAuthorLink default_name="Anonymous"$> <$mt:CommentAuthorIdentity$> |
     <a href="#comment-<$mt:CommentID$>"><$mt:CommentDate$></a> |
     **<$mt:CommentReplyLink$>**
   </p>
   

   By default, MTCommentReplyLink creates a link with the text Reply. However, this can be customized by giving the tag an optional text attribute like so, for example <mt:CommentReplyLink text="Reply to this comment">.

2. The next step is to use a new <mt:RepliedComment> container tag to show who the commenter is replying to. You can use any of the MTComment template tags you find in Movable Type within an MTRepliedComment container as well as <mt:Else> which can be used as the "default" (i.e. if the comment is a new thread and not replying to someone else). Once again, this tag must be placed within an <mt:Comments> container tag and we recommend the posted byline:

   <p class="comment-footer">
     <mt:RepliedComment>Posted, in reply to <a href="#c<mt:CommentID>"><mt:CommentAuthor>'s comment</a>, 
     by<mt:Else>Posted by</mt:RepliedComment>
     <$mt:CommentAuthorLink default_name="Anonymous"$> <$mt:CommentAuthorIdentity$> |
     <a href="#comment-<$mt:CommentID$>"><$mt:CommentDate$></a> |
     <mt:CommentReplyLink>
   </p>
   

   So with the above example, if the comment was replying to someone else, the posted byline would read:

   Posted, in reply to X's comment, by Y
   

   Whereas if it were a new thread, it would simply read:

   Posted by Y
   

3. The final step is to add the MTCommentReplyField template tag within your comment form. Be sure not to place it inside of an element which may be hidden, we recommend it is added just before the "comments-open-text":

   <div id="comment-form-reply" style="display:none">
       <input type="checkbox" id="comment-reply" name="comment_reply" value="" onclick="mtSetCommentParentID()" />
       <label for="comment-reply" id="comment-reply-label"></label>
   </div>
   <div id="comments-open-text">
       ...
   

Once these changes are made, make sure to rebuild the necessary files!

Chronological Comment Threading

Chronological Threads display comments sorted by the date they were posted. If a comment was posted in reply to another, this information is shown inline rather than indenting the entire comment (thus creating a hierarchy).

The following steps guide you through editing your templates to display chronological threads. These instructions have been tailored to match the default templates. If you have customized your comment templates, these are bound to be different so you will have to adapt the logic:

1. Open the Comment Detail template module and search for:

   <$mt:CommentAuthorLink default_name="Anonymous" show_email="0"$> 
   <mt:IfNonEmpty tag="CommentAuthorIdentity"><$mt:CommentAuthorIdentity$></mt:IfNonEmpty> said:
   

2. To change this to a chronological thread, we will need to first check if the comment is a reply (i.e. if it has a parent). If it does, replace said with something more appropriate. Something like this works great:

   <!-- This displays the commenter's name and is the same as before -->
   <$mt:CommentAuthorLink default_name="Anonymous" show_email="0"$> 
   <mt:IfNonEmpty tag="CommentAuthorIdentity"><$mt:CommentAuthorIdentity$></mt:IfNonEmpty> 
   <!-- Check if the comment has a parent i.e. is it a reply? -->
   <mt:IfCommentParent>
       <mt:CommentParent> <!-- Set the context to the parent -->
           <a href="#comment-<mt:CommentID>">replied to <mt:CommentName>'s comment</a>
       </mt:CommentParent>
   <mt:Else> <!-- If this isn't a reply then -->
       said
   </mt:IfCommentParent>
   

3. Republish your templates. Your comments should now be in a chronological thread, for example:

Hierarchical Comment Threading

Hierarchical Threads are the more traditional way of displaying comment threads. Here, "top level" comments (i.e. those without replies) are sorted by date. For each comment, replies to it are listed underneath and indented slightly.

The following steps guide you through editing your templates to display hierarchical threads. These instructions have been tailored to match the default templates. If you have customized your comment templates, these are bound to be different so you will have to adapt the logic:

1. Open the Comments template module and search for this line:

   <$mt:Include module="Comment Detail"$>
   

2. To change this into a hierarchical thread, we will need to look through the top level comments and for each top level comment, look through its replies (indenting each one as appropriate). Something like this works great:

   <mt:IfCommentParent><mt:Else> <!-- This conditional checks to make sure that this comment isn't a reply -->
      <!-- Display the top level comment -->
      <$mt:Include module="Comment Detail"$>
      <mt:CommentReplies> <!-- Here we loop through the replies and for each reply -->
      <!-- if it is the first of that "level/depth", indent it -->
      <mt:CommentsHeader><div style="margin-left: 20px;"></mt:CommentsHeader>
      <!-- Display the comment -->
      <mt:Include module="Comment Detail">
      <!-- And loop through this container for replies of replies and so on -->    
      <mt:CommentRepliesRecurse>
      <!-- If this reply is the last of that "level/depth" close the div we opened to indent -->   
      <mt:CommentsFooter></div></mt:CommentsFooter>
      </mt:CommentReplies>
   </mt:IfCommentParent>
   

3. Republish your templates. Your comments should now be in a hierarchical thread, for example:

Template Tags for Comment Threading

• CommentParent
• CommentReplies
• CommentRepliesRecurse
• CommentReplyLink
• IfCommentParent
• IfCommentReplies
• CommentsFooter
• CommentsHeader

Release Note

The meta variables __even__, __odd__ and __counter__ do not respect their nested context nor do they display as one might expect under threaded comments. The following template code can work around this issue:

    <MTComments><MTIfCommentParent><MTElse>
    <mt:if name="is_even">even<mt:else>odd </mt:if>    
    <MTCommentID> <MTCommentDate>, <MTCommentAuthor>
    <MTCommentReplies>   
    <mt:if name="is_even">even<mt:else>odd </mt:if>    
    <MTCommentID>    <MTCommentDate>, <MTCommentAuthor>
    <MTCommentRepliesRecurse></MTCommentReplies>
    <mt:if name="is_even"><mt:setvar name="is_even" value="0">
    <mt:else><mt:setvar name="is_even" value="1"></mt:if>
    </MTIfCommentParent></MTComments>

About this feature

This feature was the result of the gracious contribution of Simply Threaded by Arvind Satyanarayan. Thank you Arvind!