How to add blog pagination in Divi

If you have 50 blog posts on your website, rather than displaying all 50 on a single blog page you will want to split them up into smaller sets.

By default in Divi, users can navigate from the first set of posts to the next set of posts via a text link saying Older Entries.

Users can then also go back to the newer posts via a text that says Next Entries.

Pagination expands this basic Divi blog post navigation to give each page a number so users can jump to any page in the sequence to find the blog posts they need.

• How to add numbered pagination to Divi
• How to style the Divi pagination numbers

What is pagination?

Pagination is a system that allows you to split up your Divi blog post listings across multiple pages when there are too many to fit onto a single page. To navigate between these pages there is a number-based navigation system that links to each of the pages in the sequence so users can easily see where they are in the sequence and navigate between the pages easily.

Why use pagination?

Because pagination allows you to split your blog post content across multiple pages it is easier for your users to navigate and find the posts they need.

Having fewer posts per page will also help speed up your website as less content needs to be loaded on each page.

Does Divi come with pagination?

Basic text navigation is available with the Divi blog module by default which uses Older Entries and Next Entries text links as in the image below.

This text navigation method is better than nothing but does not indicate to the user how many more pages of content there are nor the current page the user is on in the sequence of posts.

In order to add a more feature-rich numbered pagination for your blog page layout you will need to install a free plugin called WP-PageNavi.

How to add numbered pagination to the Divi Blog module

The following steps will show you how how to add numbered pagination to your Divi blog page.

1. Add a Divi blog module to your page where you want to display your blog posts.
2. Set the number of blog posts to display per page in the Divi blog module options in the Blog Settings > Content > Post Count. In order for pagination to happen you will need to actually have more posts published than the page limit that is set.
   
3. Check that the pagination option is enabled in the Divi blog module options area in Blog Settings > Elements > Show Pagination. If you view your blog now it should have the Older Entries text link on the first page and both the Older Entries and Next Entries on subsequent pages.
   
4. Navigate to Plugins > Add New in your WordPress dashboard and search for WP-PageNavi. Click the install button and then the activate button once installed. Your blog will now have numbered pagination rather than the Older and next entries text.
   

As you can see, it is very easy to add pagination to Divi using the WP-PageNavi plugin.

Just install and activate this free Divi-compatible plugin and the pagination numbers will be added automatically.

Styling the WP-Pagenavi pagination

You are also able to edit various pagination settings via the WP-PageNavi dashboard as you can see below. The top section allows you to change the link text and characters for the pagination. An interesting option below this is to change the Page Navigation Style from sequentially numbered links to a dropdown of page links.

In order to style the pagination further you will need to add some custom CSS to Divi.

As you can see from the live pagination in use on our Divi blog page it is possible to change the styling from the default t match your own website.

As a starting point for your own customization you can take a look at the custom CSS used for our website below;

 /*blog pagination*/
.wp-pagenavi a, .wp-pagenavi span {
padding: 10px; margin-right: 0px;
font-size: 15px; color: #afafaf; text-decoration: none;
border: 1px solid #ccc; -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
background: #ff6652;
color: #ffffff !important;
border: 1px solid #AFAFAF;
}
.wp-pagenavi span.current { font-weight: bold; color: #ffffff !important; }

Final Thoughts

Adding pagination to your Divi website blog is a simple process that can improve the user experience for your visitors. By following the steps outlined above, you can easily add pagination to your site with a free plugin and make it easier for visitors to find the content they’re looking for.

Have you added pagination? If you have a great example of it in use drop a link in the comments below.