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
- Ensure that you have Threaded Comments enabled: go to
Dashboard -> Settings -> Discussion
and enable the option to thread comments Ensure that your Theme enqueues the
comment-reply
script. Look for the following, usually inheader.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
, orcomment_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' );
?>
-
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 GeoMay 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 GeoMay 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 GeoMay 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 inheader.php
, you'll be loading that script even when you don't need it; just FYI. May 22, 2012 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;
})
-
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 GeoMay 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