WordPress Comment Numbering

I know many bloggers who host giveaways and other things on their blogs which require them to find the number of specific comments on their posts. Many of the themes created for WordPress blogs don’t have this feature written into the code. As I helped a friend remedy this on her blog yesterday, I realized how necessary it is for a LOT of bloggers. For those who are happy with the “# Comments” which shows the total number of comments you have, that’s great – but for those who need each comment numbered, I figured I would post an entry showing you how.

First of all, you’ll need to find the file named comments.php which you should find in the following location: http://yoursite.com/yourbloglocation/wp-content/themes/nameofyourtheme/comments.php (note – if your blog is in the root directory {meaning www.yoursite.com goes directly to your blog} then it will look more like this: http://yoursite.com/wp-content/themes/nameofyourtheme/comments.php)

After you locate the comments file, find the code that starts the comment section which should be <?php if ( $comments ) : ?> then directly BEFORE that piece of coding (or above it, whatever you wanna do to keep it clean) insert this:

<?php $i = 0; ?>

Then find the following code: <?php foreach ($comments as $comment) : ?> and put this AFTER it (or below it… again, whatever you wanna do to keep it clean):

<?php $i++; ?>

Once all that is in place, put this wherever you want the number to show up (you can replace numbering with whatever you wanna call it – just make sure that you also rename .numbering when you add it to your stylesheet):

<span class="numbering"><?php echo $i; ?></span>

Mine is placed before the author’s site link – <?php comment_author_link() ?> – but it doesn’t really matter since I floated it to the right anyway. So, Voila. You’re done. If you wanna make it pretty, like I have mine (it’s floated to the right with {} around it and it’s larger than the rest of the comments as well as having some padding around it) then you can tweak the code a little. <?php echo $i; ?> is actually what you will SEE on your blog so if you want anything before or after your number, that is where it will go – for example, mine has {#} on my blog so my code is actually like this:

<span class="numbering">{<?php echo $i; ?>}</span>

To control the appearance of the number (as well as what is before or after it) put this in your style sheet under where you see /* Comments*/:

.numbering {
padding: 15px;
float:right;
font-size:24px;
color:#464646;
}

If you want the number to stay where you have it inserted (not float it to the right, or left) then just remove the line where it says float:right; – you can also reduce or enlarge the font, change the color hex code, etc. Most people these days have at least BASIC knowledge of HTML so hex codes and font size shouldn’t be all new even if CSS is. Happy comment numbering to you all! :)

No Comment

You can post first response comment.

Leave A Comment

Please enter your name. Please enter an valid email address. Please enter a message.

Contact Us Today!

Complete the form below to receive a no-obligation quote!


Name (required):
Email (required):
Web Address:
Reason for contact:
Who referred you?
Additional information:

Click here to confirm that you are human :)

Subscribe via Email!

* indicates required
Powered by MailChimp

Connect!