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

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 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!

Last updated Sep 5, 2022 @ 10:52 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.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

43 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
  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
  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

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart