Styling the WordPress comments can be a pain if you don’t know what you’re doing. You have to wade through functions and files to finally get what you want.
Luckily, we can write our own comment function, using our own code, to make styling the comments 100% easier and 50% more fun 
The Function
In your WordPress theme folder (root/wp-content/themes/your-theme/) there will be a file called functions.php. This is the first file we are going to edit, so open it up. Add this code to the bottom of functions.php.
<?php
function envex_comments($comment, $args, $depth) {
$GLOBALS['comment'] = $comment;
//grab the commenter id
$user_id = $comment->user_id;
$user = new WP_User( $user_id );
//set the current role of that commenter to the role variable
//most of the time, you'll just be worrying about you, the administrator
$role = isset($user) ? $user->roles[0] : ''; ?>
<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
<div>
<?php if(function_exists('get_avatar')) { echo get_avatar($comment, '45'); } ?>
<p><strong><?php comment_author_link() ?></strong><br /><?php comment_date('m/d/y \@ h:m a') ?></p>
</div> <!-- comment_grav -->
<div>
<?php comment_text() ?>
</div> <!-- comment_text -->
<div>
<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
</div>
<?php
if ($comment->comment_approved == '0') : ?>
<p><em>Your comment is awaiting moderation.</em></p>
<?php
endif; ?>
</li>
<?php
/* Changes every other comment to a different class */
$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';
}
?>
In a nutshell, WordPress is going to run this function for each comment.
We’ve created an li element that will hold all of our comment info.
The Gravatar
The first div, comment_grav, will display a gravatar is the current commenter has one setup. We use get_avatar($comment, ’45′) and pass 2 variables to it. The first one being the comment info and the second is the size of our gravatar.
You can read more about gravatars over at their website!
The Comment Text and The Reply Link
These next 2 functions are pretty straight forward. To display the comment text we use comment_text().
To display the reply link we use the comment_reply_link(). The arguments that are being passed are to deal with threaded comments (*if they’re enabled).
*Threaded comments are enabled in Admin panel –> Settings -> Discussions.
The Approval
We don’t want to show any unapproved comments, so we check to see if $comment->comment_approved is false. If it’s false we display that it’s awaiting moderation.
The Template
Now that we’ve created our own comments function, we need to tell our theme to use it instead of the WordPress one. Open comments.php and find wp_list_comments(). It should be around line 29.
We are going to pass a few arguments to this function.
wp_list_comments(array('reply_text'=>'Reply to this Comment','type'=>'comment','callback' => 'envex_comments'));
These arguments tell the wp_list_comments() function to use envex_comments() to display our comments.
Conclusion
You now have the basic structure for some new comments on your blog/cms. All that’s left is to style them up to match your site, and i’m going to leave that up to you!
