1

I'm currently working to design my first WordPress blog and I got stuck when I came to code comment-reply-button because I want the comment-reply-button to be coded in span element only not a element at all. I know it's possible because I saw this on some blog:

It works. But, I tried my level best but could not make a working one. Will you experts please help me out! I'm mentioning the custom callback I'm using for comment system, please have a glance over them and give me a solution.

function comment($comment, $args, $depth) {$GLOBALS['comment'] = $comment; ?>
<li <?php comment_class(); ?> id="comment-<?php comment_ID() ?>">
<div id="div-comment-<?php comment_ID() ?>" class="comment-body">
<div class="comment-author">
<cite class="fn"><?php printf(__('%s'), get_comment_author_link()) ?></cite>
</div>
<?php comment_text(); ?>
<div class="comment-reply">

**** HERE <SPAN> ELEMENT FOR REPLY-BUTTON WILL BE PLACED ****

</div>
</div>
<?php } ?>

enter image description here

Here's the custom comment form for reply as well.

0

You can generate a custom comment reply element like so:

This will replace the **** HERE <SPAN> ELEMENT FOR REPLY-BUTTON WILL BE PLACED ****.

<?php if ( get_option( 'comment_registration' ) && ! is_user_logged_in() ) : ?>
    <a rel="nofollow" class="comment-reply-login" href="<?php // wrapped
      echo esc_url( wp_login_url( get_permalink() ) ); ?>">Log in to Reply</a>
<?php else : // User is logged-in or that registration not needed to comment.
// 'respond' is the ID of the comment form's wrapper.
$onclick = sprintf( 'return addComment.moveForm( "%s", "%d", "respond", "%d" )',
    'div-comment-' . $comment->comment_ID, $comment->comment_ID, get_the_ID() ); ?>
    <span class="btn btn-rwr"
      data-href="#comment-<?php echo $comment->comment_ID; ?>" onclick='<?php echo $onclick; ?>'
      aria-label="Reply to <?php echo esc_attr( $comment->comment_author ); ?>">Reply</span>
<?php endif; ?>

The span markup is identical to the one in the image. But you can change it easily..

UPDATE

If nothing happens when you click on the custom span element, then make sure the comment reply (JavaScript) script is loaded: (add this code to the theme's functions.php file)

add_action( 'wp_enqueue_scripts', function(){
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
} );

And make sure the respond below is the correct ID of the comment form's wrapper:

$onclick = sprintf( 'return addComment.moveForm( "%s", "%d", "respond", "%d" )'

And in your CSS, you can also add something like:

.comment-reply > span {
    cursor: pointer;
}

UPDATE #2

For the default comment-reply script (check previous update) to work as expected, in your comment <li>, .comment-reply should be placed below/after and not inside the .comment-body:

<li <?php comment_class(); ?> id="comment-<?php comment_ID() ?>">
    <div id="div-comment-<?php comment_ID() ?>" class="comment-body">
        ...
    </div><!-- .comment-body -->
    <div class="comment-reply">
        ...the SPAN here..
    </div>
</li>

And in your CSS, you should have something like:

#respond + .comment-reply {
    display: none;
}

to hide the "Reply" span/button after its clicked.

  • I did tried this code snippet on my callback as reply button but it's not working because it is not clickable. – Rishabh Jha Dec 14 '18 at 12:05
  • What do you mean not clickable? Did you see any JS errors in the browser's console? And when you inspect the element, it's the markup you wanted, isn't it? – Sally CJ Dec 14 '18 at 13:36
  • See the "UPDATE" part in the answer and let me know. – Sally CJ Dec 15 '18 at 3:23
  • Sorry Sally, I brought you to this unwanted trouble. Well, this span code will only work with a custom comment reply form that comes up once someone click over this reply button. Do me one more favoue, please code one for me. – Rishabh Jha Dec 15 '18 at 4:37
  • What exactly do you mean? Have you just tried to enqueue the comment reply script? And if you look at the image, it has addComment.moveForm(); so what else do you expect? What is the ID of the comment form's wrapper? You should replace it with the respond in the code (i.e. addComment.moveForm()). – Sally CJ Dec 15 '18 at 4:45

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

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