Divi Blog Load More Button
I’m really excited about this one! I’ve seen this request many times, but didn’t get a chance to play around with it until now. So here we go, this tutorial I will show you how to load more posts with a load more button in the Divi Blog module!
▶️ Please watch the video above to get all the exciting details! 👆
1. Add A Blog Module And CSS Class
Add A Blog Module
Start by adding the Divi blog module to your layout. Most likely you already have this added, so you can jump to the next step.
Add A Custom CSS Class To The Blog Module
We need to add a custom CSS class to the Divi Blog module. Using a custom class like this will make sure that our jQuery code only affects the module with this class, rather than affecting other Blog modules on your site.
Open the Divi Blog module settings and go to the Advanced tab and open the CSS ID & Classes toggle. From there, copy and paste or write “pa-blog-load-more” into the CSS Class input field, as shown in the screenshot.
Make Sure Pagination Is Off
For obvious reasons, the pagination option needs to be off in the module for our load more button to work. So just double check that.
2. Add A Button And CSS ID
Add A Button Module Below The Blog Module
We are going to use a regular Divi button for the read more button. This is great because it allows you to style it however you want with normal Divi settings. The only important thing is to add the button below the blog module.
Add A Custom CSS ID To The Button Module
Next, we need to add a custom CSS ID to the Divi Button module. This is needed to properly link the button and the blog. Take note that this is an ID, not a class.
Open the Divi Button module settings and go to the Advanced tab and open the CSS ID & Classes toggle. From there, copy and paste or write “pa_load_more” into the CSS ID input field, as shown in the screenshot.
3. Add The jQuery Snippet
Now that you have added the custom CSS class and ID to the modules, you can proceed to copy and paste the snippet below into your website, and your blog feed will have a functioning read more button!
Where To Paste The jQuery Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the jQuery tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the scripts.js file (don't forget to remove the <script> tags at the beginning and end). If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
<script>
jQuery(document).ready(function(){
//For mobile Screens
if (window.matchMedia('(max-width: 767px)').matches) {
var initial_show_article = 3;
var article_reveal = 2;
jQuery(".pa-blog-load-more article").not( ":nth-child(-n+"+initial_show_article+")" ).css("display","none");
jQuery("#pa_load_more").on("click", function(event){
event.preventDefault();
initial_show_article = initial_show_article + article_reveal;
jQuery(".pa-blog-load-more article").css("display","block");
jQuery(".pa-blog-load-more article").not( ":nth-child(-n+"+initial_show_article+")" ).css("display","none");
var articles_num = jQuery(".pa-blog-load-more article").not('[style*="display: block"]').length
if(articles_num == 0){
jQuery(this).css("display","none");
}
})
} else {
//For desktop Screens
var initial_row_show = 1;
var row_reveal = 2;
var total_articles = jQuery(".pa-blog-load-more article").length;
jQuery(".pa-blog-load-more article").not( ":nth-child(-n+"+initial_row_show+")" ).css("display","none");
jQuery("#pa_load_more").on("click", function(event){
event.preventDefault();
initial_row_show = initial_row_show + row_reveal;
jQuery(".pa-blog-load-more article").css("display","block");
jQuery(".pa-blog-load-more article").not( ":nth-child(-n+"+initial_row_show+")" ).css("display","none");
var articles_num = jQuery(".pa-blog-load-more article").not('[style*="display: block"]').length
if(articles_num == 0){
jQuery(this).css("display","none");
}
})
}
})
</script>In the above jQuery snippet there are four values where initial_show_article and article_reveal are for mobile screens and initial_row_show and row_reveal are for desktop screens. Changing these values will change the number of articles that will be visible on page load, and how many articles will be revealed each time you click the load more button.
Be sure to watch the video to see all of this live and in action! Let me know in the comments if you enjoyed this!
Not having ever done infinite scroll before is it easy enough to use this code to make it infinite scroll rather than clicking a button?
Hi Tim!
Infinite scroll is not an option in the customization yet. However, you can use a third-party plugin for now for such options.
how easy would it be to add a fade effect or other types of animations for the posts/rows when you click the show more button?
I figured out how to do this using this tutorial as a base!
Hi Blair!
It will need customization which is outside the scope of the guide.
Hi Nelson,
i love this tutorial and your whole YouTube Channel thank you so much for that!!!
Actually i have a customer who wants this “load more button” for the Gallery Module
(https://diviextended.com/product/divi-gallery-extended/)
Is it also possible to use it for this module without much efford?
We needed this module because of the functionality to add a custom link to each image, it works instead of a blog module because we wanted to have the masonry layout and i couldnt find anything better 🙂 it works perfect, just the “load more button” would be so great.
Dont know if you also help with “custom jobs” as a programmer. Please let me know.
Kind regards and best wishes
Nadine
Currently I don’t have any solution for the gallery, but it is a great idea to consider!