How to Add Numbers to Your WordPress Comments Layout

Earlier on WPBeginner, we confirmed you the way to taste your WordPress feedback and the remark shape. In this text, we can display you the way to additional customise the remark structure through including numbers to your WordPress feedback.

Final effects:

Adding Comment Numbering in WordPress

First factor you wish to have to do is set up and turn on Greg’s Threaded Comment numbering plugin. After activating the plugin, pass to Settings » Threaded Comment Numbering. Under the Styling Comment Numbers phase, make a choice the choice: No – I will be able to supply my very own quantity styling. Below that there’s an alternative choice to Strip the Comment Number Wrapper. Select No on that choice as neatly and save settings.

Configuring threaded comment numbering plugin

Since we aren’t the use of the plugin’s stylesheet, we’d like to outline kinds in our personal stylesheet. We additionally configured the plugin to wrap remark numbers in a <div elegance="commentnumber"&> wrapper, so we will taste the quantity the use of the .commentnumber elegance. To upload customized kinds, pass to Appearance » Editor and upload the next code on the backside of your theme’s taste.css document:

.commentlist li .commentnumber {
padding:0 .5em .5em 0;

.commentlist li li .commentnumber {

.commentlist li li li .commentnumber {
font-size:1.three em;

The plugin we’re the use of makes use of a callback inside of wp_list_comments() serve as. You can simply edit your theme’s feedback.php template and exchange the prevailing wp_list_comments with the only equipped through the plugin:

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

For maximum other people this must paintings. However for a few of you it’ll finally end up taking a look messy in the beginning. You would want to take a couple of additional steps to repair that. Start out through discovering which callback serve as your theme is the use of for the feedback, after which upload the plugin’s callback inside of that serve as.

To in finding out which serve as your theme is the use of as callback, all you may have to do is search for wp_list_comments serve as in feedback.php template. For instance, within the default WordPress TwentyTwelve theme you could see this:

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

twentytwelve_comment is the callback serve as you had been searching for. Now you wish to have to pass to your theme’s purposes.php document and search for the remark callback serve as. Once you in finding it, you’re going to want to alter this serve as and upload threaded remark numbering to it simply ahead of the creator title.

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

Save your adjustments and test your feedback. Your feedback must now have numbers at the proper, like this:

Comments with numbers in WordPress

We hope this text helped you upload numbers to your WordPress feedback structure. Would you upload numbers to your feedback? Let us know through leaving a remark underneath.

Recent Articles

The New Apple Music Features to Definitely Try in 2021

Apple Music is a nice app but it is not the most loved app, even among Apple users. The wide range of...

Best Free News Apps for iPhone and iPad in 2021

The year isn’t going as we expected, we are still living through a pandemic and all the problems of the world didn’t...

Best Apps to Hide Pictures & Videos on Your Phone

Privacy is important in everyone’s life, the intensity might change but no one wants to share everything with the world. Even the...

5 Best Health Apps for a Healthy Lifestyle for Everyone in 2021

Times have changed, but the only thing that has remained constant is the need for a healthy lifestyle. Various factors contribute to...

The Most Exciting Features of Apple iOS 14.5 for iPhone and iPad

The Most Exciting Features of Apple iOS 14.5  Apple tries to bring something new and better with every iOS...

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here