You will be able to add a Read More link or a button to your default Divi Category pages after following the steps from the article.
If you have seen the default Category pages in the Divi theme then you will notice that they do not have a Read More link or button after the excerpt like the Blog module. There is also no option in the theme to start showing a read more link on the default category pages.
Obviously after the Divi 4.0 update you can build your own category pages using the Theme Builder with a Blog module. But if you are not ready to start using the theme builder and just want to add a read more link after the excerpt on all your category pages then it can be done using a simple piece of code.
Here is how the read more buttons should look at the end of the tutorial.
Now lets get started with the code.
1. Add Code to Theme Options
Go to your WordPress Dashboard > Theme Options > Integration > Add code to the < head > of your blog and then copy and paste the code below inside it.
<script>
jQuery(function($){
$(document).ready(function(){
$('.category article').each(function(){
let $link=$(this).find(".entry-title a").attr('href');
$(this).append('<a class="cat-read-more" href="'+$link+'">read more</a>');
});
});
});
</script>
To change the text for the read more for the link you just need to replace read more inside the code. If you want it to say continue reading instead then all you need to do is remove read more and type continue reading at its place in the code on Line 6.
That’s it we are done. This will add a read more link right after the excerpt on all your category pages. To learn how to style it lets move to the next part.
2. Styling Read More Link
Adding the jQuery code above will add a read more link right after the excerpt but it will take the styles of a default link on your website. To make it look like a button go to your WordPress Dashboard > Divi > Theme Options > Custom CSS and then add the code below in it.
a.cat-read-more {
text-transform: uppercase;
background: #000000; /*Background color*/
color: #ffffff; /*Text color*/
border: 1px solid black;
padding: 8px;
text-align: center;
display: block;
width:140px;
}
/*Hover Colors*/
a.cat-read-more:hover {
background: #ffffff;
color: #000000;
}
You can change the #ffffff and #000000 values in the code to update the text and background color for the button.
Leave a comment below if you have any questions. Don’t forget to subscribe to the Newsletter to receive the latest tutorials in your inbox.
Thank you for writing this post. Elegant themes sometimes miss the simple things. Searched everywhere for this information. Worked perfectly..