Customize comments HTML output

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( '&bull; ' ), '' ); ?>
			</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!