I hate the Comments Template. There, I said it. It can be a confusing mess.
Luckily for you, I’ve sorted it out. Confusing still, yes. But sorted out. For this tutorial on the Comments Template, I’m basically going to walk you through what’s going to happen, show you some custom code snippets you’ll need to add to your inc/template-tags.php file, and then drop the whole thing on you. Hopefully, it’ll start to make sense. But at the very least you’ll have a wicked comments template.
Let’s take a look at a quick list of what’s going on in this Template.
That’s a lot of stuff going on for one template. But written out like that, it’s pretty straightforward.
We’re going to use the function wp_list_comments() that conveniently spits out an ordered list of comments and pingbacks markup for your post (threaded too).
To make our comments template code work, you’ll use a custom callback function that controls the layout of the actual comments and pingbacks. Open inc/template-tags.php and paste the following function at the very bottom of the file.
<?phpif (! function_exists ( 'shape_comment' )) : /** * * Template for * comments and pingbacks. * * * Used as a callback by wp_list_comments() for * displaying the comments. * * @since Shape 1.0 */ function shape_comment($comment, $args, $depth) { $GLOBALS ['comment'] = $comment; switch ($comment->comment_type) : case 'pingback' : case 'trackback' : ?><li class="post pingback"> <p><?php _e( 'Pingback:', 'shape' ); ?> <?php comment_author_link(); ?><?php edit_comment_link( __( '(Edit)', 'shape' ), ' ' ); ?></p><?php break; default : ?><li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>"> <article id="comment-<?php comment_ID(); ?>" class="comment"> <footer> <div class="comment-author vcard"><?php echo get_avatar( $comment, 40 ); ?><?php printf( __( '%s <span class="says">says:</span>', 'shape' ), sprintf( '<cite class="fn">%s</cite>', get_comment_author_link() ) ); ?></div> <!-- .comment-author .vcard --><?php if ( $comment->comment_approved == '0' ) : ?><em><?php _e( 'Your comment is awaiting moderation.', 'shape' ); ?></em> <br /><?php endif; ?><div class="comment-meta commentmetadata"> <a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>"><time pubdate datetime="<?php comment_time( 'c' ); ?>"><?php /* translators: 1: date, 2: time */ printf ( __ ( '%1$s at %2$s', 'shape' ), get_comment_date (), get_comment_time () ); ?></time></a><?php edit_comment_link ( __ ( '(Edit)', 'shape' ), ' ' ); ?></div> <!-- .comment-meta .commentmetadata --> </footer> <div class="comment-content"><?php comment_text(); ?></div> <div class="reply"><?php comment_reply_link( array_merge( $args, array( 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?></div> <!-- .reply --> </article> <!-- #comment-## --><?php break; endswitch ; }endif; // ends check for shape_comment()