Skip to content

Instantly share code, notes, and snippets.

@georgiecel
Last active December 28, 2022 15:16
Show Gist options
  • Star 39 You must be signed in to star a gist
  • Fork 21 You must be signed in to fork a gist
  • Save georgiecel/9445357 to your computer and use it in GitHub Desktop.
Save georgiecel/9445357 to your computer and use it in GitHub Desktop.
Custom comment walker for HTML5 friendly WordPress comment and threaded replies. To be inserted in functions.php.
<?php
class comment_walker extends Walker_Comment {
var $tree_type = 'comment';
var $db_fields = array( 'parent' => 'comment_parent', 'id' => 'comment_ID' );
// constructor – wrapper for the comments list
function __construct() { ?>
<section class="comments-list">
<?php }
// start_lvl – wrapper for child comments list
function start_lvl( &$output, $depth = 0, $args = array() ) {
$GLOBALS['comment_depth'] = $depth + 2; ?>
<section class="child-comments comments-list">
<?php }
// end_lvl – closing wrapper for child comments list
function end_lvl( &$output, $depth = 0, $args = array() ) {
$GLOBALS['comment_depth'] = $depth + 2; ?>
</section>
<?php }
// start_el – HTML for comment template
function start_el( &$output, $comment, $depth = 0, $args = array(), $id = 0 ) {
$depth++;
$GLOBALS['comment_depth'] = $depth;
$GLOBALS['comment'] = $comment;
$parent_class = ( empty( $args['has_children'] ) ? '' : 'parent' );
if ( 'article' == $args['style'] ) {
$tag = 'article';
$add_below = 'comment';
} else {
$tag = 'article';
$add_below = 'comment';
} ?>
<article <?php comment_class(empty( $args['has_children'] ) ? '' :'parent') ?> id="comment-<?php comment_ID() ?>" itemprop="comment" itemscope itemtype="http://schema.org/Comment">
<figure class="gravatar"><?php echo get_avatar( $comment, 65, '[default gravatar URL]', 'Author’s gravatar' ); ?></figure>
<div class="comment-meta post-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-meta-item" 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-meta-item">Your comment is awaiting moderation.</p>
<?php endif; ?>
</div>
<div class="comment-content post-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>
<?php }
// end_el – closing HTML for comment template
function end_el(&$output, $comment, $depth = 0, $args = array() ) { ?>
</article>
<?php }
// destructor – closing wrapper for the comments list
function __destruct() { ?>
</section>
<?php }
}
?>
@zohaib87
Copy link

Thank you so much!

@mohsinrafiq
Copy link

Thanks so much. Your outstanding tutorial save my life!

@alexstandiford
Copy link

Just wanted to say thanks. This made my life so much easier.

@codeasashu
Copy link

codeasashu commented Jul 3, 2016

For me, clicking reply wouldn't trigger moveForm function when replying on an existing comment. The fix to this is adding $comment->comment_ID as last parameter to comment_reply_link function in start_el method of this walker. The code would look like:

<?php comment_reply_link(array_merge( $args, array('add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'])),$comment->comment_ID) ?>

Here is updated gist: https://gist.github.com/ashutosh2k12/e420dfc02542fbef303e64ebb6adbd24

@dtbaker
Copy link

dtbaker commented Aug 24, 2016

Does anybody have a nice CSS layout for this comment list?

@parvezpreo
Copy link

003

@georgiecel
Copy link
Author

@nicolaspetitjean @ghost @nicooprat @zohaib87 @mohsinrafiq @alexstandiford A very, very belated thank you, everyone! I didn’t realise that this gist would get so much attention when I wrote it ☺️ And I am not on git much so I have missed most of these comments.

@codeasashu Thank you for your suggestion – I will update my gist when I find the time 😊

@dtbaker I’m currently using this on my blog on all posts that allow comments – the repository is at georgiecel/bermuda. ✨

@xninedesign
Copy link

xninedesign commented Mar 5, 2022

@dtbaker I’m currently using this on my blog on all posts that allow comments – the repository is at georgiecel/bermuda. ✨

I tried copy code from your repository into my files but unfortunately when i click the Reply button the form is not appear under comment and what is more sad this link force new page load. Also the comment form is for visitors (e-mail & website inputs) even when i am logged in as administrator. I do not use any JS scripts besides jQuery library.

EDIT:

I figured out what was wrong.
First in comments.php (WP v5.9.1) i change <?php if ( $user_id ) : ?> to <?php if ( is_user_logged_in() ) : ?>.
Second, there is necessary to use comment reply script from /wp-includes/js direcrtory. I don't know why this was not implemented into my code even by <?php wp_footer(); ?> from my footer.php template file.

Now it's all fine. Thanks for sharing this code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment