NOTE: IF YOUR COMMENTS.PHP ALREADY CONTAINS “WP_LIST_COMMENTS” ALL YOU LIKELY NEED TO NUMBER AND PAGE YOUR COMMENTS ARE THE PLUGINS LISTED AT THE END OF THIS POST. FOLLOW THE PLUGIN DIRECTIONS FOR INSTALLATION
A few months ago, a new major version of WordPress, the blogging platform was released. This new version, 2.7 has some great features built into it including paged and threaded comments. I run a lot of giveaways on my blog and have hundreds and even thousands of comments on some of my posts. In the past, it would take a long time to load the post running the contest and I am sure would cause people to not bother to wait for the page to load and just leave.
There are plugins available to allow you to page the comments but they have limitations in that you couldn’t number the comments if they were paged, and for me, when pulling a random number to determine the winner of a contest, I do NOT want to have to count potentially thousands of entries to locate the winner. With the new WordPress 2.7 and the utilization of a new plugin you can have the best of both worlds, but you have to be prepared to do a little bit of editing of your comments.php file to make it work.
Most themes that were not created specifically for WordPress 2.7 cannot naturally use the paged comments feature. We have to make some modifications. They are not major and as long as you make a backup copy of your files before attempting the editing, you can always restore the backup if you mess things up too badly.
If you are not familiar with how to FTP files to your WordPress site, this tutorial may be too much for you, but if you are, I think the code editing is minor enough that even those inexperienced with it may be able to fumble your way through it. You can edit your comments.php file through the WordPress dashboard (make sure you copy it to your local computer first though in case you mess it up – that’s why I recommend using editing software) but there is a step at the end for editing the style sheet of a plugin that can’t be done through the dashboard.
GET AN HTML EDITOR TO EDIT YOUR FILES
The first thing you need is a program to edit your comments.php file and this can be done in any of the numerous free HTML editors. I like Alleycode and PSPad.
MODIFY A SECTION OF YOUR COMMENTS.PHP
Next you need to download a copy of your comments.php file from your current theme on your WordPress blog. I recommend saving a copy of it as something like “commentsGOOD.php” and putting it somewhere safe just in case you need to restore it.
Below is a copy of what your comments.php may look like. Some items may be different but the important part is the code between the ordered list immediately following the “if comments”.
The part of the code that you will be replacing is after this bit of code (note that if your (ol) does not have class=”commentlist” after it, you MUST add it so it reads like mine below):
[cc]
comment_status) : ?>
[/cc]
You will need to select and delete everything in between those 2 sections of code. Those 2 sections must remain including the (ol) and (/ol). Those designate an ordered list and your comments will not format correctly without them.
Then, you need to add in this simple line of code:
[cc]
[/cc]
Yes, that simple bit replaces that big long drawn out code. Now, your ordered list (ol) may not have a class assigned to it so you must add it if it doesn’t. It should just read as mine does above with the “commentlist” class.
ADD A LINE TO YOUR COMMENTS.PHP
Next, you need to add a line of code below this:
[cc]
[/cc]
and before this:
[cc]
comment_status) : ?>
[/cc]
Find that section and add the following line of code between it:
[cc]
[/cc]
TURN ON PAGED COMMENTS IN YOUR WORDPRESS DASHBOARD
Now you should be able to activate your WordPress paged comments feature. You can go to “settings” then “discussion” in your WordPress dashboard to turn on the paged comments. Just click the box in front of “break comments into pages” and select the number of comments per page.
You should then be able to see your paged comments on your site. But you will notice 2 things, they are not numbered and the navigation between the comments pages is messy and it actually ends up duplicating content (from an SEO perspective) so we need to install 2 plugins to solve these issues.
INSTALL AND ACTIVATE 2 PLUGINS
The 2 plugins you need (both are found in the WordPress plugins repository and can be installed directly from your dashboard) are:
Greg’s Threaded Comment Numbering
and
WP-CommentNavi
We’ve already installed the coded needed for those plugins to work so once you activate them your comments should now be paged and numbered and below them you will see a nice looking navigation menu to scroll through the pages of your comments.
To see it at work, check out one of our contest posts with over 2,000 comments: (4/3) Keurig Platinum Brewer review & GIVEAWAY.
MODIFY PLUGIN STYLE SHEETS
Now, there are some styling issues that you will see on your site after setting this up that you will probably want to fix. If you are comfortable editing a style sheet, it should be no big deal.
Each of the plugins you installed has a style sheet where you can edit how things look.
For Greg’s Threaded Comment Numbering the style sheet is called: gtcn-css.css which can be found in your plugin directory. This will pretty much affect the numbering size, color and location.
Here is what mine looks like:
[cc]
.commentlist {
background: #f6efe5;
}
.commentlist li .commentnumber {
float: right;
color:#999999;
font-size:1em;
margin-top:15px;
padding:0 .5em .5em 5px;
clear:right;
}
.commentlist li li .commentnumber {
font-size:1em;
}
.commentlist li li li .commentnumber {
font-size:1 em;
}
[/cc]
For Wp-CommentNavi the style sheet is called: commentnavi-css.css which can be found in your plugin directory. You will just need to tinker with the colors to get it to match with your theme if you do not like the default colors.
That’s it! I know it looks long and complicated but it really is not. Replace 1 section of code, add a new section, activate 2 plugins, and then style the numbers the way you want them.
IN SUMMARY
*You need FTP access and an HTML editor
*Modify a section of your comments.php
*Make sure your ordered list (ol) class is “commentlist”
*Add a line to your comments.php
*Turn on paged comments in WordPress dashboard
*Install and activate 2 plugins
*Modify plugin style sheets
Please make sure to let me know if you find any problems with these instructions and whether or not they worked for you!
note: additional information for migrating WordPress plugins and themes over to 2.7 can be found in the WordPress codex.
UPDATE
If you are interested in altering the style of the comments after adding the numbers, you will need to modify your theme’s style.css and add an (ol) class if it doesn’t exist in your theme. It will take some trial and error to get it to display correctly. I am going to show you what I added to my style.css to get my comments to look the way they do, but keep in mind I also have the threaded comments set up where you can reply to other comments right below the original, so I may have extra stuff that you don’t need. You can just remove the lines you don’t want and then edit the rest.
This is the section I added to my style.css to make my comments look the way they do:
[cc]
ol.commentlist { list-style:none; margin:0; padding:0; text-indent:0; }
ol.commentlist li { border:1px solid #ded5c9; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; height:1%; margin:0 0 10px; padding:5px 7px 5px 57px; position:relative; }
ol.commentlist li.alt { }
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment { }
ol.commentlist li div.comment-author { padding:0 170px 0 0; }
ol.commentlist li div.vcard { font:bold 14px/1.4 helvetica,arial,sans-serif; }
ol.commentlist li div.vcard cite.fn { font-style:normal; }
ol.commentlist li div.vcard cite.fn a.url { color:#c00; text-decoration:none; }
ol.commentlist li div.vcard cite.fn a.url:hover { color:#000; }
ol.commentlist li div.vcard img.avatar { background:#ffffff; padding: 4px; border:0px solid #ffffff; left:7px; position:absolute; top:7px; }
ol.commentlist li div.vcard img.avatar-32 {}
ol.commentlist li div.vcard img.photo {}
ol.commentlist li div.vcard span.says {}
ol.commentlist li div.commentmetadata {}
ol.commentlist li div.comment-meta { font:bold 10px/1.4 helvetica,arial,sans-serif; position:absolute; right:10px; text-align:right; top:5px; }
ol.commentlist li div.comment-meta a { color:#333; text-decoration:none; }
ol.commentlist li div.comment-meta a:hover { color:#000; }
ol.commentlist li p { font:normal 12px/1.4 helvetica,arial,sans-serif; margin:0 0 1em; }
ol.commentlist li ul { font:normal 12px/1.4 helvetica,arial,sans-serif; list-style:square; margin:0 0 1em; padding:0; text-indent:0; }
ol.commentlist li div.reply { background:#771e1a; border:1px solid #ded5c9; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; color:#fff; font:bold 9px/1 helvetica,arial,sans-serif; padding:5px 10px; text-align:center; width:36px; }
ol.commentlist li div.reply:hover { background:#c30; border:1px solid #c00; }
ol.commentlist li div.reply a { color:#fff; text-decoration:none; text-transform:uppercase; }
ol.commentlist li ul.children { list-style:none; margin:1em 0 0; text-indent:0; }
ol.commentlist li ul.children li { }
ol.commentlist li ul.children li.alt {}
ol.commentlist li ul.children li.bypostauthor {}
ol.commentlist li ul.children li.byuser {}
ol.commentlist li ul.children li.comment {}
ol.commentlist li ul.children li.comment-author-admin {}
ol.commentlist li ul.children li.depth-2 { margin:0 0 .25em; }
ol.commentlist li ul.children li.depth-3 { margin:0 0 .25em; }
ol.commentlist li ul.children li.depth-4 { margin:0 0 .25em; }
ol.commentlist li ul.children li.depth-5 {}
ol.commentlist li ul.children li.odd {}
ol.commentlist li.even { background:#ebe1d2; }
ol.commentlist li.odd { background:#ebe1d2; }
ol.commentlist li.parent { }
ol.commentlist li.pingback { }
ol.commentlist li.pingback.parent { }
ol.commentlist li.pingback div.vcard { padding:0 170px 0 0; }
ol.commentlist li.thread-alt { }
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}
[/cc]
I obviously have some lines in there that I am not even using, but that pretty much encompasses all the style properties you will ever want to style your comments. Remember earlier how I said you need to add the “commentlist” class to your (ol) in order to make it work? Well now we are defining that class even further here in our style sheet.
If your theme uses an unordered list (ul) instead of an ordered list (ol), I would think that all you need to do is change those (ol) marks in the style sheet to (ul) to make it work. In theory.
I’m not a professional at this stuff, so please let me know if you encountered anything different and if I can help or if you just want to leave a comment that may help someone else.
UPDATED 3-7-2010
If hitting reply on your comments causes the screen to jump DOWN to the bottom of the comments for you to leave your reply you need to add a piece of code to your header.php immediately above the wp_head call.
[cc]if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ );[/cc]
This is really only a visual fix, the reply should still appear in the correct location regardless, but it is nice to be able to see the original comment you are replying to as you type. This should correct that.
About Kim
spatter 
and before this bit of code:
[cc]