Custom comment walker for HTML5 friendly WordPress comment and threaded replies. To be inserted in functions.php.

wp-comment-walker

<?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 }

	}
?>

thanks, appreciate it!

Merged in suggestions/changes from @karrirasinmaki 😄 I’m still quite new to PHP so any suggestions will be appreciated!

Hey nice work.
I think theses lines are a bit confusing :
if ('article' == $args['style']) {
$tag = 'article';
$add_below = 'comment';
}
else {
$tag = 'article';
$add_below = 'comment';
}
By the way your code was a good starting point for my own walker. Thanks you !

Just commenting to leave a thank you message. I used your custom walker class as base for a walker I'm developing for a theme! Tks!

Thanks for sharing !

Thank you so much!

Thanks so much. Your outstanding tutorial save my life!

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

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

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

@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. ✨

@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.