It is easy to add pagination to blog pages in the Divi theme simply by installing the free WP-PageNavi plugin, as outlined in this post by Elegant Themes.
I just wanted to share an example of styling the pagination, in case it helps anyone.
Here is how the pagination appears when the plugin is installed on Divi:
Now let's apply the following CSS, which makes several changes (as detailed in the code comments):
/* === Style WP-PageNavi Pagination === */
/* Center the pagination */
.wp-pagenavi { text-align:center; }
/* Add a border */
.wp-pagenavi span, .wp-pagenavi a, .wp-pagenavi :last-child {
border: 1px solid #bbb !important;
padding: 6px 12px;
margin: 0;
}
.wp-pagenavi span, .wp-pagenavi a { border-right: none !important; }
/* Style the default text */
.wp-pagenavi span, .wp-pagenavi a {
font-weight: bold !important;
color: #999 !important
}
/* Style the current / hovered page link */
.wp-pagenavi span.current,
.wp-pagenavi a:hover {
color: #666 !important;
background-color: #ddd !important;
}
/* Style the page count text */
.wp-pagenavi :first-child { color: #666 !important; }
/* Add text to the "next" link */
.wp-pagenavi .nextpostslink:before { content: 'Next '; }
.wp-pagenavi .previouspostslink:after { content: ' Prev'; }Related Post: Adding CSS to the Divi Theme
This gives the following result:
Hopefully that gives you a bit of a head-start in styling your own Divi pagination.
A couple of notes:
- I suggest disabling the "Use pagenavi-css.css" option in the WP-PageNavi settings as it seems to be unnecessary (Divi seems to apply the default pagenavi styles for you)
- While I've done it via CSS, you can also configure the "Next" / "Prev" text from the WP-PageNavi settings. I've used CSS mainly to illustrate that it can be done this way.
- I haven't yet included this in Divi Booster, but if you'd like to see me do so, please let me know in the comments.
Hello, Is there a way to add spacing between the "Previous" and "Next" Page Links.
I want the Previous Link to be shown left and the Next Page Link to be shown right.
Hey gabriel, is there any chance you're able to send through a link to an example page, so that I can make sure I give you the right advice for your setup? Thanks!
Hi !
I have a filterable portfolio halfway a page with pagination turned on.
When i use pagination it takes me to the top of the page; not showing the portfolio…
Any idea?
Regards Tim
Hey Tim, my guess would be that there's a JavaScript error on the page which is preventing the code to handle the same-page pagination from running. As such, the pagination links would revert to the default link behavior of linking to the current page. You may be able to track down the source of the error by looking in your browser's JavaScript console. If you're able to share a link to the page you're working on I'll be happy to take a look. Cheers!
I got divi and is great
Thanks so much for sharing this! :-)
Wow, that worked perfectly, thanks!
Hi Dan,
Great its working well :-) https://www.trafficprisma.de/magazin/page/10/ but a question: there is a small line over the pagination, howcan we delete this line? and how can we reduce the space down to the orange stripe under the pagination? can we solve this also with a css-snippet?!
Best Regards
Tobias
Hey Tobias, I'm glad that worked. You should be able to remove the line above the pagination and reduce the space below it with this CSS:
.wp-pagenavi { border-top: 0px; margin-bottom: 0px; }Thanks for the code and idea to style the pagination! But where should i copy the code? In Divi "Theme Options" Custom-CSS Field? Or should i create a new css file?! Thanks for any suggestions!
Regards
Tobias
Hey Tobias, yes you can add it in the Divi "Theme Options" Custom-CSS Field. That's probably the easiest option. If you are using a child theme, you could alternatively add it to the end of its style.css file.
I have to try this! Great work!