Contact us for a project proposal!

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! :)