How To Add WordPress Comment Pagination Without a Plugin

In this tutorial, I will show you how to add and style Paged Comments to your WordPress Blog without a plugin. For a WordPress blog, comment pagination is used to display a limited number of comments per page. Instead of using the default « Older Comments or Newer Comments » links, paginating comments display a full list of comment pages using numeric indexes. This allows users to navigate much easier and deeper into the comments section.

There are lots of benefits for paginating comments: It enhances the SEO value of your blog by providing more links to your content. It enhances users´ experience by allowing them to browse Comments section quickly and easily. It allows users to select which comment page to visit instead of clicking trough every single page using the “next/previous” comment links. It also decreases the Webpage loading time, especially if you get lots of comments on your blog.

Since version 2.7, WordPress has built-in support for paged comments. However, you will not be able to make use of this Enhanced Comment feature unless you activate it in the dashboard. Instead of having your visitors click on Previous or Next Comment links, you can display a more elegant numbered list of comment pages.

Default WordPress Comment Navigation

If you have plenty of comments in your WordPress blog, and depending on your settings in your WordPress dashboard, you probably have at the bottom of your Comment section « Older Comments and/or Newer Comments » links.

The following picture shows the default WordPress Comment Navigation:

Default WordPress Comment Navigation.

Many people, including myself, are not satisfied with just using the default WordPress Comment navigation. It looks ugly and most importantly is not practical and not user friendly. I want a nicer and more useful numbered comment pagination. This is where this tutorial helps.

Custom WordPress Comment Pagination | Final Result

The Image 1 below shows several examples of the custom Numbered Comment Pagination generated for this blog. Image 1 below shows how the Comment section looks like after implementing CODE-2 AND styling it with CODE-2A discussed below.

Image1 - Miscellaneous examples of numbered Comment pagination for this blog.

What about a plugin?

Yes, there are plugins that add Comment pagination to your blog. But I encourage you to read my previous article about unnecessarily adding plugins to your theme. Also you don´t need a plugin for such a simple task, since there is already a WordPress built-in function to do that.

How To Add (and Style) WordPress Comment Pagination

Here are the 6 steps required to check for and create Paged Comments for your WordPress blog.

Step 1. Login to your WordPress dashboard. On the Left Panel of your Administration Screens, go to Settings -> Discussion as shown and explained in the image below. Check “Break comments into pages with …”, and choose the other settings as explained in the image.

Setting the Comments Pagination in WordPress dashboard.

Step 2. After you Checked the “Break comments into pages with…”, select a post that you have a lot of comments (more than what you chose for top level comments).
Are your comments displaying in a numbered paginated format? (Something Similar to Image 1?)

  1. If your answer is YES: Then STOP RIGHT HERE. Your theme already natively supports Numbered Comment Pagination, and all you had to do is to Enable the “Break comments into pages…” feature in the dashboard. However, if you don´t like how your paged comments are styled you might want to check my CSS code (CODE-2A).
  2. If your answer is NO: Then proceed to Step 3.

Step 3. Locate your WordPress theme folder and make a Backup copy of the comments.php and style.css files. The backups are your insurance policy in case you want to revert back.

Step 4. Go to your theme´s folder and open comments.php with your preferred editor. In your comments.php file, Locate CODE-1 below, or something similar. If your theme is using the previous_comments_link() and next_comments_link() functions, you want to replace them with the comment pagination code shown later (CODE-2).

CODE-1 :: Default Comment Navigation

<div class="navigation">
	<div class="alignleft"><?php previous_comments_link(); ?></div>
	<div class="alignright"><?php next_comments_link(); ?></div>   
</div>

CODE-1 Notes:

In some themes, the code block above shows up at 2 places in the comments.php file, at the top of the comment section and at the bottom. Make sure you replace them both with CODE-2 below.

Step 5. Delete CODE-1 from your comments.php file and replace it with the following CODE-2 below. Don´t worry, you already created a backup copy of your original comments.php file. Right?

CODE-2 :: Custom (Numbered) Comment Pagination

<div class="paginate-com">
	<?php 
    //Create pagination links for the comments on the current post.
    paginate_comments_links();
    ?> 
</div>

CODE-2 Notes:

The only function you need to display numbered comment pagination is paginate_comments_links() on Line 4 of the code. This function displays a full list of comment pages using numeric indexes. This is already a built-in template tag available since WordPress 2.7.

CODE-2 works on WordPress 2.7 and above. But I hope that you will upgrade to the latest WordPress version.

Notice that I renamed the “navigation” class on line 1 of CODE-1, so that I can style the Comment pagination separately in case the “navigation” class is also used to style other sections of the theme.

Of course, don´t forget to save your modified comments.php file and upload it to your server. This is always a given step that I usually don´t mention.

By default the Previous/Next links show up as “« Previous” and “Next »” with the double arrow heads. If you want to use single arrow heads, use the following code:

<div class="paginate-com">
<?php 
//Create pagination links for the comments on the current post, with single arrow heads for previous/next
paginate_comments_links( array('prev_text' => '&lsaquo; Previous', 'next_text' => 'Next &rsaquo;')); 
?>
</div>

Styling the Comment Pagination | style.css

Finally we need to style the Numbered Comment Pagination Code (CODE-2) (This is Step 6, if you like). We need to style the code with CSS. The code should be added to your theme´s CSS file (called style.css).

CODE-2A :: Styling Comment Pagination

Note: To scroll within the code: You can also click on the code window and use your keyboard´s arrow keys.

/************************************************************
* @Author: Boutros AbiChedid 
* @Date:   December 15, 2011
* @Website: blueoliveonline.com ; bacsoftwareconsulting.com
* @Description: Styling Custom Numbered Comment Pagination.
* @Tested on: IE7/IE8/IE9, Safari 5 (for windows), 
* Google Chrome 15, Opera 11.5 and Mozilla Firefox 8
*************************************************************/ 
.paginate-com {
margin: 10px 0 20px 0;
padding: 5px 1px 5px;
text-align: center;
}	
.paginate-com a {
padding: 3px 6px 4px 6px; 
margin: 3px;
text-decoration: none;
border: 1px solid #ccc;
color: #666;
background-color: inherit;	
}
.paginate-com a:hover {	
border: 1px solid #444;
color: #444;
background-color: #eee;
}
.paginate-com .current {
padding: 3px 6px 4px 6px; 
margin: 3px;
font-weight:bold;
border: 1px solid #666;
color: #444;
background-color: #eee;
}

CODE-2A Notes:

If you have good knowledge with CSS, feel free to modify CODE-2A to fit the design of your blog. I tried to keep the styling neutral so that you have less tweaking to do.

CODE-2A is CSS valid.

CODE-2A is tested to display properly with all major browsers. IE7/IE8/IE9, Safari 5 (for Windows), Google Chrome 15, Opera 11.5 and Mozilla Firefox 8. The code was NOT tested for IE6 (and I don´t care if it does not work).

Both CODE-2 AND CODE-2A work together (as a team). If you modify the “div” class in CODE-2, make sure that styling is also modified.

If you used my a previous tutorial: How To Add Custom WordPress Pagination Without a Plugin, then you can reuse the same CSS code for both custom page navigation AND comment pagination. You can reuse the same CSS code.

The paginate_comments_links() function prints several CSS classes for further styling, which are: .page-numbers, .current, .next, .prev, dots, as shown from this sample HTML output:

Example HTML Output | Source Code

<div class="com-paginate">
<a class="prev page-numbers" href="http://.../comment-page-6/#comments">« Previous</a>
<a class="page-numbers" href="http://.../comment-page-1/#comments">1</a>
<span class="page-numbers dots">&#8230;</span>
<a class="page-numbers" href="http://.../comment-page-6/#comments">6</a>
<span class="page-numbers current">7</span>
<a class="next page-numbers" href="http://.../comment-page-8/#comments">Next »</a>
</div>

Conclusion

In this tutorial, I showed you how to activate and create a Custom Numbered Comment Pagination that can be used on your WordPress Blog, which is nicer, more user friendly, and has better SEO advantage than the default comment navigation.

Your Turn to Talk

How easy did you find this tutorial to implement? Do you have something to add or anything else to say? If so, please share your opinion or questions in the comments section. Your opinion matters, unless it is a Spam.

If you found this post useful, please consider: linking back to it, subscribing by email to future posts, or subscribing to the RSS feed to have new articles delivered to your feed reader, or feel free to donate. Thanks!

About the Author |
Boutros is a professional freelance Web designer, Web developer, Software Engineer, and Blogger. He is the Chief developer at Blue Olive Online. He strives for pixel perfect design, clean robust code, and user-friendly interface. If you have a project in mind and like his work, feel free to contact him. Connect with Boutros on StumbleUpon, Twitter, and LinkedIn.
Visit Boutros AbiChedid Website.

23 Responses to “How To Add WordPress Comment Pagination Without a Plugin”

  1. Dan says:

    Only one thing bothers me maybe you can give me a hint or something. I don’t like the fact that after the page breaks it only shows one comment on the current page. Is there to have all comments and after a comment is submitted the comment at the bottom to move to the next page? not all of them ? Thanks for the tutorial!

  2. Ray says:

    Your tutorial has just saved my a$$!!

    I want to move my selling thread (vBulletin) into a WP blog because the admin is keep banning people, and two things I require is comment pagination and comment quote!! Now 50% of my problem is solved… yipeeee!!!

  3. Rob Fillamin says:

    I’ve always had issues regarding how to add and style WordPress considering how some plugins are just not worth it.
    This post is very helpful.

  4. Bruno says:

    Nice tutorial!
    I ask this: Is it possible to have latest comment in page 1 instead of the last page number ( in your site is page comment 2 ).

    • I have 4 different themes for my blog. So which theme you are talking about? The “Change Theme” is in the sidebar.
      Not sure what your asking?
      Question: Is it possible to start with the oldest comment first?
      Answer: Yes it is possible.
      Thanks.

  5. tuzka says:

    Really usefull tutorial. Great post! Thanks