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 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!
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!
How to show it ???
How to do it on portfolio module?
We will surely provide a guide for the Portfolio module in the future!
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!
Hi Hemat, just wondering if there was an updated solution for this option? Would be fab if you have one please! As always, thank you all for your great tutorials, they are so helpful 🙂
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.
My LOAD MORE button disappears and nothing happens when clicked…?
Is anyone else having this issue… fixed?
ty
HI House!
Please make sure more posts are there to display which are hidden in initial load so that the button click can show them. If yes, can you please share the URL of the page so that I can check again?
Thanks for this Nelson – it took me a while to get it working, but it’s awesome! However, one thing that I haven’t resolved is that I also have the equalize blog grid height (by the way your title is missing a ‘t’ https://www.peeayecreative.com/how-to-make-the-divi-blog-grid-equal-height/) and it works great except when I LOAD MORE on the second hit, it staggers them again (presumably because the title/blurb is longer on some posts). Any advise on what’s happening and how to fix it?
Hi Jay!
Thank you for letting us know. We’ll look into the issue further and provide a fix soon!
Hi Hemant, did you find a fix for the issue Jay mentions? We have the same issue! Many thanks for all your helpful info, its much appreciated!
Hi Rachel!
The issue is still under progress at our developers end and soon a fix will be provided.
Hi, thanks for the button, but it nothing happens when I clicked on it.
https://bau-rockstars.de/software/
Hi Dima!
I can see that only three posts are present in the Blog module on the page. The need to add more posts or make sure no post count limit is set in the Blog module settings.
There are several posts, I think four.
I’m not able to see the articles in the chrome inspector. Make sure all the posts are published.
Hi, yes, all of them are published. I tried it on another page, but it is the same issue.
https://bau-rockstars.de/category/cafm/
The posts in Blog module are divided into columns. Can you please undo that customization that seems to be causing the issue? Also, how many posts are available in this category?
Thanks for great solution. I tried it but have a problem yet, I am using full-width blog with left side image, and when I applied the code, blogs load more 2 but this time they shows image on top and contents on bottom,
Hi Muhammad!
Yes, we understand that the customization has issues with the full-width Blog layout. However, can you please share the page URL so we can check and provide a fix for it?
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.
Hi Nelson,
The Divi Blog Post Count settings seems to play a role in my configuration. I understood from your video that it should not.
For me, Post Count limits the amount of Posts your Load More will display. So if I have 200 posts but that my Blog Post Count is set to 10 (default), when I run your Load More script for the Desktop configuration (with settings: 1 row of 3 (initial) and 2 more rows at each button click), the button disappears when the 10th post is displayed.
So I have to increase the Post Count in the Blog settings if I want to display more items.
Hi Lance!
Please note that the Post count setting in the Blog module overrides our customization and the limit will be set according to it.
Hi Nelson, Really appreciate your wisdom and extensive library of Divi content. I am trying to utilize this solution along with your 2 column css (column-count: 2; column-gap: 60px;) but this results in content splitting from one column into the the next. Would love to keep the title, meta and excerpt for each post in the same column. Any thoughts on this?
Hi Tim!
We’re aware of the bug and will provide a solution soon. Apologies for the inconvenience!
I have a small problem. I use a design to place my post under the categories as shown in the link (Website). Now I also use your script for the button to roll up further posts in this category. The problem is that when I press the button, the display of my posts changes. Pay attention to the order of title and image.
What could be the cause and how can I solve the problem?
Thank you
Hi Rockstar!
We’re aware of such bug. Can you share the page URL to check the layout you’re using?
The URL is under my name of this comment
Sorry, the URL seems to be missing above. Can you please share it again?
This is not good if someone has many posts. It loads all the posts and hides them with CSS. An ajax load will take less time to load the page and will also not create DOM issues.
Thank you, Zeeshan for sharing the insight. We’ll look forward to it.