How to Load More Posts using Ajax with a Button or on Scroll in WordPress

WordPress / Web Development Tutorials
(Best WordPress Tutorials)

CSS HTML JavaScript jQuery MySQL PHP Silva Technologies WooCommerce Wordpress

How to Load More Posts using Ajax with a Button or on Scroll in WordPress

Posted on 22nd January 202117th March 2021

Updated: 22/01/2021 – Further clarification has been added on the setup of this script.

In today’s post, we will show you how to create a load more button to show additional posts or custom post types using AJAX.

The benefit of this is that it will improve the page-load of the particular page as it will only be displaying a certain amount of posts before having to load any more of the content (especially when you are loading images).

So let’s get started…

So the first thing that you should have is a list of posts to display on the frontend as follows:-


    <div id="ajax-posts" class="row">
        <?php
            $postsPerPage = 3;
            $args = array(
                    'post_type' => 'post',
                    'posts_per_page' => $postsPerPage,
            );

            $loop = new WP_Query($args);

            while ($loop->have_posts()) : $loop->the_post();
        ?>

         <div class="small-12 large-4 columns">
                <h1><?php the_title(); ?></h1>
                <p><?php the_content(); ?></p>
         </div>

         <?php
                endwhile;
        wp_reset_postdata();
         ?>
    </div>
    <div id="more_posts">Load More</div>

Then you want to add the following code in your functions.php file where you register the scripts:


	wp_localize_script( 'core-js', 'ajax_posts', array(
	    'ajaxurl' => admin_url( 'admin-ajax.php' ),
	    'noposts' => __('No older posts found', 'twentyfifteen'),
	));

NOTE: You will need to replace code-js with the file you are going to be adding the JS code later in this tutorial.

We added it to a file called core.js, and the reason we added code-js is that we enqueued the script as follows:


	wp_register_script( 'core-js', get_template_directory_uri() . '/assets/js/core.js');
	wp_enqueue_script( 'core-js' );

Right after the existing wp_localize_script. This will load WordPress own admin-ajax.php so that we can use it when we call it in our ajax call.

At the end of the functions.php file, you need to add the function that will load your posts:-


function more_post_ajax(){

    $ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 3;
    $page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;

    header("Content-Type: text/html");

    $args = array(
        'suppress_filters' => true,
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'paged'    => $page,
    );

    $loop = new WP_Query($args);

    $out = '';

    if ($loop -> have_posts()) :  while ($loop -> have_posts()) : $loop -> the_post();
        $out .= '<div class="small-12 large-4 columns">
                <h1>'.get_the_title().'</h1>
                <p>'.get_the_content().'</p>
         </div>';

    endwhile;
    endif;
    wp_reset_postdata();
    die($out);
}

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

The final part is the ajax itself. In functions.js or your main JavaScript/jQuery file, you need to input inside the $(document).ready(); environment the following code:-


var ppp = 3; // Post per page
var pageNumber = 1;


function load_posts(){
    pageNumber++;
    var str = '&pageNumber=' + pageNumber + '&ppp=' + ppp + '&action=more_post_ajax';
    $.ajax({
        type: "POST",
        dataType: "html",
        url: ajax_posts.ajaxurl,
        data: str,
        success: function(data){
            var $data = $(data);
            if($data.length){
                $("#ajax-posts").append($data);
                $("#more_posts").attr("disabled",false);
            } else{
                $("#more_posts").attr("disabled",true);
            }
        },
        error : function(jqXHR, textStatus, errorThrown) {
            $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
        }

    });
    return false;
}

$("#more_posts").on("click",function(){ // When btn is pressed.
    $("#more_posts").attr("disabled",true); // Disable the button, temp.
    load_posts();
    $(this).insertAfter('#ajax-posts'); // Move the 'Load More' button to the end of the the newly added posts.
});

With the above code, you should now have a load more button at the bottom of your posts, and once you click this it will display further posts. This can also be used with CTP (custom post type).

How to add Infinite Load, instead of Click

You can also load the rest of the posts automatically on scroll instead of having to click on a button. This can be achieved by making it invisible by setting the visibility to hidden.

The following code will run the load_posts() function when you’re 100px from the bottom of the page. So instead of the click function we added we would use:


$(window).on('scroll', function(){
    if($('body').scrollTop()+$(window).height() > $('footer').offset().top){
        if(!($loader.hasClass('post_loading_loader') || $loader.hasClass('post_no_more_posts'))){
                load_posts();
        }
    }
});

Do note that there is a drawback to this. With this method, you could never scroll the value of $(document).height() - 100 or $('footer').offset().top, If that should happen, just increase the number where the scroll goes to.

You can easily check it by putting console.log in your code and see in the inspector what they throw out like so:


$(window).on('scroll', function () {
    console.log($(window).scrollTop() + $(window).height());
    console.log($(document).height() - 100);
    if ($(window).scrollTop() + $(window).height()  >= $(document).height() - 100) {
        load_posts();        
    }
});

Adjust the settings accordingly and you will get this working to your desire in no time!

If you need any help with this, feel free to get in touch in the comment below. If you need help with this, just drop me a message and I’ll be more than happy to help you!

Sponsor

If you have come this far and you’re a fan of Football, check out our sponsor below; The FPL Way

They will help you become the king of your FPL mini-leagues!

Fantasy Premier League – Gain the FPL advantage you deserve

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

40 thoughts on “How to Load More Posts using Ajax with a Button or on Scroll in WordPress”

Marek says:

6th July 2020 at 9:55 pm

Hey. I am getting this error
ReferenceError: Can’t find variable: ajax_posts.

Looks like this is only for twentyfifteen theme? I am trying to use it on my custom theme. I copied things from twentyfifteen, but it didn’t change anything about this error.

Reply
1. Nathan says:
  
  6th July 2020 at 10:07 pm
  
  The code will work with any theme, do you have a link that I can check? You shouldn’t be getting an error if the code has been added to your functions.php file.
  
  Reply
Marek says:

6th July 2020 at 10:07 pm

Edit: after copying functions.js and enqueuing it error disapeared but posts are still not loading. every click loads admin-ajax.php and that’s all.

Reply
1. Nathan says:
  
  6th July 2020 at 10:47 pm
  
  Have you added the more_post_ajax() inside $(document).ready(); in your JS file?
  
  Reply
Marek says:

7th July 2020 at 7:48 pm

Thanks for reply.
I think I did. The site is vyvoj.xela.sk and it’s inside custom.js

Reply
1. Nathan says:
  
  7th July 2020 at 7:50 pm
  
  Oh awesome, glad you sorted it! Happy coding my friend!
  
  Reply
2. Marek says:
  
  7th July 2020 at 8:01 pm
  
  I have a different issue probably, even pagination didn’t show up. It is copied code for custom loop, so I don’t know why. I am working on it.
  
  Reply
Marek says:

7th July 2020 at 8:33 pm

Nooow I got it. I was using different post type and I didn’t realize I had to change it in the functions.php part too, damn, so much time wasted for this.

Reply
1. Marek says:
  
  7th July 2020 at 8:42 pm
  
  Sorry one last reply 😀
  To be helpful too, I found a typo. There is one extra quote here / ”&pageNumber=’ /
  
  Reply
  1. Nathan says:
    
    7th July 2020 at 11:07 pm
    
    Haha, s’all good, the main thing is you got there in the end, happy days!
    
    Reply
    1. Marek says:
      
      19th July 2020 at 5:52 pm
      
      I meant typo in your code 🙂
      gl
      
      Reply
  2. Nathan says:
    
    20th July 2020 at 4:30 pm
    
    Haha, I realised there was a bit of confusion in setting this up. I’m glad you’ve resolved the issue, I’ve updated the post to clarify things and also corrected the issue with the additional quote ; ) Thanks for raising that for me, I’m sure it will help others.
    
    Reply
Adrian says:

20th July 2020 at 2:31 pm

Would really appreciate some help with this, my current query has 24 posts per page and I use:
$index = 1; $totalNum = $wp_query->found_posts;
to put each set of 3 inside a div with class “row”.
So on the news page I currently have:
row
post 1
post 2
post 3
end of row
row
post 4
post 5
post 6
end of row etc…

How can I get this same effect when load more is clicked? I have tried to insert the same type of query and echo a div with class row but it just doesnt seem to add the new posts inside the row div.
Thanks

Reply
1. Nathan says:
  
  20th July 2020 at 2:48 pm
  
  Hi Adrian,
  
  Can you further explain the issue that you are having, or do you have a development link where I can see the issue that you are facing? I’l be able to provide a solution once you send me this.
  
  Thanks,
  
  Nathan
  
  Reply
Adrian says:

20th July 2020 at 2:55 pm

Sure, if you take a look at the News page here: https://tinyurl.com/y3heqbbu you’ll see 24 posts in sets of 3 seperated by

I would like ‘load more’ to show a further 12-24 in the same format, with every 3 inside a row div.

Reply
1. Nathan says:
  
  20th July 2020 at 4:04 pm
  Ahhh okay, I can see the issue now.
  
  What you need to do is replace the more_post_ajax part in in your functions.php with the following:-
```
function more_post_ajax(){

    $ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 3;
    $page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;

    header("Content-Type: text/html");

    $args = array(
        'suppress_filters' => true,
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'paged'    => $page,
    );

    $loop = new WP_Query($args);

    $out = '';

	$out = '<div class="row">';
    if ($loop -> have_posts()) :  $i = 1; while ($loop -> have_posts()) : $loop -> the_post();    	
        $out .= '<div class="post">;
                	<h1>'.get_the_title().'</h1>
                	<p>'.get_the_content().'</p>
       			</div>';
       	if($i % 3 == 0) {$out .= '</div><div>';}

    $i++; endwhile;
    endif;
    wp_reset_postdata();
    die($out);
}

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');
```
  The $out variable is what is being outputted in the HTML code when you click load more.
  
  In your case scenario, you are loading 3 items at a time, so I added the <div class="row"> outside of the loop and then echoing the closing div for this element every 3 elements, hope that makes sense.
  
  I think I will update this post with a more updated version, I think some more clarity needs to be made on this post.
  Reply
  1. Adrian says:
    
    20th July 2020 at 4:55 pm
    
    Hi Nathan
    
    Thank you for the help so far, almost there. If you take another look now you’ll see your code worked a treat, but there seems to be an extra empty row div at the end after the row of posts, if you click load more a few times theres a row with 3 posts then an empty div then another row then an empty one. The load more button is also appearing inside a row div where it’s not in the template (presumably for the same reason). And any way of the posts appearing above the load more button not below it?
    
    Reply
    1. Nathan says:
      
      20th July 2020 at 5:14 pm
      
      Okay, sorry my bad, please change the code to:
      
      function more_post_ajax(){ $ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 3; $page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0; header("Content-Type: text/html"); $args = array( 'suppress_filters' => true, 'post_type' => 'post', 'posts_per_page' => $ppp, 'paged' => $page, ); $loop = new WP_Query($args); $out = ''; $out = '<div class="row">'; if ($loop -> have_posts()) : $i = 1; while ($loop -> have_posts()) : $loop -> the_post(); $out .= '<div class="post"> <h1>'.get_the_title().'</h1> <p>'.get_the_content().'</p> </div>'; if($i % 3 == 0) {$out .= '</div>';} $i++; endwhile; endif; wp_reset_postdata(); die($out); } add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax'); add_action('wp_ajax_more_post_ajax', 'more_post_ajax');
      
      Then, to append the ‘load more’ to always appear at the end of the posts, please update your JS for the click function to:
      
      $("#more_posts").on("click",function(){ // When btn is pressed. $("#more_posts").attr("disabled",true); // Disable the button, temp. load_posts(); $(this).insertAfter('#ajax-posts'); });
      
      Should be all good now 😉
      
      Reply
      1. Adrian says:
        
        20th July 2020 at 11:46 pm
        
        Hi Nathan
        Thanks again for your further reply, I have finally got the ajax loading working, my total post count wasn’t returning the correct figure so when I used $i = $totalNum it wasn’t stopping the rows from being added hence the additional divs being created at the end.
        So the loading is all working great now, unfortunately the only thing not working at this point is the load more link being at the end, I added $(this).insertAfter(‘#ajax-posts’); as suggested but this didn’t work. Also tried $(this).appendTo($(‘#ajax-posts’));
      2. Nathan says:
        
        21st July 2020 at 10:43 am
        
        That’s odd, it’s working on my test site with $(this).insertAfter('#ajax-posts');
        
        You could try adding it here:
        
        if($data.length){ $("#ajax-posts").append($data); $("#more_posts").attr("disabled",false); $(this).insertAfter('#ajax-posts'); // Add here }
        
        It actually seems to work on the second click though which is strange.
        
        What happens if you add a short delay, like:
        
        setTimeout(function(){ $(this).insertAfter(‘#ajax-posts’); },500);
        
        It could be possible the element is being moved before the element has time to populate.
        
        Pretty sure one of the 2 suggestions above will work anyway. Let me know : )
2. Nathan says:
  
  20th July 2020 at 4:30 pm
  
  I have also updated the post now to clarify a few things on the setup of this, let me know if the code above fixes the issue you are having : )
  
  Reply
Gerd says:

22nd September 2020 at 8:08 am

Hi,
I’m trying to get the load more button to work for my page.
But I’m getting this error: “Uncaught ReferenceError: ajax_posts is not defined”
I used localized script after the script.js has been added.

Do you have an idea what I’m doing wrong?

Reply
1. Nathan says:
  
  23rd September 2020 at 12:44 pm
  
  Have you checked this post: https://stackoverflow.com/questions/39017791/referenceerror-ajax-object-is-not-defined-when-loading-wordpress-post-via-ajax
  
  Hope that helps, if that’s not the case then let me know.
  
  Reply
Adrian says:

21st January 2021 at 4:32 pm

Hi Nathan
You helped me with this a few months ago (see above) and I have since used this script on a number of sites as I love it, it works perfectly, until now… I have a site that is set to 12 posts per page in the blog query, the JS and the PHP file, except when I click load more it only loads every 3rd post. I have also set all to 3 posts per page, i get the first 3, when I click load more it gives me the 6th, click again and I get the 9th etc..
Any ideas?

Reply
1. Nathan says:
  
  22nd January 2021 at 11:15 am
  
  Hi Adrian,
  
  Hm, it’s hard to tell my friend, I’d need to look at the code really to advise you.
  
  Reply
  1. Adrian says:
    
    22nd January 2021 at 1:50 pm
    
    Any chance you could drop me an email please? Would be happy to let you log in to look at the theme I am developing so you can see the code I use in load-more .js and .php
    
    Many thanks
    
    Reply
    1. Nathan says:
      
      22nd January 2021 at 2:22 pm
      
      Sure no problem will send you an email now.
      
      Reply
Serif Sagman says:

1st February 2021 at 6:09 pm

Hi Nathan. Firstly, thanks for sharing this code. I’m trying to get this code work for my category page and custom query located in the front-page of my blog (ceptekno.com). function.js file gives me a reference error in my case for the line
> var str = ”&pageNumber=’ + pageNumber + ‘&ppp=’ + ppp + ‘&action=more_post_ajax’;.

The error message I get is > left hand side of operator ‘=’ must be a reference

All in all I could not get his work in my project:( maybe a bit of help?

Reply
1. Szymon says:
  
  25th February 2021 at 10:11 pm
  
  Use this:
  var str = ‘&pageNumber=’ + pageNumber + ‘&ppp=’ + ppp + ‘&action=more_post_ajax’;
  
  There was a typo.
  
  Reply
  1. Nathan says:
    
    2nd March 2021 at 8:21 am
    
    Ooops, my bad, corrected that – thank you.
    
    Reply
Sam Briggs says:

24th March 2021 at 5:22 pm

I have followed the tutorial (great btw) but when I press ‘load more’ the entire website loads inside the section where the next page titles should appear….

Reply
Allison says:

6th April 2021 at 6:30 am

Hi,
Thank you so much for the tutorial. Been looking for this since ages and finally i found a working code! My only problem is how to load 9 post initially and 3 more post each click on the load more? Can you help me please?

Reply
1. Nathan says:
  
  11th April 2021 at 10:55 am
  
  To do this, simply change $postsPerPage = 3; to $postsPerPage = 9;
  
  The rest of the code will remain the same.
  
  Reply
sandi says:

11th May 2021 at 6:42 pm

Nathan, thanks for this post – exactly what I needed for a current project.

Is there a way to only have the “load more” button appear once on a page? I’m currently loading the 6 most recent posts and I want to ‘hide’ the next 8 posts with the load more button. Once those 8 posts are loaded, I don’t want that button to appear any longer.

I’ve tried removing $(this).insertAfter(‘#ajax-posts’); from the script but that doesn’t seem to do the trick.

Any suggestions?

Reply
1. Nathan says:
  
  21st June 2021 at 12:27 pm
  For this you can use the following jQuery code:
```
$(".element").one("click", function(event) {
    //do something
});
```
  This will execute on the first click and disable for the second click, you can always use the $('.element').hide(); function to hide the button after click…
  
  Hope that helps ( :
  Reply
Thomas says:

29th June 2021 at 8:15 pm

how add class for animations when loading posts ??

Reply
1. Nathan says:
  
  12th July 2021 at 6:16 pm
  
  Can you please elaborate on what exactly you want to do? Thanks
  
  Reply
reshmi says:

10th July 2021 at 7:25 am

i have used this code but my ajax request is not returning any response, how to fix

Reply
1. Nathan says:
  
  12th July 2021 at 6:15 pm
  
  Are you getting any console errors or anything in the logs?
  
  Reply
Adrian says:

30th August 2021 at 9:01 pm

Hi Nathan
Hope you’re well.
Using this on a new site which has 10 posts per page, currently 16 posts published. Once button is clicked, final 6 posts load but button stays on the page, i’d like to hide it if there are no further posts to be loaded.
Tried to change:
else{
$(“#more_posts”).attr(“disabled”,true);
}
to:
else{
$(“#more_posts”).hide();
}
but that didn’t affect anything. Any help appreciated.
Thanks, Adrian

Reply