[Resolved] Move "cancel reply"

[Bas]

Hi support team,

I have a question about the comment section.

Is it possible to move the “cancel reply” link next to the “post comment” button, and make it appear like a button?

[Tom]

Been playing with this, but I can’t get it figured out.

I found how to add it after the button in the HTML:

add_filter( 'comment_form_submit_field', function( $button ) {
	return $button . get_cancel_comment_reply_link();
} );

However, it never displays when you click the Reply link. I assume it’s because the JS they use only targets the first link.

I tried to disable the first link, but it looks like it’s hard-coded into WordPress: https://github.com/WordPress/WordPress/blob/5.1.1/wp-includes/comment-template.php#L2377

It might be worth asking over on something like wordpress.stackexchange.com. I might be overlooking something.

[Bas]

Hi Tom,

I did some searching which lead tot this post which you may find interesting.

I will try to implement it and report back here.

Thanks for your time!

[Tom]

jQuery is definitely one method that should work. Let me know how it goes 🙂

[Bas]

Well, that works as intended although it puts the “cancel reply” link next to the “reply” link instead of next to the “post comment” button.

Any thoughts on this?

[Tom]

Try this instead:

<script>
jQuery( function( $ ){
    $( '.comment-reply-link', '.comment-body' ).on( 'click', function(){
        $( '#cancel-comment-reply-link' ).insertAfter( '.form-submit' ).addClass( 'button' ).show();
    } );

    $( '#cancel-comment-reply-link' ).on( 'click', function(){
        $( this ).hide();
    } );
} );
</script>

[Bas]

Your code works.
I can position it with CSS or is there a better solution?

[Tom]

Looks like you did it! Looks great 🙂

[Bas]

Yep, thanks for your help Tom.

Have a nice day!

[Tom]

Thanks! You too 🙂

[Author]

Posts