Site icon Hip-Hop Website Design and Development

WordPress Pagination: How to Add Pagination Manually or With Plugins

Searching for a way to control WordPress pagination?

Adjusting your site’s pagination can help you create a more user-friendly, easily navigable website. However, many WordPress themes don’t offer detailed pagination options, which means you’re limited in the changes that you can make.

Thankfully, there are some easy ways to adjust WordPress pagination. More advanced users can rely on custom code, while casual users can find several high-quality pagination plugins.

In this post, we will cover everything that you need to know about WordPress pagination.

Let’s dive in!

What Is WordPress Pagination?

WordPress pagination is the process of splitting the list of your website’s blog posts or other content into separate pages.

For example, if you have 100 blog posts, you might configure your pagination settings to show 10 blog posts on each page, which would divide your blog post list into 10 pages with 10 posts each.

Visitors can then use “Next” or “Previous” buttons to navigate between the pages that list your posts. Or, in some cases, visitors will see a numbered list of pages so that they can jump to a specific page. For example, the pagination looks this way in the default Twenty Twenty-One theme:

WordPress pagination example in the default Twenty Twenty-One theme.

You can also break a single WordPress post into multiple pages, which can be helpful if you publish long-form content.

With some code snippets or plugins, you can also gain a lot more control over how pagination works on your site, which are topics that we’ll cover later in this post.

body a.novashare-ctt{display:block;background:#00abf0;margin:30px auto;padding:20px 20px 20px 15px;color:#fff;text-decoration:none!important;box-shadow:none!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;border:none;border-left:5px solid #00abf0}body a.novashare-ctt:hover{color:#fff;border-left:5px solid #008cc4}body a.novashare-ctt:visited{color:#fff}body a.novashare-ctt *{pointer-events:none}body a.novashare-ctt .novashare-ctt-tweet{display:block;font-size:18px;line-height:27px;margin-bottom:10px}body a.novashare-ctt .novashare-ctt-cta-container{display:block;overflow:hidden}body a.novashare-ctt .novashare-ctt-cta{float:right}body a.novashare-ctt.novashare-ctt-cta-left .novashare-ctt-cta{float:left}body a.novashare-ctt .novashare-ctt-cta-text{font-size:16px;line-height:16px;vertical-align:middle}body a.novashare-ctt .novashare-ctt-cta-icon{margin-left:10px;display:inline-block;vertical-align:middle}body a.novashare-ctt .novashare-ctt-cta-icon svg{vertical-align:middle;height:18px}body a.novashare-ctt.novashare-ctt-simple{background:0 0;padding:10px 0 10px 20px;color:inherit}body a.novashare-ctt.novashare-ctt-simple-alt{background:#f9f9f9;padding:20px;color:#404040}body a.novashare-ctt.novashare-ctt-simple-alt:hover,body a.novashare-ctt.novashare-ctt-simple:hover{border-left:5px solid #008cc4}body a.novashare-ctt.novashare-ctt-simple .novashare-ctt-cta,body a.novashare-ctt.novashare-ctt-simple-alt .novashare-ctt-cta{color:#00abf0}body a.novashare-ctt.novashare-ctt-simple-alt:hover .novashare-ctt-cta,body a.novashare-ctt.novashare-ctt-simple:hover .novashare-ctt-cta{color:#008cc4}Searching for a way to control WordPress pagination? Start here Click to Tweet

Why Use WordPress Pagination?

There are 3 main reasons you should care about WordPress pagination:

  1. Improved navigation and user experience
  2. Better performance
  3. Improved SEO crawlability

Let’s go through them.

Improved Navigation and User Experience

The biggest benefit of improving WordPress pagination is that it makes it easier for your visitors to navigate your site, which creates a better experience for them.

Many WordPress themes only show limited pagination options, making it difficult for visitors to navigate to a different page.

For example, here are the default pagination options in the Twenty Twenty-One theme when a visitor reads the first page of posts.

The Twenty Twenty-One theme provides limited pagination options on the first page.

Visitors can navigate to the last page (page 6 in this example) or to the next page (by clicking “Older posts”), but they can’t navigate directly to pages 3, 4, or 5.

Compare that to the Kinsta blog, which provides multiple pagination links to help visitors get to the right spot.

The Kinsta blog provides more pagination options for easier navigation.

Visitors get even more options as they navigate to deeper pages, which helps them quickly jump forward or back to different pages as needed.

Users get more pagination options as they navigate to deeper pages.

Better Performance

Using pagination can also be a tactic to improve your WordPress site’s performance by limiting the amount of data that your site needs to load on each page.

For example, let’s say you have 50 blog posts. If you try to load all 50 blog posts on your main blog page, your blog page might load slowly because that’s a lot of data.

However, if you use pagination to break up the list into 5 pages of 10 posts each, each page will load much faster because it only needs to load one-fifth of the data.

Improved SEO Crawlability

Using pagination can also make it easier for search engine robots like Googlebot to crawl your site by providing these bots with more navigation links.

It’s a slight difference, but any tweak you can make to improve your site’s crawlability is always a good thing for SEO.

How to Control WordPress Pagination Manually

While we’ll get to some handy WordPress pagination plugins in the next section, you also get some built-in features to work with WordPress pagination. Or, depending on your knowledge level, you can also adjust pagination using custom code.

Let’s talk about the built-in options for working with pagination, using the default Twenty Twenty-One theme as an example.

Controlling How Many Content Items to Display Per Page

By default, WordPress will show 10 posts per page. So if you have 25 posts, you would have 3 total pages. The first 2 pages would show 10 posts each, and the last page would show the remaining 5 posts.

If you want to adjust this number, you can go to Settings > Reading and edit the Blog pages show at most value.

How to change how many posts WordPress displays per page.

Breaking a WordPress Post or Page Into Multiple Pages

So far, we’ve mainly focused on breaking your blog listing page into multiple pages. However, WordPress also lets you divide individual posts or pages into various pages, which might be helpful in some situations.

If you’re using the WordPress block editor (AKA Gutenberg), you can choose where to add page breaks using the Page Break block.

How to add page breaks with the Page Break block.

If you’re using the classic TinyMCE editor, you can choose where to add page breaks using one of two methods:

  1. Place your mouse cursor where you want to add the page break in the Visual tab of the editor. Then use the following keyboard shortcut: Alt + Shift + P.
  2. Manually place the page break by pasting the following snippet into the Text tab of the editor: <!--nextpage-->.

Using PHP and CSS to Adjust WordPress Pagination Behavior

If you’re not a very technical person, this method probably isn’t for you. You might want to skip ahead to the pagination plugins.

However, if you feel comfortable making minor code tweaks to your site, you can adjust your theme’s pagination using PHP and CSS.

Because you’ll be editing your theme’s template files, you must use a WordPress child theme. Otherwise, your changes will get overwritten the next time you update your theme. We have a detailed guide on how to set up a child theme.

We also recommend backing up your site before making any changes.

If you want to add pagination to any WordPress theme manually, you can use the the_posts_pagination function. For example, the following snippet:

the_posts_pagination( array(
'mid_size' => 2,
'prev_text' => __( 'Previous Page', 'textdomain' ),
'next_text' => __( 'Next Page', 'textdomain' ),
) );

You would add this snippet directly to your child theme’s template files where you want the pagination to appear.

Below, we’ve left the default Twenty Twenty-One pagination and added our own pagination using the code snippet to see the difference. The “Page 1” pagination is the theme’s default, and the “1”, “2”, “3” pagination comes from our custom code.

An example of the default pagination as well as custom pagination.

Here’s what that looks like in the code – you can see the original pagination function and our custom pagination.

The actual code for the example screenshot above.

You’d want to replace the existing pagination function with your custom function on a live WordPress site (Warning: We recommend doing it on a staging site first. This is just an example!). You might need to edit multiple files depending on your theme.

You might find it more convenient to connect to your server via an FTP client and use a dedicated PHP editor to edit your theme files.

To adjust the style of your theme’s pagination, you’ll need to add some custom CSS.

The Seven Best WordPress Pagination Plugins

If you want more control over your site’s pagination, you might prefer using a WordPress pagination plugin. Here are 7 of the top options available.

1. WP-PageNavi

WP-PageNavi WordPress plugin.

Active on over 700,000 sites, WP-PageNavi is the most popular WordPress pagination plugin by a good margin. It’s also 100% free, which helps explain its popularity.

It gives you a simple settings area where you can control the behavior of your site’s pagination. You can adjust the text, how many page numbers to show, and more.

Sign Up For the Newsletter

If you want more control over the design of your pagination, you can also consider the third-party Styles For WP Pagenavi Addon plugin.

How It Works

Because WP-PageNavi is so popular, some WordPress themes offer built-in support for the plugin. If your theme does, all you need to do is activate the plugin, configure its settings, and you’re good to go. You can access the settings by going to Settings > PageNavi.

The WP-PageNavi settings area.

However, if your theme doesn’t include built-in support, you’ll need to manually edit your theme’s template files to get the plugin working, which can be a little complicated if you’re not a very technical person.

You need to find the default code your theme uses for pagination and replace it with WP-PageNavi’s custom code snippet. The developer explains how to do this on the plugin’s WordPress.org page.

2. WP-Paginate

WP-Paginate WordPress plugin.

WP-Paginate is another popular plugin for setting up custom pagination on your WordPress site. In addition to helping you paginate your posts, you can also use the plugin to add custom pagination to your comments sections, which can help you speed up your comments.

Unlike the WP-PageNavi plugin above, you do not need to edit your theme template files directly, which might make this a better option if you’re not a technical person. For more advanced users, you still have the option of using PHP to place the pagination in your theme’s template files manually.

With the plugin, you’ll be able to customize all aspects of your pagination, including the following:

There’s a free version at WordPress.org that should work for most sites. There’s also a $19 premium version that adds more pre-set styles and style options.

How It Works

To configure the plugin, you can go to Settings → WP-Paginate to control the plugin’s settings.

If you want to display the plugin’s pagination without editing your theme’s template files, you’ll want to make the following selections in the Location & Position settings:

  1. Check the Everywhere box to display your new pagination everywhere where pagination is needed.
  2. Set the Position drop-down equal to Below the Content.
  3. Check the Hide Standard Pagination box to hide your theme’s existing pagination.
How to configure the WP-Paginate plugin.

3. Pagination by BestWebSoft

Pagination by BestWebSoft WordPress plugin.

Pagination by BestWebSoft is another pagination plugin that lets you add a new pagination system to your site without needing to edit your theme’s template files.

However, like the WP-Paginate plugin above, you still have the option to edit your theme’s template files if you want more control over placement.

Via the plugin’s settings, you’ll be able to easily adjust the location, style, and behavior of your pagination.

Need blazing-fast, reliable, and fully secure hosting for your ecommerce website? Kinsta provides all of this and 24/7 world-class support from WooCommerce experts. Check out our plans

The free version should work fine for most sites, but a $20 premium version also adds more pagination types and built-in Divi compatibility.

How It Works

To configure the plugin, go to the new Pagination tab in your dashboard.

The plugin’s default settings will automatically hide your theme’s existing pagination and replace it with the custom pagination from the plugin. All you need to do is configure the settings for the style and behavior of your new pagination.

The Pagination plugin’s settings area.

4. Ajax Load More

Ajax Load More WordPress plugin.

Ajax Load More lets you create buttons that load more content without forcing the user to load a new page. It gives you several options for controlling pagination, including “traditional” pagination and some unique twists.

If you’re willing to purchase some premium add-ons, you can add actual pagination buttons. When users move to a new page, they won’t perceive the page as reloading, but the URL will change (good for SEO). You can see a live demo of this here.

Ajax Load More lets you replace your pagination with a “Load More” button with the free version. Instead of adding pagination links that visitors can use to navigate to a different page, Ajax Load More lets you add a “Load More” button to display more posts without reloading the page. You can see a live demo of this here.

How It Works

Instead of adding pagination to your existing post list, the Ajax Load More plugin works by creating a new post list that includes your desired settings. To set this up, you’ll use the Ajax Load More area in your WordPress dashboard.

If you want to set up traditional pagination, make sure to purchase and install the Paging add-on.

5. Alphabetic Pagination

Alphabetic Pagination WordPress plugin.

The Alphabetic Pagination plugin helps you implement a different type of pagination on your site – an A-Z listing.

Rather than paginating by numbers and ordering posts by their publish dates, Alphabetic Pagination lets you create a pagination option for each letter of the alphabet. Then, if a user clicks on a specific letter, they’ll see all of the content pieces that start with that letter.

How It Works

To use the plugin, head to Settings > Alphabetic Pagination to configure its settings.

In the General tab of the plugin’s settings, you can configure where to display your alphabetic pagination.

Using the Auto implementation is the simplest option. However, you can also manually place your alphabetic pagination using the shortcodes or PHP function in the Shortcodes tab.

How to configure the placement of your alphabetic pagination.

Once you’ve configured the placement, you can control the design of your alphabetic pagination from the Styling tab.

6. WP Show Posts

WP Show Posts WordPress plugin.

WP Show Posts is a helpful plugin that lets you create your post lists, complete with custom pagination.

That’s the key detail — you’re not adding pagination to your existing blog post list. Instead, you’re creating a new blog post list that includes your own pagination settings.

The plugin also includes a flexible query builder so that you can choose exactly which posts to show (and therefore which posts you want to paginate).

How It Works

Once you activate the plugin, you can go to WP Show Posts > Add New to create a new post list.

We recommend exploring all of the settings to control what content to display. In setting up pagination, check the Pagination box in the Posts tab and set the number of Posts per page.

How to create a new post list with pagination.

Once you’ve set everything up, you can add your post list using its shortcode or PHP function.

7. Pagination Styler for WooCommerce

Pagination Styler for WooCommerce WordPress plugin.

As the name suggests, Pagination Styler for WooCommerce is a pagination plugin specifically for WooCommerce stores.

It gives you many new options for controlling your store’s product pagination positioning and style. You can also choose from completely different layouts, such as vertical pagination instead of the traditional horizontal pagination.

How It Works

Pagination Styler for WooCommerce works by replacing your existing WooCommerce pagination with the plugin’s pagination.

To configure the plugin’s settings, you can go to BeRocket > Pagination Styler in your WordPress dashboard:

The Pagination Styler for WooCommerce settings area.

Adjusting your site’s pagination can help you create a more user-friendly, easily navigable website, but many WordPress themes don’t offer detailed options This guide is here to help! Click to Tweet

Summary

Pagination lets you split your WordPress site’s content into multiple pages. This can make it easier for humans and search engines to navigate, and it can also improve performance by loading less data on each page.

All WordPress sites come with pagination support out of the box. However, the default pagination system in most themes is limited.

To improve WordPress pagination, you can add your custom code or use one of the 7 WordPress pagination plugins that we detailed above.

Still have questions about WordPress pagination? Please share your thoughts in the comments below!

The post WordPress Pagination: How to Add Pagination Manually or With Plugins appeared first on Kinsta®.