Divi – Changing Pagination Text

The Problem

Have a look at this screenshot. See anything annoying?

A lot of people seem to not like how it says “older entries” and “next entries” because.. it.. can’t be changed easily. (ET should really look into that)

So how do we fix this in an easy non-destructive way?

Note: The reason I say “easy non-destructive” is because the only way to edit this at the moment is to either
1. edit the module itself in the parent theme
– Divi > includes > navigation.php
which means it will go away when you update the parent theme, (destructive) or
2. add a function to the child theme’s functions.php file that will override Divi’s navigation.php and load a new one. (not too hard… but not as easy as copy pasting a snippet)

The solution

What we’re going to do is just use CSS to cover up the pagination text and add new letters via pseudo elements. Easy peasy.

.pagination .alignleft a {
	color: rgba(255,255,255,0);
	position: relative;
}
.pagination .alignleft a:after {
	content: "« More Results";
	position: absolute;
	text-align: left;
	width: 200px;
	left: 0;
	color: #111;
}
.pagination .alignright a {
	color: rgba(255,255,255,0);
 	position: relative;
}
.pagination .alignright a:after {
	content: "Previous Results »";
	position: absolute;
	text-align: right;
	width: 200px;
	right: 0;
	color: #111;
}

Of course, if you want to change the text, go ahead and edit the text inside the “” in content: “”;.

• Add it to your custom CSS file in your child theme (Get a free basic child theme here) or..
• Add it to the Custom CSS field in Divi > Theme Options > General or..
• Add it to the Custom CSS field in Appearance > Customize > Additional CSS or...
• You could use a plugin like this one so you can keep the customizations separate from the theme.

(A couple more ways, but I guess this is informative enough? - I personally recommend the child theme option)

If you want to learn how to do all this yourself,

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

PS. If you want to go the php route, add a function named wp_pagenavi and get_template_part it to a new navigation.php in your child theme.

Photo by Thijs Slootjes on Unsplash