Pagination is a used for ordering sequential pages which are contextually connected, to provide continuity to both users and search engines.
Now, when it comes to the subject of pagination for your WordPress site, here are some use cases:
- WordPress pagination for a main blog page (this can take two forms: either as older/newer posts or as numeric pagination). However, people prefer numeric pagination to older/newer posts pagination, as it is more user friendly and better “viewed” by search engines.
- WordPress pagination for a products list page, in an ecommerce website. In an online shop, pages fall into these categories: main products page, product lists pages and products pages. The probability to split a page in smaller pieces is higher for product lists pages.
- WordPress pagination for a long-form post or page. If a post or page contains too much content, you might need to break it into multiple pages. Thus, it’s useful to know how to break a long-form page or post into several pieces.
Now, how can you manage pagination in WordPress? Well, it depends on what you want to do. This is why you might need to read the full article.
Here’s the plan. You’ll find out:
- How to set up the number of posts per page,
- How to set up the number of products on a page for an online store,
- How to split a post or page into multiple posts or pages,
- How to style pagination rows and numbers,
- Which are the plugins you can use to set up WordPress pagination.
1. How to set up the number of posts for your WordPress blog page
From the WordPress dashboard, head over to Settings -> Reading.
You can set your website homepage to display a list of latest posts. In this case, you also have the option to set the number of posts that appear on the main blog page. If there’s a greater number of total posts (than the number of posts you set to display on the main blog page), WordPress will create a second/third/fourth… page that contain the other articles written for your blog.
How to set a specific number of posts for blog pages:
If, for instance, the blog already has 10 posts, and only 3 are set to display in the main blog page, WordPress will automatically create pagination for the main blog page and place the remaining posts on additional pages.
Pagination is numeric, and numbers have the aspect of links (and they behave as links – when clicked on, they’ll display page no. 1, page no. 2, depending on the link you choose). It should be like this, because people recognize a certain format of links. This is better not to change, for user experience to be optimal and ensure effective navigation of users in all blog pages.
2. Setting up WordPress pagination for a products list page
It might be useful to split a long product list page into several pages that are easier to browse. For this doing, you should have built-in options in the theme you’re using for your website.
For instance, in Mesmerize, you need to go to from the WordPress dashboard to Appearance -> Customizer and set the number of products that will appear in the products list page (based on the fact that you’ve previously installed WooCommerce for the website and already have put in place the online shop):
In the Customizer, go to WooCommerce Options.
Under WooCommerce Options, find and click on the Product List Options section.
In the Shop Page Settings, the first option refers to how many products you’ll set per page, as marked in the screenshot above.
For instance, in this case, we set the number of products per page to 2:
As the total number of products is 24, the products list will be displayed over 12 pages (2 products per page).
Pagination is thus automatically created. Pages have numbers, and numbers have links on them, so when users choose a certain number, they can go to the respective page displaying products, in the products list.
*Note that this is a pure example, to exemplify the automatic display of pagination based on a series of previous settings in the Customizer. A classic product list page in a public online shop will include more than 2 products.
3. WordPress pagination for a long-form post or page
In some cases, you’ll have plenty of content in a page of your website. If it’s a blog post, it’s much more often the case to display a long-form content inside a single post page. For ease of access and facilitation of users’ navigation within that content, you might want to split the page/post into several pages.
Here’s how to add pagination to a long-form page:
Go to the WordPress Admin dashboard -> Posts or Pages, depending on the format of the page you want to modify.
In this example, we’ll go to Posts, and select the post we want to split into several pages. Click on “Edit”, under the respective blog post.
If you are using the Default WordPress Editor, you will see the interface below. You will need to go to the settings icon in the upper-right, then select “Code Editor”.
If you are inside the Classic Editor, you will see the interface as shown below. You will need to go and switch it to “Text” mode.
Now, no matter the Editor you use, you will see some HTML code in from of you. You will need to find the section where you want to make the first split. Insert this tiny piece of code there <!- – nextpage- – >
Then, repeat the process for every new page break you want to apply too your original post.
At the end, don’t forget to press Update post, for the changes to go live.
The pagination will be created automatically, due to the insertion of code for page breaks. This pagination is numeric, each page corresponding to the article receiving a number in a sequence. These numbers (with links placed over them) will guide users throughout the article, from page 1 to page 2 to page 3, etc.
4. How to style WordPress pagination rows and numbers (without CSS code)
Now, most of the times, the rows and numbers from pagination will match the look and feel of the theme you are using. But what if you want to make changes to it?
Well, usually you would need to either use custom CSS, or use a WordPress pagination plugin.
But there’s also another way. Enter WordPress pagination blocks!
If you are using the block-based experience, there are specific pagination blocks that you can easily customize.
Now, everything is a block in WordPress: from paragraphs and images, to tables and sliders. By default, WordPress offers a set of basic blocks like a heading, paragraph, image, button, and more, but more are being developed by the WordPress community, enriching the default experience. For example, the Kubio builder even ads the pagination block. But besides the extra blocks, it also levels up the Block Editor, giving its users complete freedom over design. Because, let’s face it. The Default Block Editor lacks a lot of features.
Now, Kubio builder is a free one and is compatible with any theme.
So, let’s see how you can customize the pagination blocks! There are three types of pagination blocks in Kubio: pagination, pagination nav button, and pagination numbers.
- Adding a WordPress block
Let’s say you are inside a post. Let’s see how you can add any block to it in the WordPress block experience.
First, go to the “+” sign in the upper-left corner.
When clicking the “+” sign you will open up the block inserter. Now, because I have installed Kubio, I can also see the Kubio blocks, besides the default ones. The Kubio blocks have blue-green icons, while the default ones have black icons. You can easily search a block by name. If you use other plugins that will add their own blocks, they will most probably have different colored icons as well. Now, see the three pagination blocks? You can easily drag and drop them to a page.
- How to customize the pagination blocks inside the Block Editor
Now, how do you customize the pagination blocks? I’m going to use the pagination number block as an example.
Start by clicking on any number from the block in order to select the block itself. You will notice that the pagination numbers block has a toolbar on top of it, with several basic editing options: block positioning, duplication, insert after, insert before, lock block, copy and paste style (this is a Kubio PRO feature), and remove block.
While the block is still selected, you can notice a block editing panel on the right hand side. This is where the Kubio magic happens. What you see below is an upgrade from the Default experience.
The block editing panel always has three options: Content, Style, and Advanced. The possibilities inside vary from block to block.
In this case, at the “Content” level you can make adjustments to the alignment. of the numbers. Now, you can always use the reset button to revert to the default state.
At the “Style” level, you can make further button changes, across the normal, hover, and active states, such as: background and text color, typography, and space between items.
At the “Advanced” level you can customize: background, spacing, border and shadows, typography, transform, dividers, transition, responsive, and miscellaneous.
In the case of the pagination numbers block, you can make container, page number, current page number, and dots changes, across the normal and hover states, as seen below:
Like I said, complete design freedom, in a free WordPress page builder: Kubio.
4. Plugins you can use to set up WordPress pagination
Now, I’m not a fan of using tons of plugins on a site. I mean, I’d rather install a page builder, that can compensate for the features of 10+ plugins. Each extra plugin that you will add will slow down your site. It can also collide with the functions of some other plugin.
But, you should know that there are some plugins out there that can help you out with customizing pagination in WordPress. Here are some of them:
- WP-PageNavi. This is by far the most popular WordPress pagination plugin out there. It has more than 700,000 active installs. There’s one problem with this plugin. It’s kinda technical, and you need some basic coding knowledge. you might end up using some CSS coding as well.
- WP-Paginate. This plugin has 40,000 active installs. It will require CSS know-how.
- Pagination Styler for WooCommerce. This plugin has 1,000 active installs and can be used to style pagination for WooCommerce online stores.
Now, if here’s a tutorial on how to install any plugin in WordPress:
And that’s a wrap!
Now, if you liked this article, and you want to learn more about how to design a WordPress website, make sure to subscribe to our Youtube channel and follow us on Twitter and Facebook!
Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.