WordPress Codex says that wp_list_comments() “displays all comments for a post or page based on a variety of parameters including ones set in the administration area”. But headaches begin if you want to change the comment HTML inside theme files – if you ever tried this, but wasn’t able to find any element that appears inside comments’ HTML (try theme string search for comment-author vcard class e.g., and you’ll quickly realize what are we talking about), the reason was simple – it’s not there. This whole code is generated from comment-template.php, which itself is a part of WordPress core.
Function wp_list_comments() accepts several parameters – callback is one of them. In case you didn’t know, in WordPress ecosystem callback actually means “take the code from WordPress core, modify according to my needs, insert everything into functions.php and use callback to make me look like a WordPress guru”. Just kidding :).
If your theme supports HTML5 comments, it will also mean that html5_comment function will generate the comment HTML. So let’s have a look on how it looks like, taken directly from WordPress core:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
protected function html5_comment( $comment, $depth, $args ) { $tag = ( 'div' === $args['style'] ) ? 'div' : 'li'; ?> <<?php echo $tag; ?> id="comment-<?php comment_ID(); ?>" <?php comment_class( $this->has_children ? 'parent' : '' ); ?>> <article id="div-comment-<?php comment_ID(); ?>" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <?php if ( 0 != $args['avatar_size'] ) echo get_avatar( $comment, $args['avatar_size'] ); ?> <?php printf( __( '%s <span class="says">says:</span>' ), sprintf( '<b class="fn">%s</b>', get_comment_author_link() ) ); ?> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="<?php echo esc_url( get_comment_link( $comment->comment_ID, $args ) ); ?>"> <time datetime="<?php comment_time( 'c' ); ?>"> <?php printf( _x( '%1$s at %2$s', '1: date, 2: time' ), get_comment_date(), get_comment_time() ); ?> </time> </a> <?php edit_comment_link( __( 'Edit' ), '<span class="edit-link">', '</span>' ); ?> </div><!-- .comment-metadata --> <?php if ( '0' == $comment->comment_approved ) : ?> <p class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.' ); ?></p> <?php endif; ?> </footer><!-- .comment-meta --> <div class="comment-content"> <?php comment_text(); ?> </div><!-- .comment-content --> <?php comment_reply_link( array_merge( $args, array( 'add_below' => 'div-comment', 'depth' => $depth, 'max_depth' => $args['max_depth'], 'before' => '<div class="reply">', 'after' => '</div>' ) ) ); ?> </article><!-- .comment-body --> <?php } } |
In order to edit this, all you need to do is insert this code into functions.php, make few adjustments to get it all working, modify according to your needs and use callback parameter so the WordPress will use your custom function. This is how you call a custom function:
|
1 2 3 4 5 |
<?php wp_list_comments( array( 'callback' => bbird_under_comments, ) ); ?> |
And this is my example of callback function – I wanted to implement Foundation grid system into comment section and rearrange some elements. You are free to modify the code as you wish. Oh, and just so you know, $comment is WordPress globals object…
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
function bbird_under_comments($comment, $args, $depth) { $tag = ( 'div' === $args['style'] ) ? 'div' : 'li'; ?> <<?php echo $tag; ?> id="comment-<?php comment_ID(); ?>" <?php comment_class(); ?>> <article id="div-comment-<?php comment_ID(); ?>" class="comment-body"> <div class="row"> <div class="small-3 columns"> <div class="gravatar-container"> <?php if ( 0 != $args['avatar_size'] ) echo get_avatar( $comment, $args['avatar_size'] ); ?> </div><!-- .comment-meta --> </div> <div class="small-9 columns"> <div class="comment-meta"> <div class="comment-author"> <?php printf( __( '%s' ), sprintf( '<span class="commenter">%s</span>', get_comment_author_link() ) ); ?> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="<?php echo esc_url( get_comment_link( $comment->comment_ID, $args ) ); ?>"> <time datetime="<?php comment_time( 'c' ); ?>"> <?php printf( _x( '%1$s at %2$s', '1: date, 2: time' ), get_comment_date(), get_comment_time() ); ?> </time> </a> </div><!-- .comment-metadata --> <?php if ( '0' == $comment->comment_approved ) : ?> <p class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.' ); ?></p> <?php endif; ?> </footer><!-- .comment-meta --> <div class="comment-content"> <?php comment_text(); ?> </div><!-- .comment-content --> </div> </div> <div class="small-12 columns"> <?php comment_reply_link( array_merge( $args, array( 'add_below' => 'div-comment', 'depth' => $depth, 'max_depth' => $args['max_depth'], 'before' => '<div class="reply">', 'after' => '</div>' ) ) ); ?> </div> </article><!-- .comment-body --> <?php } |