Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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 }
}
?>
@georgiecel

This comment has been minimized.

Copy link
Owner Author

@georgiecel georgiecel commented Mar 9, 2014

  • Insert the gist into functions.php.
  • Replace [default gravatar URL] with your default gravatar URL.
  • Comment form will appear under the comment you are replying to, provided your theme has been built properly (for instance, id="respond" should be added to the comment form wrapper, and use to insert a cancel reply link).
  • Also implements schema.org microdata.
  • Insert the following into comments.php: new comment_walker() )); ?>
@karrirasinmaki

This comment has been minimized.

Copy link

@karrirasinmaki karrirasinmaki commented Feb 7, 2015

To respect PHP strict standards, start_el function should have declared function parameters as so:
function start_el( &$output, $comment, $depth = 0, $args = array(), $id = 0 )

So, there should be default values in variables $depth and $args too.

@hasangilak

This comment has been minimized.

Copy link

@hasangilak hasangilak commented Apr 14, 2015

correct deceleration for start_lvl function is
function start_lvl( &$output, $depth = 0, $args = array() )

and also correct deceleration for start_el function is
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 )

@garciasanchezdani

This comment has been minimized.

Copy link

@garciasanchezdani garciasanchezdani commented Apr 27, 2015

Awesome!!! Thanks very much for share. 😄

@E-VANCE

This comment has been minimized.

Copy link

@E-VANCE E-VANCE commented Jun 13, 2015

thanks, appreciate it!

@georgiecel

This comment has been minimized.

Copy link
Owner Author

@georgiecel georgiecel commented Jun 17, 2015

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

@nicolaspetitjean

This comment has been minimized.

Copy link

@nicolaspetitjean nicolaspetitjean commented Aug 22, 2015

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 !

@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Sep 9, 2015

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!

@nicooprat

This comment has been minimized.

Copy link

@nicooprat nicooprat commented Oct 14, 2015

Thanks for sharing !

@zohaib87

This comment has been minimized.

Copy link

@zohaib87 zohaib87 commented Feb 14, 2016

Thank you so much!

@mohsinrafiq

This comment has been minimized.

Copy link

@mohsinrafiq mohsinrafiq commented Mar 28, 2016

Thanks so much. Your outstanding tutorial save my life!

@alexstandiford

This comment has been minimized.

Copy link

@alexstandiford alexstandiford commented May 1, 2016

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

@codeasashu

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

@dtbaker dtbaker commented Aug 24, 2016

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

@nedrahin

This comment has been minimized.

Copy link

@nedrahin nedrahin commented Apr 6, 2018

003

@georgiecel

This comment has been minimized.

Copy link
Owner Author

@georgiecel georgiecel commented Mar 18, 2019

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

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