Comments Reply Form

Question

When I click on Reply, the reply form appears at the bottom of the page (under the last comment). How can I add the Reply Form inside the comment to which I am going to add the reply?

Answer 1

1. Ensure that you have Threaded Comments enabled: go to Dashboard -> Settings -> Discussion and enable the option to thread comments

2. Ensure that your Theme enqueues the comment-reply script. Look for the following, usually in header.php, functions.php, etc.:

   <?php wp_enqueue_script( 'comment-reply' ); ?>
   

   Note: this call is usually wrapped in a conditional, such as:

   <?php
   if ( is_single() && comments_open() && get_option( 'thread_comments' ) ) {
       wp_enqueue_script( 'comment-reply' );
   }
   ?>
   

   Note 2: You may also see this code inside of a callback, hooked into wp_enqueue_scripts, wp_head, or comment_form_before

Edit

To enqueue the comment-reply script via functions.php, don't just put. That's_doing_it_wrong()`, because it will fire far too eary. Do this instead:

<?php
function wpse52737_enqueue_comment_reply_script() {
    if ( get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment_reply' );
    }
}
add_action( 'comment_form_before', 'wpse52737_enqueue_comment_reply_script' );
?>

Answer 2

You can create a <div class="quick-holder"></div> container in the end of each one comment and copy&drop a comment form on that <div> via jQuery.

Hidden form which will be enabled by clicking on Reply link.

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

jQuery

// QUICK REPLY FORM
var hForm_a = p('#commentform-a').outerHeight(true) + 15 + 25 + 25; // paddings & margin

p('a.quick-reply').click(function(){

    var
        id = p(this).attr('title'),
        form = p('#commentform-a'),
        author = p('#author-'+id).html();

        form.find('#to-author').html(author);

        form.removeClass('hidden absolute');

    //  form.remove();

        p('.cancel-reply').addClass('none');

        // Hide major form
        p('#commentform').stop(true, false).animate({height: 0, opacity: 0}, 500, function(){
                                                        p(this).addClass('hidden absolute').css({height: 'auto'});
                                                        p('#review-label').removeClass('none');
                                                    });

        // Close all .quick-holder's
        p('.quick-holder').stop(true, false).animate({height: 0}, 500);

        // Put the form to the holder
        p('#comment-'+id).find('.quick-holder:eq(0)').append(form).animate({height: hForm_a}, 500, function(){
                                                                                                        p(this).css({height: 'auto'});
                                                                                                        p('#comment-'+id).find('.cancel-reply:eq(0)').removeClass('none');
                                                                                                    });

        // Set an ID for hidden field
        p('#comment_parent').val(id);

    return false;

})



    // Cancel reply
    p('.cancel-reply').click(function(){

        var hForm = p('#commentform').outerHeight(true);

        // Display major form
        p('#commentform').removeClass('hidden absolute').stop(true, false).animate({height: hForm, opacity: 1}, 1000, function(){ p(this).css({height: 'auto'}) });

        p('.cancel-reply').addClass('none');
        p('#commentform-a').addClass('hidden absolute');

        // Close all .quick-holder's
        p('.quick-holder').css({height: 0});

        return false;

    })