3

I have this custom extended Walker_Comments class:

class Custom_Comment_Walker extends Walker_Comment {
    var $tree_type = 'comment';
    var $db_fields = array( 'parent' => 'comment_parent', 'id' => 'comment_ID' );

    function __construct() { ?>
        <ul class="comments-list col-md-12">

    <?php }

    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $GLOBALS['comment_depth'] = $depth + 1;
        ?>

        <ul class="child-comments comments-list col-md-12">

    <?php }

    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $GLOBALS['comment_depth'] = $depth + 1; ?>

        </ul>

    <?php }

    function start_el( &$output, $comment, $depth = 0, $args = array(), $id = 0 ) {
        $depth++;
        $GLOBALS['comment_depth'] = $depth;
        $GLOBALS['comment'] = $comment;

        $tag = 'li';
        $add_below = 'comment';
        ?>

        <li <?php comment_class( $depth == '1' ? 'parent col-md-12' : 'child col-md-11') ?> id="comment-<?php comment_ID() ?>" itemprop="comment" itemscope itemtype="http://schema.org/Comment">
            <div class="comment-wrapper col-md-12">
                <?php echo get_avatar( $comment, 65, '[default gravatar URL]', 'Author’s gravatar' ); ?>
                <div class="info">
                    <div class="comment-meta" role="complementary">
                        <h2 class="comment-author">
                            <a class="comment-author-link" href="<?php comment_author_url(); ?>" itemprop="author"><?php comment_author(); ?></a>
                        </h2>
                        <time class="comment-time" datetime="<?php comment_date('Y-m-d') ?>T<?php comment_time('H:iP') ?>" itemprop="datePublished"><?php comment_date('jS F Y') ?>, <a href="#comment-<?php comment_ID() ?>" itemprop="url"><?php comment_time() ?></a></time>
                        <?php edit_comment_link('<p class="comment-meta-item">Edit this comment</p>','',''); ?>
                        <?php if ($comment->comment_approved == '0') : ?>
                        <p class="comment-time">Your comment is awaiting moderation.</p>
                        <?php endif; ?>
                    </div>
                    <div class="comment-content" itemprop="text">
                        <?php comment_text() ?>
                        <?php comment_reply_link( array_merge( $args, array( 'add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ) ?>
                    </div>
                </div>
            </div>

    <?php }

    function end_el(&$output, $comment, $depth = 0, $args = array() ) { ?>

        </li>

    <?php }

    function __destruct() { ?>

        </ul>

    <?php }
}

Which is laid out like this, after rendering:

enter image description here

When I hit the reply button, I'd like for my form to go under the comment that launched it, instead, the form goes right under where the tree starts, like this (gif image):

https://i.imgur.com/QQij8a4.gifv

I assume this has to do with not passing the correct parameters to

comment_reply_link( array_merge( $args, array( 'add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) )

How would I go about achieving this?

  • 1
    Can you show the html output that you're getting, including an entire comment, a reply link, and reply form - or, simpler, link to the example page? – CK MacLeod Jan 2 '18 at 7:54
1

Because that's done in javascript, and you have to enqueue that javascript for it to work, as stated in the docs:

If JavaScript is enabled and the comment-reply.js JavaScript is loaded the link moves the comment form to just below the comment.

https://codex.wordpress.org/Function_Reference/comment_reply_link

e.g.

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

Also take note of https://codex.wordpress.org/Migrating_Plugins_and_Themes_to_2.7/Enhanced_Comment_Display#Javascript_Comment_Functionality

Edit I suspect the fundamental problem is that the code doesn't use the same format, and so the needed IDs aren't present.

For example, the comment reply uses an ID to figure out which comment to put the reply form under, but your HTML has no IDs, see this line in wp-includes/class-walker-comment.php:

<div id="div-comment-<?php comment_ID(); ?>" class="comment-body">

No equivalent exists in your code. At least these IDs need to be present from the looks of it:

  • comment-x
  • div-comment-x

With the latter being nested inside the former, and x being the ID of that comment.

Note that at any point you can switch to one of the default themes in a test environment such as a local dev env to get the default working HTML, or by looking at the comment walker class in core at wp-includes/class-walker-comment.php

For reference, you can also override the moveform function used as defined here:

https://github.com/WordPress/WordPress/blob/master/wp-includes/js/comment-reply.js#L213

It's added to the main window object, so you can replace it with your own copy with extra debugging output, or different mechanics

  • Already doing it within my setup: pastebin.com/ND732ji3 – Jonathan Guerin Jan 2 '18 at 0:05
  • 1
    And you've read the final link and made sure everything's in there? It sounds as if your walker is generating HTML that's missing the required IDs and classes, but I'm unsure which those are based on your code – Tom J Nowell Jan 2 '18 at 14:32
  • right - that's why I asked above for a link or for the actual HTML output. Might also be relevant how the custom Walker is being added. – CK MacLeod Jan 2 '18 at 18:42
  • @JonathanGuerin see my edits – Tom J Nowell Jan 3 '18 at 13:50

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.