3

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?

2 Answers 2

7
  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' );
?>
6
  • Chip, thanks for your answer. I added "<?php wp_enqueue_script( 'comment-reply' ); ?>" in functions.php and this almost did the trick. It appears under the related comment but I want it to appear inside the .comment-body and if it's possible to style it differently. Also I couldn't find the code in first note.
    – Arg Geo
    May 21, 2012 at 21:38
  • That's not actually the way you want to do it. If you do that, it will get executed far sooner than WordPress expects wp_enqueue_script(). See edited answer, for how to wrap the call in a callback, and hook it into the correct action hook. May 21, 2012 at 22:24
  • After doing what you told me in the edit, stopped working as I wanted to and appears again under the last comment.
    – Arg Geo
    May 21, 2012 at 22:29
  • I placed the code in Note in header.php inside <head></head> and now is working as I wanted to but also I want the reply form to appear inside the comment-body and not under of it. Is there any way?
    – Arg Geo
    May 21, 2012 at 22:49
  • At that point, you'll probably want to look at the generated markup, and see what you can manipulate via CSS. Note also: if you put the wp_enqueue_script() call directly in header.php, you'll be loading that script even when you don't need it; just FYI. May 22, 2012 at 0:38
0

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;

    })
2
  • Karina thanks for your answer. I can't clearly understand you. Just to tell you, I use <?php wp_list_comments(); ?> so I don't know where to place the <div class="quick-holder"></div>. Also I don't know where to place the <form ...></form> and last, my theme doesn't hav any file called "wp-comments-post.php".
    – Arg Geo
    May 20, 2012 at 22:43
  • WordPress already has a script for manipulating the comment-reply form; it is called 'comment-reply'. No need to reinvent that wheel. May 21, 2012 at 12:09

Not the answer you're looking for? Browse other questions tagged or ask your own question.