Easily customize your WordPress comments looks

As you might know, the function that displays the comments on your WordPress blog (wp_list_comments()) is declared inside the WordPress core. Have you ever wondered how to customize the look of your WordPress comments within your theme and without having to change anything to the core? It is possible and can be done easily.

But many people are changing the core files, because they simply don’t know any other way to change the default layout your comments have. Once they have to update their WordPress core, the changes are lost and need to be applied again!

By default, the call to wp_list_comments() in comments.php looks like this;

[sourcecode language=”php”]<ul>
<?php wp_list_comments(); ?>
</ul>[/sourcecode]

Using it this way, it will use the default formatting on the comments. We can provide some arguments to that function, so we can change the looks of our comments. When we look at the arguments we can provide, there is the callback-argument;

callback – (string) The name of a custom function to use to display each comment. Defaults to null. Using this will make your custom function get called to display each comment, bypassing all internal WordPress functionality in this respect. Use to customize comments display for extreme changes to the HTML layout. Not recommended.

It says doing this is not recommended, but it is the way to change the looks of your comments without changing WordPress core files! We can list our function to be executed to display each function like this;

[sourcecode language=”php”]<ul>
<?php wp_list_comments(‘callback=mytheme_comment’); ?>
</ul>[/sourcecode]

This way, the function theme_display_comments() will be used to display each comment, skipping the normal WordPress routines to do this. Because we skip those routines, we have to take a closer look at our function to make it sure it will display the comments properly. The WordPress codex provides us with the following example, that should get you started on creating custom looks for your comments;

[sourcecode language=”php”]function mytheme_comment($comment, $args, $depth) {
$GLOBALS[‘comment’] = $comment; ?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
<div id="comment-<?php comment_ID(); ?>">
<div>
<?php echo get_avatar($comment,$size=’48’,$default='<path_to_url>’ ); ?>
<?php printf(__(‘<cite>%s</cite> <span>says:</span>’), get_comment_author_link()) ?>
</div>
<?php if ($comment->comment_approved == ‘0’) : ?>
<em><?php _e(‘Your comment is awaiting moderation.’) ?></em>
<br />
<?php endif; ?>
<div><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__(‘%1$s at %2$s’), get_comment_date(), get_comment_time()) ?></a><?php edit_comment_link(__(‘(Edit)’),’  ‘,”) ?></div>
<?php comment_text() ?>
<div>
<?php comment_reply_link(array_merge( $args, array(‘depth’ => $depth, ‘max_depth’ => $args[‘max_depth’]))) ?>
</div>
</div>
<?php
}[/sourcecode]

When we put this function in the functions.php-file of our theme, we can customize it (and thus modify the looks of our comments) and save these modifications, so they will be protected from being overwritten by a WordPress core update.