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:
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.
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.
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?)
- 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).
- 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
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
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:
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.
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
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.