How to Add Numbers to Your Comments in WordPress

I have been receiving a large amount of comments on my Magazine Basic theme and I was having a bit of trouble referencing certain ones, so I decided to add some numbers to the side of each comments to make it easier. It was actually a simple thing to do so here is a quick tutorial. I use the classic theme that comes pre-installed on WordPress for the example.

Open comments.php and find this the lines that look similar to this:

<ol id="commentlist">
<?php foreach ($comments as $comment) : ?>
<li <?php comment_class(); ?> id="comment-<?php comment_ID() ?>">
<?php echo get_avatar( $comment, 32 ); ?>
<?php comment_text() ?>
<p><cite><?php comment_type(_c('Comment|noun'), __('Trackback'), __('Pingback')); ?> <?php _e('by'); ?> <?php comment_author_link() ?> &#8212; <?php comment_date() ?> @ <a href="#comment-<?php comment_ID() ?>"><?php comment_time() ?></a></cite> <?php edit_comment_link(__("Edit This"), ' |'); ?></p>
</li>
<?php endforeach; ?>
</ol>

Now all you need to do is change it to this:

<ol id="commentlist">
<?php $i = 1; ?>
<?php foreach ($comments as $comment) : ?>
<li <?php comment_class(); ?> id="comment-<?php comment_ID() ?>">
<?php echo get_avatar( $comment, 32 ); ?>
<?php comment_text() ?>
<p><cite><?php comment_type(_c('Comment|noun'), __('Trackback'), __('Pingback')); ?> <?php _e('by'); ?> <?php comment_author_link() ?> &#8212; <?php comment_date() ?> @ <a href="#comment-<?php comment_ID() ?>"><?php comment_time() ?></a></cite> <?php edit_comment_link(__("Edit This"), ' |'); ?></p>
<div class="commentnumber"><?php echo $i; ?></div>
</li>
<?php $i++; ?>
<?php endforeach; ?>

After that, open up your style.css and add something like this:

.commentnumber {
position: absolute;
right: 5px;
top: 5px;
font-size: 18px;
color: #efefef;
}

.commentlist li {
position: relative;
}

And that should do it.