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!
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
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 Add The Code Snippets
If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the “Add code to the < head > of your blog” code area.
<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!
Awesome! Thanks a lot!
I hope it works also with the filterable portfolio module by targeting class .et_pb_portfolio_item instead of the article.
Great, thanks for sharing!
Great blog post Nelson, thanks. 🙂
Just one curious thing I noticed, on mobile only, after the first click of the load more button, the button retains it’s on-hover styling.
I guess this is a Divi think, not related to us. You just wouldn’t notice it as much before since the button you click normally goes to an other page.
Unfortunately this didn’t work for me. When I click the load more button, the button simply vanished and no more rows load. Any ideas?
See here: https://www.frictionlessguest.com/podcasts
I checked your link and it is working perfectly!
If you put a number lower than your quantity of articles, in the ‘count articles’ field (maybe the name is different because I have it in spanish) the showing button will only work until that quantity and then the button will disappear. You must put a number higher than your quantity of articles and it will work perfectly.
Yes exactly.
Perfect, thank you!
I have a blog with different sections and want to add the “Load More” feature more than once on a page. The first
“load More” works, but in sections below it fails. ??
Thank you
I have not tried it, but you may need to duplicate everything and make everything unique for each one.
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!
Hi, thanks for the script, it’s great! Question, what if the number of existing items in a category is less than the number specified in initial_row_show, then the load more button is still displayed, how can it be solved that this is only displayed when not all posts are displayed? If all posts in a category are already displayed, this button should not appear. i have different categories with different numbers of posts.
Thank you
Hi Martin!
We will update a solution for the case soon, stay tuned. Thanks!
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?
Hi Blair!
It will need customization which is outside the scope of the guide.
Great tutorial, thanks!
Just a question regarding navigation… If you load a couple of rows / posts and then click on one on desktop, load the page ant then decide to go back, the back button in the browser will take you back to where you were, which is great. But on mobile it seems to reload the page when going back and one is back to the default posts. Is there any way of making this work like it does on desktop?
Hi Ivo!
We don’t have a solution for it right now, but we will surely work on it and update the guide soon.
Thank you!
Hi, great tutorial! Thank you.
I’m just having an issue on mobile, when the user presses the back button in the browser they are not taken back to where they left off, but instead the previous page reloads and scrolls down to the bottom. Any ideas as to why it’s doing this?
Sorry I’m not sure what you mean exactly.
Hi Nelson,
The issue is that when I have a blog page with say 50 posts in it, and I’m only showing 20 at a time, if I load more until say the 50th post, click on that and then decide to go back using the browser back button, I get taken back to the beginning of the blog page as opposed to where I left off, at the 50th post.
Oh well yes, that’s because you are reloading the page.
Hello, how can I make the button not appear if the result is 0 or only 1 row?
Hi Matteo!
We will update a solution for the case soon, stay tuned. Thanks!
Is it possible to use with the portfolio module as well?
I’ve tried using it as it is, but that didn’t work.
This wouldn’t work for other modules as is, sorry.
Can you crate one with using portfolio? im looking for something like this as we are using portfolio
It’s a good idea, I’ll consider it.
Maaaan!!! Thank you so much for this! Wow some days when I am designing a new Divi website I land on your website quite a lot haha you got all the hacks for Divi missing features. Can’t thank you enough :p
You’re most welcome, Martin!
We are glad to know that our guide helped you in some way. Stay tuned for more of such guides.
Hi
I have an interesting issue that I don’t know how to fix myself. Before clicking the ‘load more’ button, there is this huuuuuuge blank space where the full list of posts from the blog module was before I added the button (as if it’s still showing the whole module just not all the posts).
Is there a way to fix this, so the module height follows the amount of posts shown?
Thank you!
Hi Julie!
I made a test/demo page from scratch. The button and blog modules were used. I can’t see any empty space in the layout.
Could you please share the exact page URL where I can see the issue?
Thank you so much !!
What you do for Divi user community is great.
Romain
You are most welcome Romain!
We are glad to know that our guide helped you in some way. Stay tuned for more such guides.
Hello!
Thank you for this guide. It works great for showing one more post, but it won’t show my fourth post. The button disappears and I can not click it again to reveal more posts. I have changed initial_row_show to 2 and row_reveal to 2 but it only shows a total of 3 posts. Also, is there any way to keep the button until all posts are loaded? So everytime I click the button, it will reveal 2 posts at a time. Thank you!
The button does “keep” until all are shown, yes. You can try changing the number of posts shown in the module settings.
I must still be missing something because if I specify how many blog posts are shown per page and it’s less than my total amount of blog posts, the button doesn’t bring up subsequent posts. Can you help: http://www.mariannegoodell.com
Yes please make the number higher in the module than the total posts.
That’s really awesome! Thank you very much!
But, I found that only a few posts are loaded. Is there any way to make the button load infinitely, and only stops when the posts end, for example?
Yes, please check the tutorial closely, this value is available to adjust.
Is there a way to do this for the Divi shop module? I need to be able to continue to press the button to load more and more products as required. I tried it with your code and the button just disappeared.
It is probably possible, we can check on this and if we find a way we can doe a tutorial about it.