![\"WordPress](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/05\/WordPress-pagination-on-the-Colibri-blog.jpg\")
<\/p>\n
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.<\/p>\n
Here’s the plan. You’ll find out:<\/p>\n
- \n
- How to set up the number of posts per page,<\/li>\n
- How to set up the number of products on a page for an online store,<\/li>\n
- How to split a post or page into multiple posts or pages,<\/li>\n
- How to style pagination rows and numbers,<\/li>\n
- Which are the plugins you can use to set up WordPress pagination.<\/li>\n<\/ul>\n
<\/p>\n
1. How to set up the number of posts for your WordPress blog page<\/h2>\n
From the WordPress dashboard, head over to Settings -> Reading.<\/p>\n
![\"Reading](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/05\/Reading-settings.jpg\")
<\/p>\nYou 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\u2019s 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\u2026 page that contain the other articles written for your blog.<\/p>\n
How to set a specific number of posts for blog pages:<\/p>\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/05\/2pagination-min.png\")
<\/p>\nIf, 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.<\/p>\n
Pagination is numeric, and numbers have the aspect of links (and they behave as links \u2013 when clicked on, they\u2019ll 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.<\/p>\n
<\/p>\n
2. Setting up WordPress pagination for a products list page<\/h2>\n
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\u2019re using for your website.<\/p>\n
For instance, in Mesmerize<\/a>, 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\u2019ve previously installed WooCommerce for the website and already have put in place the online shop):<\/p>\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/05\/mesmerize-woocommerce-min.png\")
<\/p>\n<\/p>\n
In the Customizer, go to WooCommerce Options.<\/p>\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/05\/product-list-options-min.png\")
<\/p>\n<\/p>\n
Under WooCommerce Options, find and click on the Product List Options section.<\/p>\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/05\/products-per-page-min.png\")
<\/p>\n<\/p>\n
In the Shop Page Settings, the first option refers to how many products you\u2019ll set per page, as marked in the screenshot above.<\/p>\n
For instance, in this case, we set the number of products per page to 2:<\/p>\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/05\/pagination-woocommerce-min.png\")
<\/p>\n<\/p>\n
As the total number of products is 24, the products list will be displayed over 12 pages (2 products per page).<\/p>\n
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.<\/p>\n
*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.<\/em><\/p>\n
<\/p>\n
3. WordPress pagination for a long-form post or page<\/h2>\n
In some cases, you\u2019ll have plenty of content in a page of your website. If it\u2019s a blog post, it\u2019s much more often the case to display a long-form content inside a single post page. For ease of access and facilitation of users\u2019 navigation within that content, you might want to split the page\/post into several pages.<\/p>\n
Here\u2019s how to add pagination to a long-form page:<\/p>\n
Go to the WordPress Admin dashboard -> Posts or Pages, depending on the format of the page you want to modify.<\/p>\n
In this example, we\u2019ll go to Posts, and select the post we want to split into several pages. Click on “Edit”, under the respective blog post.<\/p>\n
![\"Edit](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/05\/Edit-a-post.jpg\")
<\/p>\n<\/p>\n
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”.<\/p>\n
![\"the](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/05\/the-code-editor-inside-the-Default-WordPress-Editor.jpg\")
<\/p>\nIf 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.<\/p>\n
![\"Switch](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/05\/Swicth-to-Text-inside-the-Classic-Editor.jpg\")
<\/p>\n<\/p>\n
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- – ><\/strong><\/p>\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/05\/break-page-min.png\")
<\/p>\nThen, repeat the process for every new page break you want to apply too your original post.<\/p>\n
At the end, don\u2019t forget to press Update post, for the changes to go live.<\/p>\n
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.<\/p>\n
<\/p>\n
4. How to style WordPress pagination rows and numbers (without CSS code)<\/h2>\n
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?<\/p>\n
Well, usually you would need to either use custom CSS<\/a>, or use a WordPress pagination plugin.<\/p>\n
But there’s also another way.\u00a0Enter WordPress pagination blocks!<\/p>\n
If you are using the block-based experience<\/a>, there are specific pagination blocks that you can easily customize.<\/p>\n
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<\/a> even ads the pagination block.\u00a0But 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.<\/p>\n
Now, Kubio builder is a free one and is compatible with any theme.<\/p>\n
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.<\/p>\n
<\/p>\n
- \n
- Adding a WordPress block<\/strong><\/li>\n<\/ul>\n
Let’s say you are inside a post. Let’s see how you can add any block to it in the WordPress block experience.<\/p>\n
First, go to the “+” sign in the upper-left corner.<\/p>\n
![\"Open](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/05\/Open-the-block-inserter.jpg\")
<\/p>\nWhen 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\u00a0 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\u00a0 them to a page.<\/p>\n
![\"Pagination](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/05\/Pagination-blocks-in-the-block-inserter.jpg\")
<\/p>\n- \n
- How to customize the pagination blocks inside the Block Editor<\/strong><\/li>\n<\/ul>\n
Now, how do you customize the pagination blocks? I’m going to use the pagination number block as an example.<\/p>\n
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.<\/p>\n
![\"Pagination](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/05\/Pagination-numbers-with-toolbar.jpg\")
<\/p>\nWhile 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.<\/p>\n
![\"Pagination](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/05\/Pagination-numbers-styling.jpg\")
<\/p>\n<\/p>\n
The block editing panel always has three options: Content, Style, and Advanced. The possibilities inside vary from block to block.<\/p>\n
In this case, at the \u201cContent\u201d 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.<\/p>\n
![\"Pagination](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/05\/Pagination-numbers-content.jpg\")
<\/p>\nAt the “Style” level, you can make further button changes, across the normal, hover, and active states, such as:\u00a0 background and text color, typography, and space between items.<\/p>\n
![\"Pagination](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/05\/Pagination-numbers-styling-in-the-block-editing-panel.jpg\")
<\/p>\nAt the “Advanced” level you can customize: background, spacing, border and shadows, typography, transform, dividers, transition, responsive, and miscellaneous.<\/p>\n
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:<\/p>\n
![\"Advanced](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/05\/Advanced-customization-levels.jpg\")
<\/p>\n<\/p>\n
Like I said, complete design freedom, in a free WordPress page builder: Kubio.<\/p>\n
<\/p>\n
4. Plugins you can use to set up WordPress pagination<\/h2>\n
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.<\/p>\n
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:<\/p>\n
- \n
- WP-PageNavi<\/a>. 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.<\/li>\n
- WP-Paginate<\/a>. This plugin has 40,000 active installs. It will require CSS know-how.<\/li>\n
- Pagination Styler for WooCommerce<\/a>. This plugin has 1,000 active installs and can be used to style pagination for WooCommerce online stores.<\/li>\n<\/ul>\n
<\/p>\n
Now, if here’s a tutorial on how to install any plugin in WordPress:<\/p>\n
- WP-Paginate<\/a>. This plugin has 40,000 active installs. It will require CSS know-how.<\/li>\n
- WP-PageNavi<\/a>. 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.<\/li>\n
- How to customize the pagination blocks inside the Block Editor<\/strong><\/li>\n<\/ul>\n
- Adding a WordPress block<\/strong><\/li>\n<\/ul>\n