{"id":46153,"date":"2022-02-17T15:17:10","date_gmt":"2022-02-17T15:17:10","guid":{"rendered":"\/tutorials\/?p=46153"},"modified":"2025-04-28T07:52:25","modified_gmt":"2025-04-28T07:52:25","slug":"wordpress-pagination","status":"publish","type":"post","link":"\/tutorials\/wordpress-pagination","title":{"rendered":"WordPress pagination: how to set up and troubleshoot it"},"content":{"rendered":"

Pagination is a handy WordPress website feature that splits blog posts into separate pages. Instead of visitors having to scroll through all of your posts, they can jump to a specific page and save time.<\/p>

Websites with a large amount of content can benefit from implementing pagination as this feature allows visitors to browse faster, providing for a better reading experience.<\/p>

Additionally, pagination makes your website’s navigation more user-friendly and crawler-friendly since it creates a clear structure within the website. Shorter blog pages also mean faster loading times, promoting a better user experience.<\/p>

This article will show you how to implement WordPress post pagination using two methods ‒ manually and using a pagination plugin. We will also cover the WordPress pagination 404 error and some tips to resolve the issue.<\/p>

Download all-in-one WordPress cheat sheet<\/a><\/p>

\n\n\n\n\n\n

\n

What Is WordPress Pagination?<\/h2>\n

WordPress pagination is a feature that splits the list of blog posts into separate pages. Visitors can use the Next or Previous buttons to navigate between pages or jump to a specific page number.<\/p>\n <\/div>\n\n\n\n<\/p>

How to Add Pagination to WordPress Manually<\/h2>

Users with coding skills can implement pagination in WordPress manually using custom code. In this tutorial, we are using the Twenty Twenty<\/a> WordPress theme.<\/p>

Feel free to check out the following methods and use the one best suited for your technical skills.<\/p>

1. Adjusting the PHP Code in the functions.php File<\/h3>

WordPress supports the pagination function (posts_nav_link()<\/strong>) that you can insert just before or after the main loop within the index.php<\/strong> file of your theme. Here’s a simplified example of what the code looks like:<\/p>

<?php if ( have_posts() ) : ?>\n\n<!-- Add the pagination functions here. →\n\nposts_nav_link()\n\n<!-- Start of the main loop. -->\n<?php while ( have_posts() ) : the_post();  ?>\n\n<!-- the rest of your theme's main loop -->\n\n<?php endwhile; ?>\n<!-- End of the main loop -->\n\n<!-- Or add the pagination functions here. -->\n\n<div class=\"nav-previous alignleft\"><?php previous_posts_link( 'Older posts' ); ?><\/div>\n<div class=\"nav-next alignright\"><?php next_posts_link( 'Newer posts' ); ?><\/div>\n\n<?php else : ?>\n<p><?php _e('Sorry, no posts matched your criteria.'); ?><\/p>\n<?php endif; ?><\/pre>
We recommend using a child theme<\/a> to make this modification instead of implementing it directly in the parent theme. A child theme inherits all of its parent theme’s functionality, style, and features, therefore allowing you to keep the changes made after any theme updates.<\/p>
2. Adding CSS Code to Edit the Pagination<\/h3>
Another way to implement pagination is to add HTML<\/a> and CSS<\/a> code to your active theme. Many custom CSS code snippets you can use are available on web development platforms like CodePen<\/a>.<\/p>
The following is a custom pagination function designed by Arefeh Hatami<\/a>. It utilizes HTML and CSS to create a simple page number navigation bar. If you decide to implement this snippet in your WordPress site, feel free to experiment with different styles as needed.<\/p>
\n
\"A<\/a><\/figure><\/div>
3. Managing Content per Page<\/h3>
Unlike the previous methods, this one doesn’t involve coding. Instead, you only need to have access to the WordPress admin dashboard.<\/p>
    \n
  1. Navigate to Settings <\/strong>-> Reading <\/strong>from the WordPress dashboard.<\/li>\n\n\n\n
  2. Edit the Blog pages show at most<\/strong> value.<\/li>\n<\/ol>
    \n
    \"Changing<\/a><\/figure><\/div>
      \n
    1. Click Save Changes<\/strong>.<\/li>\n<\/ol>
      The number of posts shown per page should be adjusted to the site’s total volume of content. For instance, if you have between 50-100 posts, having each page containing five to ten posts would be ideal.<\/p>
      The image below shows you what it looks like if the value is set to “1”. Each page will display one blog post and a pagination navigation bar will appear right before the footer section. This setting is suitable for small websites with a low content volume.<\/p>
      \n
      \"The<\/a><\/figure><\/div>
      How to Add Pagination Using WordPress Gutenberg<\/h2>
      WordPress offers a Pagination <\/strong>option with the Query Loop<\/strong> block. It allows you to add and customize your navigation menu directly from the WordPress Gutenberg editor:<\/p>
      1. Click on the block inserter <\/strong>tool at the top left of the editor and select the Query Loop<\/strong> block.<\/p>
      \n
      \"Adding<\/a><\/figure><\/div>
      2. Pick the Default Posts<\/strong> pattern as it comes with pre-built pagination. Here’s what it looks like:<\/p>
      \n
      \"The<\/a><\/figure><\/div>
      3. If you pick a pattern that doesn’t have pagination, you can add it manually. Click the plus Add Block<\/strong> button at the bottom right of the query loop block and select Pagination<\/strong>.<\/p>
      \n
      \"Adding<\/a><\/figure><\/div>
      4. Use the toolbar to modify the navigation menu’s appearance.<\/p>
      \n
      \"Modifying<\/a><\/figure><\/div>
      Best WordPress Pagination Plugins<\/h2>
      The easiest way to implement pagination is to use a WordPress plugin. Many free and premium pagination plugins are available in the official plugin directory<\/a>. We will cover the three best free ones to choose from.<\/p>
      All these plugins are customizable via your Settings<\/strong> menu upon installation and activation.<\/p>
      1. WP-PageNavi<\/a><\/h3>
      Since WP-PageNavi is one of the most popular free plugins<\/a>, chances are your WordPress theme includes built-in support for it. Otherwise, you will have to manually tweak your theme’s code to make the plugin work ‒ the custom code is provided on the plugin’s official page.<\/p>
      WP-PageNavi provides straightforward settings that even beginners can easily modify. It also allows you to change the labels of the navigation elements and page numbers. Additionally, the plugin lets you switch from the Older posts<\/strong> and Newer posts<\/strong> format to a numbered navigation bar for easier control.<\/p>
      To access more styling options, consider getting the Styles for WP PageNavi<\/a> addon as well.<\/p>
      After installing and activating the plugin, the PageNavi<\/strong> tab will appear in the Settings <\/strong>menu.<\/p>
      \n
      \"PageNavi<\/a><\/figure><\/div>
      2. WP-Paginate<\/a><\/h3>
      WP-Paginate is an open-source plugin that offers simple settings to add pagination to your WordPress site. It also provides a Custom CSS<\/strong> tab to add custom code for your pagination links.<\/p>
      Besides blog posts, WP-Paginate can also modify post comments, which is handy for popular blogs that attract lots of comments. Other customizable elements include labels and buttons as well as their placement.<\/p>
      The free version comes with all the essential features you need. However, upgrading to the Pro<\/a> version will give you more style options along with access to the plugin documentation and one-year dedicated support.<\/p>
      Like WP-PageNavi, you can access the WP-Paginate<\/strong> tab from the Settings <\/strong>menu.<\/p>
      \n
      \"WP-Paginate<\/a><\/figure><\/div>
      3. Alphabetic Pagination<\/a><\/h3>
      True to its name, Alphabetic Pagination allows you to split and organize posts and pages alphabetically. This pagination format is useful for sorting items based on their keywords and topic categories, making the search process more efficient.<\/p>
      Some of the plugin’s basic features include automatic pagination, alphabetical grouping, and DOM positioning. Different styles and language selections are available for different needs and preferences. Upgrading to the Premium version will give you access to custom shortcodes for pagination, listing, and user lists.<\/p>
      Additionally, Alphabetic Pagination is compatible with WooCommerce’s shop page and product category<\/a>.<\/p>
      \n
      \"Alphabetic<\/a><\/figure><\/div>
      How to Fix the WordPress Pagination 404 Error<\/h2>
      The 404 error<\/a> is an error message that might appear when implementing pagination in WordPress. In most cases, it’s caused by permalink conflict that prevents the browser from discovering the broken page.<\/p>
      The error usually occurs when you click on the next page. The custom \/%category%\/%postname%\/<\/strong> permalink structure normally works on the first page, but the appended \/page\/2<\/strong> of the https:\/\/www.domain.com\/custom_taxonomy\/page\/2 <\/strong>URL may conflict with custom permalink settings.<\/p>
      There are several possible solutions to this issue, depending on your circumstances.<\/p>
      Editing the WP_Query posts_per_page Value<\/h3>
      If you navigate to Settings <\/strong>-> Reading <\/strong>from the WordPress dashboard, you’ll see that the default value for Blog pages show at most<\/strong> is 10.<\/p>
      Check your custom permalink’s WP_Query<\/a><\/strong> and see if posts_per_page<\/strong> has the same value. If not, change either one so they don’t conflict.<\/p>
      Add a Pagination ReWrite Rule<\/h3>
      This method involves removing the offending part by creating a rewrite rule. Include this code snippet in your functions.php<\/strong> file:<\/p>
      function my_pagination_rewrite() {\n    add_rewrite_rule(category_name\/page\/?([0-9]{1,})\/?$', 'index.php?category_name=blog&paged=$matches[1]', 'top');\n}\nadd_action('init', 'my_pagination_rewrite');<\/pre>
      After adding the code, go to Settings <\/strong>-> Permalinks <\/strong>from your WordPress dashboard <\/strong>and click Save Changes <\/strong>to flush the rules cache.<\/p>
      \"\"<\/a><\/figure>
      Conclusion<\/h2>
      Pagination is a useful function that makes content-intensive WordPress sites user-friendly and easy to navigate, delivering a better user experience. Fortunately, it can be implemented with custom code or a plugin, making it convenient for users of all technical skill levels.<\/p>
      We’ve gone over a few ways to add pagination to a WordPress website as well as the three best plugins that implement this feature. In case you run into the WordPress pagination 404 error, we’ve included a couple of ways to fix it.<\/p>
      We hope this article has helped improve your WordPress blog’s user experience.  To improve your WordPress performance even further, make sure to use reliable WordPress hosting<\/a>. If you have any tips or questions, feel free to leave them in the comment section below.<\/p>
      \n\n\n
      \n                    
      Learn Other Advanced WordPress Techniques<\/h4>\n                    
      How to Add a Custom Font to WordPress<\/a>
      \n      How to Increase WordPress Memory Limit<\/a>
      \n      How to Remove a Sidebar in WordPress<\/a>
      \n      How to Change WordPress Excerpt Length<\/a>
      \n      A Complete Guide to WordPress A\/B Testing<\/a>
      \n      How to Hide a Page Title in WordPress<\/a><\/p>\n                <\/div>\n<\/p>\n","protected":false},"excerpt":{"rendered":"
      Pagination is a handy WordPress website feature that splits blog posts into separate pages. Instead of visitors having to scroll […]<\/p>\n
      Read More…<\/a><\/p>\n","protected":false},"author":115,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"WordPress Pagination Setup Guide (+ Troubleshooting)","rank_math_description":"WordPress pagination allows you to split content into multiple pages and navigate it. Read on to learn how to set it up and fix errors.","rank_math_focus_keyword":"wordpress pagination","footnotes":""},"categories":[22639,22637],"tags":[],"class_list":["post-46153","post","type-post","status-publish","format-standard","hentry","category-website-management","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-pagination","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-editar-categorias-no-wordpress","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-pagination","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/wordpress-pagination-how-to-set-up-and-troubleshoot-it","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/wordpress-pagination-how-to-set-up-and-troubleshoot-it","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-editar-categorias-no-wordpress","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-pagination","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-pagination","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-pagination","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-pagination","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/posts\/46153","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/users\/115"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/comments?post=46153"}],"version-history":[{"count":12,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/posts\/46153\/revisions"}],"predecessor-version":[{"id":127545,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/posts\/46153\/revisions\/127545"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/media?parent=46153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/categories?post=46153"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/tags?post=46153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}