How To Add A Load More Posts Button To The Divi Blog Module Tutorial by Pee Aye Creative

How To Add A Load More Posts Button To The Divi Blog Module

Nelson Miller Pee Aye Creative
In this tutorial I will show you how to add an infinite load more button to the Divi Blog module to click to load more posts in the feed.

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.

add a load more button to the Divi Blog module

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.

add CSS ID for a load more button to the Divi Blog module

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!

Last updated Oct 10, 2023 @ 1:32 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.
Pee Aye Creative Black Friday Sale

Our Once A Year Sale Is Happening Now!!!

25% OFF all Divi Plugins, Courses, and Child Themes!

Shop The Sale Now!

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Pee Aye Creative Black Friday Sale

Our Once A Year Sale Is Happening Now!!!

25% OFF all Divi Plugins, Courses, and Child Themes!

Shop The Sale Now!

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

73 Comments

  1. Senan

    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.

    Reply
    • Sunset

      How to show it ???

      Reply
    • Sunsetee

      How to do it on portfolio module?

      Reply
      • Hemant Gaba

        We will surely provide a guide for the Portfolio module in the future!

  2. Paul

    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.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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.

      Reply
  3. Noel Triguero

    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.

    Reply
  4. Jesse

    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

    Reply
  5. Nadine Jehle

    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

    Reply
  6. Martin

    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

    Reply
    • Hemant Gaba

      Hi Martin!

      We will update a solution for the case soon, stay tuned. Thanks!

      Reply
  7. Blair

    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?

    Reply
    • Hemant Gaba

      Hi Blair!

      It will need customization which is outside the scope of the guide.

      Reply
  8. Ivo

    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?

    Reply
    • Hemant Gaba

      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!

      Reply
  9. Ivo

    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?

    Reply
      • Ivo

        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.

  10. Matteo

    Hello, how can I make the button not appear if the result is 0 or only 1 row?

    Reply
    • Hemant Gaba

      Hi Matteo!

      We will update a solution for the case soon, stay tuned. Thanks!

      Reply
      • Rachel

        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 🙂

  11. Aske

    Is it possible to use with the portfolio module as well?
    I’ve tried using it as it is, but that didn’t work.

    Reply
  12. Martin

    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

    Reply
    • Hemant Gaba

      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.

      Reply
  13. Julie

    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!

    Reply
    • Hemant Gaba

      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?

      Reply
  14. Romain

    Thank you so much !!
    What you do for Divi user community is great.

    Romain

    Reply
    • Hemant Gaba

      You are most welcome Romain!

      We are glad to know that our guide helped you in some way. Stay tuned for more such guides.

      Reply
  15. Melody

    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!

    Reply
  16. Marianne

    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

    Reply
  17. Marcos A.T. silva

    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?

    Reply
  18. Terrell King

    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.

    Reply
  19. house

    My LOAD MORE button disappears and nothing happens when clicked…?

    Is anyone else having this issue… fixed?

    ty

    Reply
    • Hemant Gaba

      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?

      Reply
  20. Jay

    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?

    Reply
    • Hemant Gaba

      Hi Jay!

      Thank you for letting us know. We’ll look into the issue further and provide a fix soon!

      Reply
      • Rachel

        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!

      • Hemant Gaba

        Hi Rachel!

        The issue is still under progress at our developers end and soon a fix will be provided.

    • Hemant Gaba

      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.

      Reply
      • Dima

        There are several posts, I think four.

      • Hemant Gaba

        I’m not able to see the articles in the chrome inspector. Make sure all the posts are published.

      • Hemant Gaba

        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?

  21. Muhammad Tayyab

    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,

    Reply
    • Hemant Gaba

      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?

      Reply
  22. Tim Sutherland

    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?

    Reply
    • Hemant Gaba

      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.

      Reply
  23. Lance

    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.

    Reply
    • Hemant Gaba

      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.

      Reply
  24. Tim Feather

    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?

    Reply
    • Hemant Gaba

      Hi Tim!

      We’re aware of the bug and will provide a solution soon. Apologies for the inconvenience!

      Reply
  25. Rockstar

    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

    Reply
    • Hemant Gaba

      Hi Rockstar!

      We’re aware of such bug. Can you share the page URL to check the layout you’re using?

      Reply
      • Rockstar

        The URL is under my name of this comment

      • Hemant Gaba

        Sorry, the URL seems to be missing above. Can you please share it again?

  26. Zeeshan A.

    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.

    Reply
    • Hemant Gaba

      Thank you, Zeeshan for sharing the insight. We’ll look forward to it.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart