Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question

2 Answers 2

up vote 2 down vote accepted
  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' );
?>
share|improve this answer
    
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 '12 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. –  Chip Bennett May 21 '12 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 '12 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 '12 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. –  Chip Bennett May 22 '12 at 0:38

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;

    })
share|improve this answer
    
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 '12 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. –  Chip Bennett May 21 '12 at 12:09

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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