Follow us

Change the Read More Text and Other Elements in Divi | Divi Soup

Want to learn how to use CSS with Divi?

Our CSS & Divi Beginner Course is now open for enrollment!

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 wink

 

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. smile

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a mother of two beautiful girls and two cheeky Black Labradors called Harley & Chaz. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

Related Posts

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!

Pin It on Pinterest

Sharing is caring

Share this post with your friends!