Moving Reply Button to the End of WordPress Comment Thread

Reply

In this post, I will document what I’m doing when modifying the WordPress comment-template for my custom theme. The focus of this documentation is on how we can move Reply button to the end of WordPress comment thread. If you are accustomed to WordPress comment-template, you should already know that by default the Reply button is placed after the first comment in every thread.

To understand the difference of the condition before the Reply button is moved and after it is moved, look at the following two pictures.

The first picture shows the initial condition, before the Reply button is moved:

Initial condition, the Reply button is at the top of comment thread

The second picture shows the final condition, after the Reply button is moved to the end of comment thread:

Final condition, the Reply button is at the bottom of comment thread

The goal of moving the Reply button is to make our readers easier when replying a comment thread. For a long thread, if the Reply button is placed at the top of the thread, after reading a comment thread the readers will be forced to scroll the screen up to find and click this button. This action is not necessary if we place the button at the bottom of the thread.

OK, let’s now focus on the trick to place this Reply button at the bottom of WordPress comment thread. First, to fully understand how this trick works, you have to understand the basic principle on how the comment-template works in WordPress, especially the use of wp_list_comments() function. This function is called to render the standard WordPress comment thread, or alternatively we can also call the callback and end-callback functions, so we can write our own functions to fully control how the comment thread will be rendered.

To move the Reply button, we can’t use the standard wp_list_comments() function, but we have to write the callback and end-callback functions. The following source code shows the sample of these two functions in my WordPress theme. The Reply button must be placed inside the mytheme_list_endcallback() to make it placed at the end of comment thread:

<?php
function mytheme_list_callback($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; $GLOBALS['comment_depth'] = $depth;
   ?>
<li id="li-comment-<?php comment_ID() ?>" <?php comment_class() ?>>
<?php mytheme_avatar_link() ?>
<div id="comment-<?php comment_ID() ?>" class="commentWrapper">
   <?php mytheme_author_link() ?>
   <?php comment_text() ?>
   <?php if ($comment->comment_approved == '0') : ?>
   <span class="moderation"><?php _e('Your comment is awaiting moderation.', 'mytheme'); ?></span><br /><?php endif; ?>
<?php
}

function mytheme_list_endcallback($comment, $args, $depth) {
?>
   <div class="actions">
      <?php comment_reply_link(array_merge($args, array('reply_text' => __('REPLY »', 'mytheme'), 'depth' => $depth+1, 'max_depth' => $args['max_depth'])), $comment) ?>
   </div>
</div>
</li>
<?php
}

Please note that the important part is the value of the ‘depth’ parameter when calling the comment_reply_link() function in the mytheme_list_endcallback() function. The ‘depth’ parameter value is filled with $depth+1. And don’t forget to put $comment as the second parameter value when calling comment_reply_link() function.

Then in the comments.php file of our theme, include these function names when calling wp_list_comments(), as shown below:

<?php wp_list_comments('type=comment&callback=mytheme_list_callback&end-callback=mytheme_list_endcallback'); ?>

Ready to implement it for your own WordPress blog? Have a nice try!

This entry was posted in WordPress and tagged .

One Response to Moving Reply Button to the End of WordPress Comment Thread

  1. Duke Doje says:

    Wow this site is really informative Thanks.

Leave a Reply

Your email address will not be published.

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

About Me

I am a professional developer and designer for the following systems: WordPress, Magento, and OpenCart. You can hire me to do overseas works related to those systems.
Hire me | Donate / Payment | Testimonials

Recent Comments