How to Add Numbers to Your WordPress Comments Layout

Last updated Jul 10, 2019

Earlier on WPBeginner, we showed you how to style your WordPress comments and the comment form. In this article, we will show you how to further customize the comment layout by adding numbers to your WordPress comments.

Final results:

Adding Comment Numbering in WordPress

First thing you need to do is install and activate Greg’s Threaded Comment numbering plugin. After activating the plugin, go to Settings » Threaded Comment Numbering. Under the Styling Comment Numbers section, select the option: No – I will provide my own number styling. Below that there is another option to Strip the Comment Number Wrapper. Select No on that option as well and save settings.

Since we are not using the plugin’s stylesheet, we need to define styles in our own stylesheet. We also configured the plugin to wrap comment numbers in a <div class="commentnumber"&> wrapper, so we can style the number using the .commentnumber class. To add custom styles, go to Appearance » Editor and add the following code at the bottom of your theme’s style.css file:

  .commentlist li .commentnumber {  float:right;  color:#999999;  font-size:3em;  margin:0;  padding:0 .5em .5em 0;  clear:right;  }    .commentlist li li .commentnumber {  font-size:1.7em;  }    .commentlist li li li .commentnumber {  font-size:1.3 em;  }

The plugin we are using uses a callback inside wp_list_comments() function. You can just edit your theme’s comments.php template and replace the existing wp_list_comments with the one provided by the plugin:

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

For most folks this should work. However for some of you it may end up looking messy at first. You would need to take a few extra steps to fix that. Start out by finding which callback function your theme is using for the comments, and then add the plugin’s callback inside that function.

To find out which function your theme is using as callback, all you have to do is look for wp_list_comments function in comments.php template. For example, in the default WordPress TwentyTwelve theme you would see this:

  <?php wp_list_comments( array( 'callback' => 'twentytwelve_comment', 'style' => 'ol' ) ); ?>

twentytwelve_comment is the callback function you were looking for. Now you need to go to your theme’s functions.php file and look for the comment callback function. Once you find it, you will need to modify this function and add threaded comment numbering to it just before the author name.

  <?php   $comment_number = gtcn_comment_numbering($comment->comment_ID, $args);   echo $comment_number;  ?>

Save your changes and check your comments. Your comments should now have numbers on the right, like this:

We hope this article helped you add numbers to your WordPress comments layout. Would you add numbers to your comments? Let us know by leaving a comment below.