Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Add Numbers to Your WordPress Comments Layout

Last updated on by
Elegant Themes
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 {
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:

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.


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. Davide says:

    Thanks! I don’t know how I did it, but I did it…

  2. Luis says:

    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 “”

    • WPBeginner Support says:

      Luis: yes you need to replace your theme’s comment callback with the one provided by the plugin

      Replace:

      wp_list_comments( array('callback'=>'raindrops_comments')); 
      

      With

      wp_list_comments('callback=gtcn_basic_callback');
      
  3. Kelly Webb says:

    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.

  4. Viel says:

    Woohoo, really useful, thanks.

  5. Jason says:

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

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.