Like our free content? Then you'll love our exclusive Club!
Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!
I have seen a fair few questions lately about how to change the text of the read more and pagination links in blog posts.
There are some solutions around, but the main issue I have seen with these is that they don’t work now the blog module uses ajax to load the next page of posts.
So in this Quick Snack, I am going to show you how to change that text (and the text of any other element) using 2 methods. One is with jQuery, and the other with PHP. Plus I will explain when to use each one.
So let’s get cooking!
Ingredients
The Divi Theme from Elegant Themes.
If you go the PHP route, you will need to be using a child theme.
Cooking time
Less than 5 minutes!
Preparation
There is no prep
Method
jQuery Method
We will start with the jQuery method. Firstly, we are going to change the read more text.
We are targetting the .et_pb_post a.more-link element which will cover your blog page, as well as all your archive, category, tag, author and search results pages (if you have the read more link included). What we are saying is; for each instance of read more, replace the text with Continue Reading. Note that these strings are case sensitive, so if you used Read More, it won’t work.
//Replace read more link text $(".et_pb_post a.more-link").html(function () { return $(this).html().replace('read more', 'Continue Reading'); });
Next we will change the pagination links.
We are targetting the .pagination a links inside .et_pb_ajax_pagination_container which will cover your blog page, and then .archive and .search which will cover all your archive, category, tag, author and search results pages (if you have the read more link included).
We are saying; for each pagination link, replace the arrows with nothing (essentially removing them), replace Older Entries with Older Posts and replace Next Entries with Newer Posts.
//Replace blog pagination text $(".et_pb_ajax_pagination_container .pagination a, .archive .pagination a, .search .pagination a").html(function () { return $(this).html().replace('«', '').replace('»', '').replace('Older Entries', 'Older Posts').replace('Next Entries', 'Newer Posts') });
If you want to keep the arrows, you can simply remove this section of the code: .replace(‘«’, ”).replace(‘»’, ”)
Or, if you want to change the arrows to something else, a single arrow for example, you can add what you want between the empty quotes like this: .replace(‘«’, ‘<‘).replace(‘»’, ‘>’)
Now we need to define when our code should be applied.
So what we are doing here is wrapping all of our code in the .on event handler, and then adding the ready and ajaxComplete events. This will ensure our code is executed both on page load, and when ajax is used for pagination.
<script> jQuery(document).on('ready ajaxComplete', function () { //Replace read more link text $(".et_pb_post a.more-link").html(function () { return $(this).html().replace('read more', 'Continue Reading'); }); //Replace blog pagination text $(".et_pb_ajax_pagination_container .pagination a, .archive .pagination a, .search .pagination a").html(function () { return $(this).html().replace('«', '').replace('»', '').replace('Older Entries', 'Older Posts').replace('Next Entries', 'Newer Posts'); }); }); </script>
We have also included opening and closing script tags. These are needed if you are adding this to Divi > Theme Options > Integration > Add to Head. If you are adding to a custom .js file, then omit the script tags.
You can use this method for any text string you want to replace, you simply need to find the correct selector and current text.
When you should use the jQuery Method
Use jQuery when you just want to change text for elements on the front end, if you are not comfortable editing functions.php or are not using a child theme.
PHP Method
The PHP method is similar in that we will create a function that filters text strings, and replaces them with alternative text.
However, use this method wisely, as it will replace every instance of the text string in both the front and backend. So if for instance, you replace a text string that you may have also used in your content, that text will be replaced too.
What we are saying is, for each instance of read more, « Older Entries and Next Entries », replace that text with Continue Reading, < Older Posts and Newer Posts > respectively.
function ds_translate_text($translated) { $translated = str_ireplace('read more', 'Continue Reading', $translated); $translated = str_ireplace('« Older Entries', '< Older Posts', $translated); $translated = str_ireplace('Next Entries »', 'Newer Posts >', $translated); return $translated; } add_filter('gettext', 'ds_translate_text'); add_filter('ngettext', 'ds_translate_text');
You can copy the code above directly to the bottom of your child theme functons.php file.
When you should use the PHP Method
You can use the PHP method if you have a lot of text strings you want to replace, as its simple to just copy and paste and then change the strings, they will all be together in one place and you don’t need to use any selectors.
It can also be very handy for foreign language sites, where you may be using plugins that do not fully translate all of your text and you have a few specific words you need to change.
But as I mentioned previously, be careful with this method as it will change the text everywhere it appears.
And that’s it!
If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.
Michelle X
can i just style the pagination text via css?
Yes, you can. This recipe is for changing the actual text.
Thanks very much for this! I was looking for a way to do this easily (preferable non-PHP). Great stuff!
Hi Michelle,
Thanks so very much for this, and all your wonderful tutorials! You are the best.
I saw that you said this technique can be applied to any text, but I’m not quite sure how. Do I add what I want to replace to the examples already included, or paste the whole code sequence in again using the new target text?
I want to change the title text of the Comment Form, from ‘Submit A Comment’ to ‘Leave A Comment’.
Thanks again!
I am assuming you are using the jQuery solution, so you can just add if you want this as an additonal change:
Hi Michelle :)!!
Sorry it’s me again the parser has cut my code due to <… Sorry
So I try to repost it but with html entities this time…
Great! Thanks for sharing it with us :D.
You can “simplify” your replace by using two arrays ;), like this :
function ds_translate_text($translated) {
$search_for = array ( ‘read more’, ‘« Older Entries’, ‘Next Entries »’ );
$replace_by = array ( ‘Continue Reading’, ‘< Older Posts’, ‘Newer Posts >’);
$translated = str_replace ( $search_for, $replace_by, $translated );
return $translated;
}
Have a great day Michelle :D!!
Hi Michelle !!
Great! Thanks for sharing it with us :D.
You can “simplify” your replace by using two arrays ;), like this :
[code]
function ds_translate_text($translated) {
$search_for = array ( ‘read more’, ‘« Older Entries’, ‘Next Entries »’ );
$replace_by = array ( ‘Continue Reading’, ”);
$translated = str_replace ( $search_for, $replace_by, $translated );
return $translated;
}
[/code]
Have a great day Michelle :D!!
I wonder why so simple things like button-texts are not changeable via language files?
Why do you need additional JS-gymnastics or PHP-functions?
The standard method should be via languagefile, is this not possible with that text?