How to customize the comments template or wp_list_comments()

In single.php file we have function to add comments functionality. Here in this article I will give the code for customize the comments template.

From wordpress 2.7 version we got the functionality of changing or customizing the comments template as per your theme. As we all know in single.php file we called following function to add comments functionality. wordpress comments is very important functionality. Here in this article I will give the code for customize the comment template.

customize the comments template

<?php comments_template(); ?>

This function basically calls the comments.php file and add the data from wordpress database.

If we check the comments.php file. Usually we are having following content in comments.php file

[viral-lock message=”Solution code is Hidden! It’s Visible for Users who Liked/Shared This article on Facebook or Twitter or Google+. Like or Tweet this article to reveal the content.”]

<?php

// Do not delete these lines
 if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
 die ('Please do not load this page directly. Thanks!');

 if ( post_password_required() ) { ?>
 <p>This post is password protected. Enter the password to view comments.</p>
 <?php
 return;
 }
?>

<!-- You can start editing here. -->
<div id="comment">
<?php if ( have_comments() ) : ?>
 <h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to “<?php the_title(); ?>”</h3>

 <div>
<div><?php paginate_comments_links(); ?></div>
 </div>

 <ol>
 <?php wp_list_comments('callback=wordpressapi_comments'); ?>

 </ol>

 <div>
<div><?php paginate_comments_links(); ?></div>
 </div>
 <?php else : // this is displayed if there are no comments so far ?>

 <?php if ('open' == $post->comment_status) : ?>
 <!-- If comments are open, but there are no comments. -->

 <?php else : // comments are closed ?>
 <!-- If comments are closed. -->
 <p>Comments are closed.</p>

 <?php endif; ?>
<?php endif; ?>

<?php if ('open' == $post->comment_status) : ?>

<div id="respond">

<h3><?php comment_form_title( 'Leave a Reply', 'Leave a Reply to %s' ); ?></h3>

<div>
 <small><?php cancel_comment_reply_link(); ?></small>
</div>

<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p>
<?php else : ?>

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">

<?php if ( $user_ID ) : ?>

<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Log out &raquo;</a></p>

<?php else : ?>

<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>

<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>

<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
<label for="url"><small>Website</small></label></p>

<?php endif; ?>

<!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>-->

<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>

<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<?php comment_id_fields(); ?>
</p>
<?php do_action('comment_form', $post->ID); ?>

</form>

<?php endif; // If registration required and not logged in ?>
</div>

<?php endif; // if you delete this the sky will fall on your head ?>
</div>

In the comments loop for showing the comments we used the wp_list_comments() function. Use this for customize the comments template.

We can customize this function as per our requirement. We can pass the following parameters to this function. use following for customize the comments template.

[/viral-lock]

For customize the comments template following parameter is important.

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.

In my theme I used that in following way. I changed and passed parameter in comments.php file.

<?php wp_list_comments('callback=wordpressapi_comments'); ?>

Then Open the functions.php file put following code in that. This code I am using as per wordpress api.

function wordpressapi_comments($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='32',$default='<path_to_url>' ); ?>
 <?php $user_name_str = substr(get_comment_author(),0, 20); ?>
 <?php printf(__('<cite><b>%s</b></cite> <span>says:</span>'), $user_name_str) ?>
 </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(),&nbsp; get_comment_time()) ?></a><?php edit_comment_link(__('(Edit)'),'&nbsp; ','') ?></div>

 <?php comment_text() ?>

 <div>
 <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
 </div>
 </div>
<?php
 }

Many times some people add the full URL of website in the name parameter. That time showing author name of comment writer is looks so ugly. So I used following trick in this function. Using this line of code we can show only 20 characters of author.

<?php $user_name_str = substr(get_comment_author(),0, 20); ?>
 <?php printf(__('<cite><b>%s</b></cite> <span>says:</span>'), $user_name_str) ?>

I changed the this function as per my choose. You can customize this function as per your theme requirement.

If you found any issue in this article “customize the comments template” about this. please write comments.