{"id":46153,"date":"2022-02-17T15:17:10","date_gmt":"2022-02-17T15:17:10","guid":{"rendered":"\/tutorials\/?p=46153"},"modified":"2026-03-09T19:18:45","modified_gmt":"2026-03-09T19:18:45","slug":"wordpress-pagination","status":"publish","type":"post","link":"\/ng\/tutorials\/wordpress-pagination\/","title":{"rendered":"WordPress pagination: how to set up and troubleshoot it"},"content":{"rendered":"<?xml encoding=\"utf-8\" ?><p>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><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><p>Additionally, pagination makes your website&rsquo;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><p>This article will show you how to implement WordPress post pagination using two methods &#8210; manually and using a pagination plugin. We will also cover the WordPress pagination 404 error and some tips to resolve the issue.<\/p><p class=\"has-text-align-center\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Mega-WordPress-Cheat-EN.pdf\">Download all-in-one WordPress cheat sheet<\/a><\/p><p>\n\n\n\n<div class=\"protip\"><div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                   What Is WordPress Pagination?\n                <\/p>\n            <\/div>\n            <p class=\"protip__content\">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><\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-how-to-add-pagination-to-wordpress-manually\">How to Add Pagination to WordPress Manually<\/h2><p>Users with coding skills can implement pagination in WordPress manually using custom code. In this tutorial, we are using the <a href=\"https:\/\/wordpress.org\/themes\/twentytwenty\/\">Twenty Twenty<\/a> WordPress theme.<\/p><p>Feel free to check out the following methods and use the one best suited for your technical skills.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-adjusting-the-php-code-in-the-functions-php-file\">1. Adjusting the PHP Code in the functions.php File<\/h3><p>WordPress supports the pagination function (<strong>posts_nav_link()<\/strong>) that you can insert just before or after the main loop within the <strong>index.php<\/strong> file of your theme. Here&rsquo;s a simplified example of what the code looks like:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php if ( have_posts() ) : ?&gt;\n\n&lt;!-- Add the pagination functions here. &rarr;\n\nposts_nav_link()\n\n&lt;!-- Start of the main loop. --&gt;\n&lt;?php while ( have_posts() ) : the_post();  ?&gt;\n\n&lt;!-- the rest of your theme's main loop --&gt;\n\n&lt;?php endwhile; ?&gt;\n&lt;!-- End of the main loop --&gt;\n\n&lt;!-- Or add the pagination functions here. --&gt;\n\n&lt;div class=\"nav-previous alignleft\"&gt;&lt;?php previous_posts_link( 'Older posts' ); ?&gt;&lt;\/div&gt;\n&lt;div class=\"nav-next alignright\"&gt;&lt;?php next_posts_link( 'Newer posts' ); ?&gt;&lt;\/div&gt;\n\n&lt;?php else : ?&gt;\n&lt;p&gt;&lt;?php _e('Sorry, no posts matched your criteria.'); ?&gt;&lt;\/p&gt;\n&lt;?php endif; ?&gt;<\/pre><p>We recommend using a <a href=\"\/ng\/tutorials\/how-to-create-wordpress-child-theme\/\">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&rsquo;s functionality, style, and features, therefore allowing you to keep the changes made after any theme updates.<\/p><h3 class=\"wp-block-heading\" id=\"h-2-adding-css-code-to-edit-the-pagination\">2. Adding CSS Code to Edit the Pagination<\/h3><p>Another way to implement pagination is to add <a href=\"\/ng\/tutorials\/what-is-html\/\">HTML<\/a> and <a href=\"\/ng\/tutorials\/what-is-css\/\">CSS<\/a> code to your active theme. Many custom CSS code snippets you can use are available on web development platforms like <a href=\"https:\/\/codepen.io\/\">CodePen<\/a>.<\/p><p>The following is a custom pagination function designed by <a href=\"https:\/\/codepen.io\/arefeh_htmi\/pen\/ExKewzW\">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><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/ng\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/02\/navigation-bar.png\"><img loading=\"lazy\" decoding=\"async\" width=\"620\" height=\"221\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/02\/navigation-bar.png\/public\" alt=\"A simple page navigation bar created using HTML and CSS by Arefeh Hatami.\" class=\"wp-image-46156\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/02\/navigation-bar.png\/w=620,fit=scale-down 620w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/02\/navigation-bar.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/02\/navigation-bar.png\/w=150,fit=scale-down 150w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-3-managing-content-per-page\">3. Managing Content per Page<\/h3><p>Unlike the previous methods, this one doesn&rsquo;t involve coding. Instead, you only need to have access to the WordPress admin dashboard.<\/p><ol class=\"wp-block-list\">\n<li>Navigate to <strong>Settings <\/strong>-&gt; <strong>Reading <\/strong>from the WordPress dashboard.<\/li>\n\n\n\n<li>Edit the <strong>Blog pages show at most<\/strong> value.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/ng\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/02\/reading-settings.png\"><img loading=\"lazy\" decoding=\"async\" width=\"899\" height=\"538\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/02\/reading-settings.png\/public\" alt=\"Changing the number of posts shown per page in the WordPress settings. \" class=\"wp-image-46157\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/02\/reading-settings.png\/w=899,fit=scale-down 899w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/02\/reading-settings.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/02\/reading-settings.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/02\/reading-settings.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 899px) 100vw, 899px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"3\">\n<li>Click <strong>Save Changes<\/strong>.<\/li>\n<\/ol><p>The number of posts shown per page should be adjusted to the site&rsquo;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><p>The image below shows you what it looks like if the value is set to &ldquo;1&rdquo;. 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><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/ng\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/02\/this-is-my-first-post.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1348\" height=\"597\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/02\/this-is-my-first-post.png\/public\" alt=\"The appearance of a WordPress site with pagination enabled.\" class=\"wp-image-46158\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/02\/this-is-my-first-post.png\/w=1348,fit=scale-down 1348w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/02\/this-is-my-first-post.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/02\/this-is-my-first-post.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/02\/this-is-my-first-post.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/02\/this-is-my-first-post.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1348px) 100vw, 1348px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-how-to-add-pagination-using-wordpress-gutenberg\">How to Add Pagination Using WordPress Gutenberg<\/h2><p>WordPress offers a <strong>Pagination <\/strong>option with the <strong>Query Loop<\/strong> block. It allows you to add and customize your navigation menu directly from the WordPress Gutenberg editor:<\/p><p>1. Click on the <strong>block inserter <\/strong>tool at the top left of the editor and select the <strong>Query Loop<\/strong> block.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-query-loop.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1349\" height=\"575\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-query-loop.png\/w=1024,h=1024,fit=scale-down\" alt=\"Adding a Query Loop block in WordPress Gutenberg.\" class=\"wp-image-86505\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-query-loop.png\/w=1349,fit=scale-down 1349w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-query-loop.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-query-loop.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-query-loop.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-query-loop.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1349px) 100vw, 1349px\" \/><\/a><\/figure><\/div><p>2. Pick the <strong>Default Posts<\/strong> pattern as it comes with pre-built pagination. Here&rsquo;s what it looks like:<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-query-loop-pagination.png\"><img loading=\"lazy\" decoding=\"async\" width=\"709\" height=\"480\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-query-loop-pagination.png\/public\" alt=\"The built-in pagination in Default Posts query loop pattern.\" class=\"wp-image-86506\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-query-loop-pagination.png\/w=709,fit=scale-down 709w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-query-loop-pagination.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-query-loop-pagination.png\/w=150,fit=scale-down 150w\" sizes=\"auto, (max-width: 709px) 100vw, 709px\" \/><\/a><\/figure><\/div><p>3. If you pick a pattern that doesn&rsquo;t have pagination, you can add it manually. Click the plus <strong>Add Block<\/strong> button at the bottom right of the query loop block and select <strong>Pagination<\/strong>.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-query-loop-pagination-manual.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1061\" height=\"745\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-query-loop-pagination-manual.png\/w=1024,h=1024,fit=scale-down\" alt=\"Adding pagination manually within the query loop block.\" class=\"wp-image-86507\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-query-loop-pagination-manual.png\/w=1061,fit=scale-down 1061w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-query-loop-pagination-manual.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-query-loop-pagination-manual.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-query-loop-pagination-manual.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-query-loop-pagination-manual.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1061px) 100vw, 1061px\" \/><\/a><\/figure><\/div><p>4. Use the toolbar to modify the navigation menu&rsquo;s appearance.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-query-loop-pagination-toolbar.png\"><img loading=\"lazy\" decoding=\"async\" width=\"727\" height=\"323\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-query-loop-pagination-toolbar.png\/public\" alt=\"Modifying the appearance of a navigation bar in the query loop block.\" class=\"wp-image-86508\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-query-loop-pagination-toolbar.png\/w=727,fit=scale-down 727w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-query-loop-pagination-toolbar.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-query-loop-pagination-toolbar.png\/w=150,fit=scale-down 150w\" sizes=\"auto, (max-width: 727px) 100vw, 727px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-best-wordpress-pagination-plugins\">Best WordPress Pagination Plugins<\/h2><p>The easiest way to implement pagination is to use a WordPress plugin. Many free and premium pagination plugins are available in the <a href=\"https:\/\/wordpress.org\/plugins\/\">official plugin directory<\/a>. We will cover the three best free ones to choose from.<\/p><p>All these plugins are customizable via your <strong>Settings<\/strong> menu upon installation and activation.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-wp-pagenavi\">1. <a href=\"https:\/\/wordpress.org\/plugins\/wp-pagenavi\/\">WP-PageNavi<\/a><\/h3><p>Since WP-PageNavi is one of the <a href=\"\/ng\/tutorials\/best-wordpress-plugins\/\">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&rsquo;s code to make the plugin work &#8210; the custom code is provided on the plugin&rsquo;s official page.<\/p><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 <strong>Older posts<\/strong> and <strong>Newer posts<\/strong> format to a numbered navigation bar for easier control.<\/p><p>To access more styling options, consider getting the <a href=\"https:\/\/wordpress.org\/plugins\/styles-for-wp-pagenavi-addon\/\">Styles for WP PageNavi<\/a> addon as well.<\/p><p>After installing and activating the plugin, the <strong>PageNavi<\/strong> tab will appear in the <strong>Settings <\/strong>menu.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/ng\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/02\/pagenavi-settings.png\"><img loading=\"lazy\" decoding=\"async\" width=\"642\" height=\"603\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/02\/pagenavi-settings.png\/public\" alt=\"PageNavi settings tab.\" class=\"wp-image-46159\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/02\/pagenavi-settings.png\/w=642,fit=scale-down 642w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/02\/pagenavi-settings.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/02\/pagenavi-settings.png\/w=150,fit=scale-down 150w\" sizes=\"auto, (max-width: 642px) 100vw, 642px\" \/><\/a><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-2-wp-paginate\">2. <a href=\"https:\/\/wordpress.org\/plugins\/wp-paginate\/\">WP-Paginate<\/a><\/h3><p>WP-Paginate is an open-source plugin that offers simple settings to add pagination to your WordPress site. It also provides a <strong>Custom CSS<\/strong> tab to add custom code for your pagination links.<\/p><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><p>The free version comes with all the essential features you need. However, upgrading to the <a href=\"https:\/\/maxgalleria.com\/downloads\/wp-paginate-pro\/\">Pro<\/a> version will give you more style options along with access to the plugin documentation and one-year dedicated support.<\/p><p>Like WP-PageNavi, you can access the <strong>WP-Paginate<\/strong> tab from the <strong>Settings <\/strong>menu.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/ng\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/02\/wp-paginate.png\"><img loading=\"lazy\" decoding=\"async\" width=\"873\" height=\"597\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/02\/wp-paginate.png\/public\" alt=\"WP-Paginate settings tab.\" class=\"wp-image-46160\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/02\/wp-paginate.png\/w=873,fit=scale-down 873w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/02\/wp-paginate.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/02\/wp-paginate.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/02\/wp-paginate.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 873px) 100vw, 873px\" \/><\/a><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-3-alphabetic-pagination\">3. <a href=\"https:\/\/wordpress.org\/plugins\/alphabetic-pagination\/\">Alphabetic Pagination<\/a><\/h3><p>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><p>Some of the plugin&rsquo;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><p>Additionally, Alphabetic Pagination is compatible with <a href=\"https:\/\/woocommerce.com\/\">WooCommerce&rsquo;s shop page and product category<\/a>.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/ng\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/02\/alphabetic-pagination.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1197\" height=\"599\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/02\/alphabetic-pagination.png\/public\" alt=\"Alphabetic Pagination settings tab.\" class=\"wp-image-46161\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/02\/alphabetic-pagination.png\/w=1197,fit=scale-down 1197w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/02\/alphabetic-pagination.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/02\/alphabetic-pagination.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/02\/alphabetic-pagination.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/02\/alphabetic-pagination.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1197px) 100vw, 1197px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-how-to-fix-the-wordpress-pagination-404-error\">How to Fix the WordPress Pagination 404 Error<\/h2><p>The <a href=\"\/ng\/tutorials\/how-to-fix-error-404\/\">404 error<\/a> is an error message that might appear when implementing pagination in WordPress. In most cases, it&rsquo;s caused by permalink conflict that prevents the browser from discovering the broken page.<\/p><p>The error usually occurs when you click on the next page. The custom <strong>\/%category%\/%postname%\/<\/strong> permalink structure normally works on the first page, but the appended <strong>\/page\/2<\/strong> of the <strong>https:\/\/www.domain.com\/custom_taxonomy\/page\/2 <\/strong>URL may conflict with custom permalink settings.<\/p><p>There are several possible solutions to this issue, depending on your circumstances.<\/p><h3 class=\"wp-block-heading\" id=\"h-editing-the-wp-query-posts-per-page-value\">Editing the WP_Query posts_per_page Value<\/h3><p>If you navigate to <strong>Settings <\/strong>-&gt; <strong>Reading <\/strong>from the WordPress dashboard, you&rsquo;ll see that the default value for <strong>Blog pages show at most<\/strong> is 10.<\/p><p>Check your custom permalink&rsquo;s <strong><a href=\"\/ng\/tutorials\/wordpress-wp_query\/\">WP_Query<\/a><\/strong> and see if <strong>posts_per_page<\/strong> has the same value. If not, change either one so they don&rsquo;t conflict.<\/p><h3 class=\"wp-block-heading\" id=\"h-add-a-pagination-rewrite-rule\">Add a Pagination ReWrite Rule<\/h3><p>This method involves removing the offending part by creating a rewrite rule. Include this code snippet in your <strong>functions.php<\/strong> file:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function my_pagination_rewrite() {\n    add_rewrite_rule(category_name\/page\/?([0-9]{1,})\/?$', 'index.php?category_name=blog&amp;paged=$matches[1]', 'top');\n}\nadd_action('init', 'my_pagination_rewrite');<\/pre><p>After adding the code, go to <strong>Settings <\/strong>-&gt; <strong>Permalinks <\/strong>from your WordPress dashboard<strong> <\/strong>and click <strong>Save Changes <\/strong>to flush the rules cache.<\/p><figure class=\"wp-block-image size-large\"><a class=\"hgr-tutorials-cta hgr-tutorials-cta-wordpress-hosting\" href=\"\/ng\/wordpress-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"600\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-111781\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=2048,fit=scale-down 2048w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2><p>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><p>We&rsquo;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&rsquo;ve included a couple of ways to fix it.<\/p><p>We hope this article has helped improve your WordPress blog&rsquo;s user experience.  To improve your WordPress performance even further, make sure to use <a href=\"\/ng\/wordpress-hosting\">reliable WordPress hosting<\/a>. If you have any tips or questions, feel free to leave them in the comment section below.<\/p><p>        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Learn Other Advanced WordPress Techniques                <\/p>\n            <\/div>\n            <p class=\"protip__content\"><a href=\"\/ng\/tutorials\/how-to-add-custom-fonts-to-wordpress\/\">How to Add a Custom Font to WordPress<\/a><br>\n<a href=\"\/ng\/tutorials\/wordpress-memory-limit\/\">How to Increase WordPress Memory Limit<\/a><br>\n<a href=\"\/ng\/tutorials\/remove-sidebar-wordpress\/\">How to Remove a Sidebar in WordPress<\/a><br>\n<a href=\"\/ng\/tutorials\/wordpress-excerpt-length\/\">How to Change WordPress Excerpt Length<\/a><br>\n<a href=\"\/ng\/tutorials\/wordpress-a-b-testing\/\">A Complete Guide to WordPress A\/B Testing<\/a><br>\n<a href=\"\/ng\/tutorials\/how-to-hide-page-title-wordpress\/\">How to Hide a Page Title in WordPress<\/a><\/p>\n                    <\/div>\n        \n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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. Websites with a large amount of content can benefit from implementing pagination as this feature allows visitors to browse faster, [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/ng\/tutorials\/wordpress-pagination\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":115,"featured_media":0,"comment_status":"open","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":[22637],"tags":[],"class_list":["post-46153","post","type-post","status-publish","format-standard","hentry","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-GB","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\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/46153","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/users\/115"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/comments?post=46153"}],"version-history":[{"count":13,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/46153\/revisions"}],"predecessor-version":[{"id":144531,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/46153\/revisions\/144531"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/media?parent=46153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/categories?post=46153"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/tags?post=46153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}