Customize Divi’s Read More Link

Divi’s is arguably the best WordPress theme for developers and first-time users alike. Its customizability and flexibility to suit a number of roles and designs is unlike any other theme that I have used. However, with smaller details it still lacks professionalism. The “read more” link present on Divi’s blog module is prime example of this. Today I am going to show you how to modify the what is displayed by the “read more” link and how to stylize the output to make it more professional. Let’s get started.

Solution #1 – Capitalizing “read more”

Many users simply just want the ‘r’ and the ‘m’ to be capitalized to promote a more professional look. I’ve got good news! This is a very simple modification. The first thing that you need to do is to go to a page on your website with a blog module and open its settings. On the “Content” tab, make sure that the read more button is enabled under the “Elements” dropdown. Then click on the “Advanced” tab and open the “Custom CSS” dropdown. Scroll down to the very last box titled “Read More Button.”

 Make sure that the “Read More” button is turned on for you blog module.

Make sure that the “Read More” button is turned on for you blog module.

 Navigate to the “Advanced” tab and open the “Custom CSS” dropdown and scroll down until you find “Read More Button” at the bottom of the list.

Navigate to the “Advanced” tab and open the “Custom CSS” dropdown and scroll down until you find “Read More Button” at the bottom of the list.

If you would like the read more button to say “Read More” enter the CSS code below into the “Read More Button” custom CSS box and then press the green button.

text-transform: capitalize;
 Enter the above code into the “Read More Button” custom CSS box and click the green button.

Enter the above code into the “Read More Button” custom CSS box and click the green button.

 Your read more button should now display “Read More” instead of “read more.”

Your read more button should now display “Read More” instead of “read more.”

If you would like the read more button to say “READ MORE” enter this phrase in the “Read More Button” custom CSS box instead of the previous CSS code.

text-transform: uppercase;
 Enter the above code into the “Read More Button” custom CSS box and click the green button.

Enter the above code into the “Read More Button” custom CSS box and click the green button.

 Your read more button should now display “READ MORE” instead of “read more.”

Your read more button should now display “READ MORE” instead of “read more.”

Congratulations! You have successfully changed Divi’s read more link to look that much more professional! But what if you need to change what the “read more” link says. For example, what if you needed it to say, “Learn More?”

 Well, you can accomplish this too. It is a more involved process, but once you get the hang of it, it can completely change a site. Let me show you how it’s done!

Solution #2 – Changing the Phrase

The first thing that you need to do is to go to a page on your website with a blog module and open its settings. On the “Content” tab, make sure that the read more button is enabled under the “Elements” dropdown. Then click on the “Advanced” tab and open the “CSS ID & Classes” dropdown. Add the class listed below to the “CSS Class” field. Then click the green check button to save your changes.

more-link    
 Open the settings for your desired blog module and navigate to the “Advanced” tab.

Open the settings for your desired blog module and navigate to the “Advanced” tab.

 Open the “CSS ID & Classes” dropdown and add the “more-link” CSS Class.

Open the “CSS ID & Classes” dropdown and add the “more-link” CSS Class.

Next, navigate to your list of pages on the backend of your Wordpress site. This can be done by clicking on “Pages” on the black admin sidebar.

Hover over the name of the page that you have your blog module on. In the bottom left of your screen you should see a URL appear when you leave you mouse hovering over the name of the page. Look for a post ID number for that page. Every page has a unique number. This will occur after your URL in a format similar to the photo below: www.yourdomain.com/wp-admin/?post=YOURNUMBERHERE. Please make note of this number as we will need it in just a second.

Screen Shot 2018-10-07 at 12.49.06 PM.png

Now, click on Divi in the left-hand sidebar of your WordPress backend. Once the page loads, click on the “Integrations” tab.

Screen Shot 2018-10-07 at 12.56.00 PM.png
Screen Shot 2018-10-07 at 12.56.11 PM.png

Next, on the Integrations page, look for the section labeled “Add code to the < head > of your blog” (it is the first black box on the page). Then enter the Java Script and CSS code listed below into the box. NOTE: Replace the phrase“YOURPAGEID” with the number you just wrote down from the last step. Replace the phrase “Read More >” with whatever you would like the read more link to say. Make sure to leave the single quotation marks.

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("body.page-id-YOURPAGEID a.more-link").text('Read More >');
});
</script>

Then scroll to the bottom of the page and click “Save Changes.” Once the page refreshes, navigate back to the page that you have your blog module on. It should now whatever you entered in the code displayed instead of “read more.”

Screen Shot 2018-10-07 at 1.02.23 PM.png

Ideally, you would go in and edit the theme files when a site change such as this needs to be made. However, not everyone has the skillset or time to do this. Using JavaScript with a query on a site is not ideal, but by getting the page-id for the specific page and using CSS to limit what can be changed we prevent any potentially serious changes from occurring. If you need to replicate this on multiple pages, simply just repeat these steps for each page, or look into editing your theme files.

Elegant Themes, the creators of Divi, have no excuse for not already having this functionality in their settings for each blog module. It is only a matter of time before they do add this feature, but until that day here are two fairly easy work arounds.

If you have any questions or need help, please feel free to leave a comment below!

What is your biggest gripe with Divi? Let myself and other readers know below!