{"id":111599,"date":"2020-10-28T17:30:19","date_gmt":"2020-10-28T22:30:19","guid":{"rendered":"https:\/\/wpengine.com\/?post_type=resource&p=111599"},"modified":"2023-10-27T10:25:47","modified_gmt":"2023-10-27T15:25:47","slug":"paginate-wordpress","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/paginate-wordpress\/","title":{"rendered":"How to Paginate Comments in WordPress"},"content":{"rendered":"\n

Few things can kill a website quite like poor loading times. As many as 10 percent of website visitors<\/a> will leave if a page takes longer than two seconds to load, and as performance slows down, that number rises dramatically. <\/p>\n\n\n\n

Paginating your WordPress pages is one possible solution. Pagination is, simply put, breaking content up into separate pages. This helps alleviate two key issues: slow page loads and difficult-to-read content.<\/p>\n\n\n\n

In this article, we\u2019ll explain why paginating WordPress posts and comments can be beneficial. Then we\u2019ll show you exactly how to do it. Finally, we\u2019ll go over some popular WordPress plugins to extend the platform’s default functionality. Let\u2019s jump in!<\/p>\n\n\n\n

Why Paginate Posts and Comments?<\/h2>\n\n\n\n

Most of the reasons to paginate WordPress posts and comments fall under one of two categories: page speed and user experience. <\/p>\n\n\n\n

Posts that are exceptionally long or contain a lot of high-resolution images can take longer to load. A large number of comments can have a similar effect. Since page speed is an important factor in SEO, you\u2019ll want to minimize it as much as possible. Pagination can help you do this, by moving excess content to separate pages.<\/p>\n\n\n\n

Page speed is also an important part of the user experience on your website. Long content can be harder to consume, particularly on mobile devices. Pagination can help break up long posts<\/a> into easily-digestible chunks for readers, and also makes it easier for users to jump to the parts of each post that they\u2019re most interested in.<\/p>\n\n\n\n

How to Paginate Posts<\/h2>\n\n\n\n

Paginating posts in WordPress is relatively simple. There\u2019s no button in the editor to break a post into pages, but the task can be accomplished quickly by adding a simple bit of code with the HTML editor. You can then adjust the style of the pagination using CSS.<\/p>\n\n\n\n

Step 1: Navigate to the HTML Editor<\/h3>\n\n\n\n

First, open up the post you want to paginate in the WordPress editor. Then switch over to the HTML view. If you\u2019re using the Block Editor, click the three dots in the upper-right corner and select Code editor<\/em> from the drop-down menu<\/a>:<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

If you\u2019re editing the post in the Classic Editor, simply click on the Text<\/em> option on the upper-right corner of the editing area:<\/p>\n\n\n\n

\"How<\/figure>\n\n\n\n

This option lets you directly edit the HTML code of your post.<\/p>\n\n\n\n

Step 2: Add the <!–nextpage–> Code<\/h3>\n\n\n\n

Once you\u2019re in the HTML editor, all you have to do is add the <!–nextpage–> code at the point you want to break the post into pages. <\/p>\n\n\n\n

Here\u2019s what that looks like in the code editor:<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

On the front end, here\u2019s how our post appeared before adding the code:<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

After being paginated, our page looked like this:<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

If you want to add additional pages, just insert the code at each location.<\/p>\n\n\n\n

At that point, you\u2019re done \u2013 your post has been successfully paginated. However, there\u2019s one more optional step you might want to consider.<\/p>\n\n\n\n

Step 3: Style Pagination<\/h3>\n\n\n\n

Your theme most likely comes with styles for paginated navigation. If you want to adjust a default style (for example, to add some animations or a different color scheme) you can do that using custom CSS.<\/p>\n\n\n\n

CSS can be added using the WordPress Customizer. Head to your WordPress dashboard and navigate to Appearance > Customize. <\/em>Then click on the Additional CSS <\/em>button in the sidebar:<\/p>\n\n\n\n

\"How<\/figure>\n\n\n\n

There\u2019s a lot you can do with CSS to customize the page navigation. For some examples, check out the W3Schools CSS tutorial<\/a> and the WordPress Codex<\/a>.<\/p>\n\n\n\n

How to Paginate Comments<\/h2>\n\n\n\n

Paginating comments works the same way it does with posts, although the method used to add the pagination is a little different. However, it does have the advantage of being more configurable by default.<\/p>\n\n\n\n

Step 1: Navigate to Discussions<\/h3>\n\n\n\n

To add pagination to your WordPress site\u2019s comments sections, head to your dashboard and navigate to Settings > Discussion:<\/em><\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

This page handles settings for comments across your entire website.<\/p>\n\n\n\n

Step 2: Select Break Comments<\/h3>\n\n\n\n

The Discussion<\/em> settings page lets you adjust a variety of options related to comments and conversations on your site. When it comes to pagination, there\u2019s one setting in particular you\u2019ll want to note. The line in question starts with \u201cBreak comments\u201d:<\/p>\n\n\n\n

\"How<\/figure>\n\n\n\n

This setting does exactly what it says: breaks comments into multiple pages based on the criteria you set. Here\u2019s what your comments section might look like before enabling this setting:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Then, here\u2019s what it would look like after breaking up comments and setting the maximum comments per page to two:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Two comments per page is probably too few for a real website, but our example showcases how much more readable this setting can make your pages. It should also result in them loading much faster<\/a>, especially if you have hundreds of comments on each post.<\/p>\n\n\n\n

Step 3: Adjust Pagination Settings<\/h3>\n\n\n\n

There are several other settings you can adjust to customize the behavior of your WordPress comment pagination. These include:<\/p>\n\n\n\n