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
Copy link
Author

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
Copy link

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
Copy link

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
Copy link

garciasanchezdani commented Apr 27, 2015

Awesome!!! Thanks very much for share. 😄

@E-VANCE
Copy link

E-VANCE commented Jun 13, 2015

thanks, appreciate it!

@georgiecel
Copy link
Author

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
Copy link

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 !

Copy link

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
Copy link

nicooprat commented Oct 14, 2015

Thanks for sharing !

@zohaib87
Copy link

zohaib87 commented Feb 14, 2016

Thank you so much!

@mohsinrafiq
Copy link

mohsinrafiq commented Mar 28, 2016

Thanks so much. Your outstanding tutorial save my life!

@alexstandiford
Copy link

alexstandiford commented May 1, 2016

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?

@nedrahin
Copy link

nedrahin commented Apr 6, 2018

003

@georgiecel
Copy link
Author

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.

@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