Sometimes you need to customize the HTML output of the WordPress comments_template()
. Here’s how to do it in your Genesis child theme.
// First remove the genesis_default_list_comments function remove_action( 'genesis_list_comments', 'genesis_default_list_comments' ); // Now add our own and specify our custom callback add_action( 'genesis_list_comments', 'child_default_list_comments' ); function child_default_list_comments() { $args = array( 'type' => 'comment', 'avatar_size' => 54, 'callback' => 'child_comment_callback', ); $args = apply_filters( 'genesis_comment_list_args', $args ); wp_list_comments( $args ); } // This is where you customize the HTML output function child_comment_callback( $comment, $args, $depth ) { $GLOBALS['comment'] = $comment; ?> <li <?php comment_class(); ?> id="comment-<?php comment_ID() ?>"> <?php do_action( 'genesis_before_comment' ); ?> <div class="comment-left"> <div class="comment-author vcard"> <?php echo get_avatar( $comment, $size = $args['avatar_size'] ); ?> <?php printf( __( '<cite class="fn">%s</cite> <span class="says">%s:</span>', 'genesis' ), get_comment_author_link(), apply_filters( 'comment_author_says_text', __( 'says', 'genesis' ) ) ); ?> </div><!-- end .comment-author --> <div class="comment-meta commentmetadata"> <a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>"><?php printf( __( '%1$s at %2$s', 'genesis' ), get_comment_date(), get_comment_time() ); ?></a> <?php edit_comment_link( __( 'Edit', 'genesis' ), g_ent( '• ' ), '' ); ?> </div><!-- end .comment-meta --> </div> <div class="comment-right"> <div class="comment-content"> <?php if ($comment->comment_approved == '0') : ?> <p class="alert"><?php echo apply_filters( 'genesis_comment_awaiting_moderation', __( 'Your comment is awaiting moderation.', 'genesis' ) ); ?></p> <?php endif; ?> <?php comment_text(); ?> </div><!-- end .comment-content --> <div class="reply"> <?php comment_reply_link( array_merge( $args, array( 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?> </div> </div> <?php do_action( 'genesis_after_comment' ); /** No ending </li> tag because of comment threading */ }
In the example above I split the comment into comment-left
and comment-right
to display it in a 2 column format. Of course, you could customize it more extensively than that. See also the official StudioPress tutorial on customizing comments. Happy hacking!
Hi,
This is amazing. I have actually looking for this for a long time now, and I have found it finally. Looks kinda confusing for me right now, but I will show this to my coder.
Thanks you!