Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Add Numbers to Your WordPress Comments Layout

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:

Comments with numbers in WordPress

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.

Configuring threaded comment numbering plugin

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 {
padding:0 .5em .5em 0;

.commentlist li li .commentnumber {

.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.

$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:

Comments with numbers in WordPress

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

9 CommentsLeave a Reply

  1. Hello, I have aproblem I don´t find the exactly code that i have to replace in comments php, I,ve found this: “wp_list_comments( array( ‘callback’ => ‘raindrops_comment’ ) );”, Have i to replace this for “”

  2. I’m thinking my theme (Custom Community) does not support callback. It’s not working for me. If you have any other suggestions, I’d love to hear them. Thanks so much.

  3. Your post is really informative. It is great to see a plugin that does the hard work for you. Thanks!

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.