Feb
22
2009

How to Add Numbers to Your Comments in WordPress

by   |  Posted in Tutorials  |  17 comments

commentnumI 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.

About the author:

A freelance web developer living in Montreal who spends most of his time writing for this site and building Premium themes for WordPress. You can find him on Twitter @bavotasan.

Site5 Affiliate Link
If you liked this, please share it.

Tags: , , , , , , , , , , , , , ,

Short URL: http://bit.ly/bPY4Hg

Discussion 17 Comments

  1. Jack on March 4, 2009 at 9:59 pm

    Two issues please, but first: thank you vey much for Magazine Basic theme. Is is a fantastic theme).

    The issues:

    1-I am using Magazine Basic theme . The comments does not show its number.

    at comments.php (at Magazine Basica theme ) I could not find this any similar lines as you show above.

    2-at any comment, there is no “reply” written, instead there is a gray botton ( that became red on roll over ).

    How can I solve these two issues?

    Thanks in advance.

    • c.bavota on March 4, 2009 at 11:17 pm

      Hey Jack,

      1. I am adding comment numbers to the next version of the theme. Should be done shortly.

      2. You need to turn on nested comments in your admin. Go to Settings => Discussion and check the appropriate box. That should turn on the reply button.

    • Jack on March 5, 2009 at 4:42 am

      c.bavota,

      1-Ok, I will wait for the new version.

      2-I nested comments. Now it is perfect.

      Once again, thanks a lot, you theme is very good.

  2. Jack on March 5, 2009 at 4:45 am

    Hey, c. bavota:

    I have put some ads from AdSense at the side bar 2 ( right ). It is perfect.

    I would like to put some ads from Adsense at the begin or at the end of each post. What do you suggest?
    A plugin or what? And if it is a plugin, what plugin?

    I am sorry to bother you, but there are hundreds of plugins for add AdSense.

    Thanks

  3. c.bavota on March 5, 2009 at 3:40 pm

    NOTE: This only works for numbering comments on WordPress version 2.6.x. Check out my post “How to Add Nested Comments to Your WordPress Theme” to see how to add numbers to comments in WordPress 2.7.

  4. s?ºr?ºc?º kursu on May 19, 2009 at 2:41 pm

    Hey, c. bavota:

    I have put some ads from AdSense at the side bar 2 ( right ). It is perfect.

    I would like to put some ads from Adsense at the begin or at the end of each post. What do you suggest?
    A plugin or what? And if it is a plugin, what plugin?

    I am sorry to bother you, but there are hundreds of plugins for add AdSense.

    Thankshttp://www.surucu-kurslari.com

  5. ankara nakliyat on May 19, 2009 at 2:43 pm

    thank you

  6. Vidanj??r on March 8, 2010 at 5:27 pm

    thank you admin :)

  7. Flora on March 19, 2010 at 10:15 pm

    Thank you so much!! Although I forget to print the i at the first time. That is really helpful for my long comment list! I was seeking this plug-in only for a week. That is easy to just put i inside of comment.php!

    Thanks again!

  8. siminica on June 11, 2010 at 3:02 am

    Hey, c. bavota:

    Do you know How to Add Numbers to my posts in WordPress ?
    My wordpress theme is a list of post and Y want to display for each post the number.
    1. post1
    2. post2
    ……..
    etc

  9. Ileane on July 21, 2010 at 8:30 pm

    Hi, Thanks for the Magazine Theme. Did you add the comment count to the latest version of the theme that WP 3.0 compatible? I don’t see an option anywhere.

    • c.bavota on July 22, 2010 at 9:18 am

      Not yet. Hopefully in the next version.

  10. Steve on December 22, 2010 at 10:50 pm

    Thank you, this post has saved me a bundle of work!

  11. NguyenKhoa on January 6, 2011 at 2:46 am

    Hi bavota.
    Help me with twenty ten theme.
    Thanks!

    • c.bavota on January 6, 2011 at 11:03 am

      You should probably post questions about TwentyTen on the WordPress forum.