How to Add a Load More Button in Divi Blog Module

The Divi Blog module is a powerful tool for displaying blog posts on your website. However, when displaying a series of blog posts, the standard pagination method might leave you wanting more. Traditional “Previous” and “Next” buttons are functional but may not offer the seamless browsing experience you desire.

This article will show you how to add the “Load More” button in the Divi Blog module.

Steps to Add Load More Posts Button in Divi Blog Module

Step 1: Disable the Pagination

First, ensure to turn off the pagination option on your Blog module. For your load more button to function correctly, the module’s pagination option must be disabled.

Next, go to the Divi Builder, add a new Blog module, or select the existing one.

On the module settings, navigate to the Content tab -> Elements. Afterward, set the Show Pagination to NO.

Step 2: Add the CSS Class Name

Alright, now we move on to the next step. It’s time to add the unique CSS class name to the Blog module that you want to add a load more posts button.

Go to the Advanced tab -> CSS ID & Classes on the module settings. Afterward, add the ap_load_more_blog_class CSS class name to the CSS Class input field.

Step 3: Add the Button Module

Below the Blog module, add a Button module. We will use a Divi Button module for the load more button. Tweak and style up your load more button as you like.

Once you add the Button module below the Blog module, add the custom CSS ID to the Button module to link the blog and button properly.

On the Button module settings, navigate to the Advanced tab -> CSS ID & Classes. Afterward, add the ap_load_more_button_id CSS ID to the CSS ID field.

Step 4: Add the JavaScript Snippet

Once you add the CSS class to the Blog and CSS ID to the Button module, we will add the JavaScript snippet to your Divi Theme Options.

Go to the Divi Theme Options page (Divi -> Theme Options) and navigate to the Integration tab. Next, paste the JavaScript snippet below into the Add code to the < head > of your blog field.

<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(".ap_load_more_blog_class article").not( ":nth-child(-n+"+initial_show_article+")" ).css("display","none");
    jQuery("#ap_load_more_button_id").on("click", function(event){
        event.preventDefault();
        initial_show_article = initial_show_article + article_reveal;
        jQuery(".ap_load_more_blog_class article").css("display","block");
        jQuery(".ap_load_more_blog_class article").not( ":nth-child(-n+"+initial_show_article+")" ).css("display","none");
        var articles_num = jQuery(".ap_load_more_blog_class article").not('[style*="display: block"]').length
            if(articles_num == 0){
            jQuery(this).css("display","none");    
            }   
    })
    } else {
        //For desktop Screens
        var initial_row_show = 2;
        var row_reveal = 1;
        var total_articles = jQuery(".ap_load_more_blog_class article").length;
        jQuery(".ap_load_more_blog_class article").not( ":nth-child(-n+"+initial_row_show+")" ).css("display","none");
        
        jQuery("#ap_load_more_button_id").on("click", function(event){
            event.preventDefault();
            initial_row_show = initial_row_show + row_reveal;
            jQuery(".ap_load_more_blog_class article").css("display","block");
            jQuery(".ap_load_more_blog_class article").not( ":nth-child(-n+"+initial_row_show+")" ).css("display","none");
            var articles_num = jQuery(".ap_load_more_blog_class article").not('[style*="display: block"]').length
            if(articles_num == 0){
            jQuery(this).css("display","none");    
            }    
        })
    } 
})
</script>

Once the JavaScript snippet is added, apply the changes by clicking the Save Changes button.

Return to your Blog page, preview it in a new tab or window, and you will see that the load more button works perfectly.

Note: initial_show_article and article_reveal are for mobile devices, whereas initial_row_show and row_reveal are for desktop screens in the jQuery sample above. You can change the value as you prefer.

In this example, we set initial_show_article = 3 and article_reveal = 2 for mobile screens. This means three articles will appear on the initial page, increasing to two each time the users click the load more button.

For the desktop screens, we set initial_row_show = 3 and row_reveal = 1. This means that two rows will appear on the initial page, increasing one row each time the users click the load more button.

The Bottom Line

Adding a load more posts button to your Divi Blog module is a great way to let visitors view more posts easily. By following the steps outlined in this article, you can easily add this feature to your website and improve the user experience for your readers.

If you often create WordPress websites with Divi, you can use Divi Cloud for time efficiency. You can store your Divi assets (layouts, theme builder templates, code snippets, etc.) in the cloud and access any website you create.