Infinite Scroll in WordPress

Infinite scroll, when used correctly, is a wonderful tool for improving engagement on your website. You lower your users’ barrier to getting the next page of content, which increases their chances to find something interesting and click through.

I refer to infinite scrolling as any technique that uses AJAX to load additional content without reloading the page. I’ll provide a general walkthrough of the tools required, then provide two examples of different implementations.

Summary

There are three main components to infinite scroll.

  1. The trigger. This is what starts the loading of new content. It is typically scroll-based (ex: load more posts when users is X pixels from bottom of page) or click-based (ex: clicking a “load more” button)
  2. The AJAX query. This is the Javascript actually asking for the new content, and then inserting it into the page.
  3. The WordPress query. The PHP code in your theme or plugin that does a WP Query, formats the data, and returns it when asked by the AJAX query.

Scroll to Load More

The first example is a standard “Scroll to Load More”. When the user is a certain distance from the end of the post listing, more posts are loaded and inserted at the bottom. I implemented this on Western Journalism.

infinite scroll on Western Journalism

The WordPress Query

When you create your AJAX query, you’ll specify an action (see load-more.js, line 23). You’ll then hook a WordPress function to that action, and it will get run any time that AJAX query runs.

The hooks you use are wp_ajax_{action} and wp_ajax_nopriv_{action}. Let’s call our action “be_ajax_load_more”, and we’d hook our function like so:

<?php
/**
* AJAX Load More
* @link http://www.billerickson.net/infinite-scroll-in-wordpress
*/
function be_ajax_load_more() {
$data = 'Additional posts go here';
wp_send_json_success( $data );
wp_die();
}
add_action( 'wp_ajax_be_ajax_load_more', 'be_ajax_load_more' );
add_action( 'wp_ajax_nopriv_be_ajax_load_more', 'be_ajax_load_more' );
view raw functions.php hosted with ❤ by GitHub

You’ll pass useful data to your function using the $_POST variable. Here’s a full example of the WordPress query. We’re grabbing query variables from $_POST, doing the query, and returning the result. I’m using a function called be_post_summary() to output the individual post. You’ll need to define this function yourself so it outputs the post formatted the way you’d like.

<?php
/**
* AJAX Load More
* @link http://www.billerickson.net/infinite-scroll-in-wordpress
*/
function be_ajax_load_more() {
$args = isset( $_POST['query'] ) ? array_map( 'esc_attr', $_POST['query'] ) : array();
$args['post_type'] = isset( $args['post_type'] ) ? esc_attr( $args['post_type'] ) : 'post';
$args['paged'] = esc_attr( $_POST['page'] );
$args['post_status'] = 'publish';
ob_start();
$loop = new WP_Query( $args );
if( $loop->have_posts() ): while( $loop->have_posts() ): $loop->the_post();
be_post_summary();
endwhile; endif; wp_reset_postdata();
$data = ob_get_clean();
wp_send_json_success( $data );
wp_die();
}
add_action( 'wp_ajax_be_ajax_load_more', 'be_ajax_load_more' );
add_action( 'wp_ajax_nopriv_be_ajax_load_more', 'be_ajax_load_more' );
view raw functions.php hosted with ❤ by GitHub

Enqueue the Javascript

We need to enqueue a Javascript file which will contain all our relevant JS. We also need to pass along the information our WordPress plugin needs using wp_localize_script().

<?php
/**
* Javascript for Load More
*
*/
function be_load_more_js() {
global $wp_query;
$args = array(
'url' => admin_url( 'admin-ajax.php' ),
'query' => $wp_query->query,
);
wp_enqueue_script( 'be-load-more', get_stylesheet_directory_uri() . '/js/load-more.js', array( 'jquery' ), '1.0', true );
wp_localize_script( 'be-load-more', 'beloadmore', $args );
}
add_action( 'wp_enqueue_scripts', 'be_load_more_js' );
view raw functions.php hosted with ❤ by GitHub

In this example I’m also passing along the URL for the AJAX query and the current WordPress query so that we can use it when requesting additional posts.

Setup the Javascript

Now it’s time for the actual Javascript file. In my theme I created a /js directory and load-more.js inside it. You can name and place your file anywhere, but make sure the wp_enqueue_script() above properly links to it. Below the code snippet I’ll walk through what’s happening line-by-line.

jQuery(function($){
$('.post-listing').append( '<span class="load-more"></span>' );
var button = $('.post-listing .load-more');
var page = 2;
var loading = false;
var scrollHandling = {
allow: true,
reallow: function() {
scrollHandling.allow = true;
},
delay: 400 //(milliseconds) adjust to the highest acceptable value
};
$(window).scroll(function(){
if( ! loading && scrollHandling.allow ) {
scrollHandling.allow = false;
setTimeout(scrollHandling.reallow, scrollHandling.delay);
var offset = $(button).offset().top - $(window).scrollTop();
if( 2000 > offset ) {
loading = true;
var data = {
action: 'be_ajax_load_more',
page: page,
query: beloadmore.query,
};
$.post(beloadmore.url, data, function(res) {
if( res.success) {
$('.post-listing').append( res.data );
$('.post-listing').append( button );
page = page + 1;
loading = false;
} else {
// console.log(res);
}
}).fail(function(xhr, textStatus, e) {
// console.log(xhr.responseText);
});
}
}
});
});
view raw load-more.js hosted with ❤ by GitHub

3-4 I’m creating an element with a class of .load-more and sticking it at the bottom of my post container (.post-listing). We’ll detect how far away the user is from this element to determine when to load more posts
5-6 Create some variables we’ll need. Setting page = 2 since we’ll be loading the second page. The loading variable will tell us if we’re actively waiting for the next set of posts, so we don’t send multiple requests.
7-13 Instead of running the next block of code every microsecond the user is scrolling, I’m setting up a timer. When scrolling, it is only allowed to check every 400 microseconds (this can be adjusted if needed).
15 If the user is scrolling…
16 And we’re not already loading posts, and the timer will let us check…
17-18 Reset the timer
19 Calculate distance between the window’s current location and the .load-more element
20 If we’re within 2000px of the .load-more element…
21 Set loading to true since we’re about to load new posts
22-27 Setup the data we’re passing to our WP function. We’re including the action, the page we want to load, and the other query variables.
28 Make the AJAX request to the proper AJAX URL and pass along our data
29-33 If the AJAX request is successful, stick the returned data at the bottom of our post container, then move the .load-more element below it (resetting the distance between the window and the button). Increase our page count (so next time we’ll get page 3), and set loading to false.
34-36 If we don’t get a success message back, do nothing (for now). Uncomment the console.log line and whatever information is received will be displayed in your browser’s console.
37-39 If it fails, do nothing (for now). Like above, you can uncomment the console.log for more details about what went wrong.

And that’s it! We now have infinite scroll working on archive pages. For reference, here’s the full code

Infinite Scroll – Click to Load More

On Brody Law Firm’s website (not live, coming soon), at the bottom of an individual post we display more posts from the same category and a button to load more. The code to power this is very similar to the above example, except we’re triggering it on click rather than on scroll.

infinite scroll on Brody Law Firm

<?php
/**
* Javascript for Load More
*
*/
function be_load_more_js() {
if( ! is_singular( 'post' ) )
return;
$query = array(
'post__not_in' => array( get_queried_object_id() ),
'category_name' => ea_first_term( 'category', 'slug' ),
'posts_per_page' => 3
);
$args = array(
'url' => admin_url( 'admin-ajax.php' ),
'query' => $query,
);
wp_enqueue_script( 'be-load-more', get_stylesheet_directory_uri() . '/js/load-more.js', array( 'jquery' ), '1.0', true );
wp_localize_script( 'be-load-more', 'beloadmore', $args );
}
add_action( 'wp_enqueue_scripts', 'be_load_more_js' );
/**
* AJAX Load More
*
*/
function be_ajax_load_more() {
$args = isset( $_POST['query'] ) ? array_map( 'esc_attr', $_POST['query'] ) : array();
$args['post_type'] = isset( $args['post_type'] ) ? esc_attr( $args['post_type'] ) : 'post';
$args['paged'] = esc_attr( $_POST['page'] );
$args['post_status'] = 'publish';
ob_start();
$loop = new WP_Query( $args );
if( $loop->have_posts() ): while( $loop->have_posts() ): $loop->the_post();
be_post_summary();
endwhile; endif; wp_reset_postdata();
$data = ob_get_clean();
wp_send_json_success( $data );
wp_die();
}
add_action( 'wp_ajax_be_ajax_load_more', 'be_ajax_load_more' );
add_action( 'wp_ajax_nopriv_be_ajax_load_more', 'be_ajax_load_more' );
/**
* First Term
* Helper Function
*/
function ea_first_term( $taxonomy, $field ) {
$terms = get_the_terms( get_the_ID(), $taxonomy );
if( empty( $terms ) || is_wp_error( $terms ) )
return false;
// If there's only one term, use that
if( 1 == count( $terms ) ) {
$term = array_shift( $terms );
} else {
$term = array_shift( $list );
}
// Output
if( $field && isset( $term->$field ) )
return $term->$field;
else
return $term;
}
view raw functions.php hosted with ❤ by GitHub
jQuery(function($){
$('.post-listing').append( '<span class="load-more">Click here to load earlier stories</span>' );
var button = $('.post-listing .load-more');
var page = 2;
var loading = false;
$('body').on('click', '.load-more', function(){
if( ! loading ) {
loading = true;
var data = {
action: 'be_ajax_load_more',
page: page,
query: beloadmore.query,
};
$.post(beloadmore.url, data, function(res) {
if( res.success) {
$('.post-listing').append( res.data );
$('.post-listing').append( button );
page = page + 1;
loading = false;
} else {
// console.log(res);
}
}).fail(function(xhr, textStatus, e) {
// console.log(xhr.responseText);
});
}
});
});
view raw load-more.js hosted with ❤ by GitHub

I’m only enqueuing this script on single posts. For the query, we’re requesting posts in the same category, excluding the current post. Also note how the Javascript file triggers the AJAX query when the .load-more element is clicked, rather than on scroll.

Any Questions?

I hope this in-depth tutorial helps you implement infinite scroll in your own projects.

Tutorial

Receive New Posts by Email

Comments

  1. Thanks for posting this! — I’ve just been looking at trying similar with Masonry. What would you recommend for taking the AJAX a step further to load entire posts in the background for presentation in a modal window or lightbox?

    1. I’d use the same approach outlined here. Just update the WP function to return the markup you need (full post content rather than excerpts).

  2. Thanks for sharing, Bill! I was wondering about this after looking at Pinch of Yum. Is the footer-cta on that site hooked a widget area in with the query in be_ajax_load_more()?

    1. Yes, in my load more function I display 20 posts and then the footer-cta. It’s not a widget area though, it’s just a function I wrote to output the footer cta.

    1. The problem with the Jetpack infinite scroll (and other plugins like it) is they have to work with every theme so use a pretty hacky approach. They actually load the next page (like clicking the “Next” link in your pagination), then pick out just the posts in the content area and insert that. You’re loading a whole page when it would be more efficient to only load the posts required.

      It can also cause issues with ad networks since you’re inflating your pageviews. Infinite scroll is a “pageview” when Jetpack loads the page to grab the posts, but the ad shown on that page isn’t seen by an actual human.

      Finally, with that tool you’re limited to only archive pages since they have the “Next” button Jetpack can press. The approach described above can be used in any instance. When you’re on a single post you can load excerpts of other posts, like I’ve done on Pinch of Yum.

      If you wanted to change the URL you could use pushState/replaceState, or history.js to ensure it works in all browsers.

  3. In other AJAX-y things I’ve done, I’ve needed to refresh the nonce on every iteration. Is that just not needed here, or is it missing?

    1. I don’t believe we need to regenerate the nonce, but it probably wouldn’t hurt.

      From the Codex: “Nor are they used only once, but have a limited “lifetime” after which they expire. During that time period the same nonce will be generated for a given user in a given context. The nonce for that action will remain the same for that user until that nonce life cycle has completed.”

  4. Thanks for this! I recently implemented my first Ajax functionality based on another tutorial, but didn’t know about using nonces for it. I’ve now added that in!

  5. I worked through your tutorial through my theme. Called function using be_ajax_load_more(); as template tag and all I got as output is “-1”. Any suggestions?

    1. From what’s given it’s hard to tell where the issue lies. You might try uncommenting the console.log lines in the JS and then looking in the browser’s console to see what is actually being returned.

          1. AH… The reason I got -1 was because I call the function be_ajax_load_more() directly on my page. It is not necessary because we already executed the function in the function.php add_action().

    1. No, I have not tried that plugin. It looks interesting, but I still prefer the method outlined above. It’s simpler to make it match the look and feel of your site when you’re using the same functions to display posts on load and on scroll.

  6. First of all thanx for sharing your code, very helpful!
    But on question, I wonder why I’m the first asking, I get an error 500 if I leave the “be_post_summary()” within the loop, it’s not a known function, what is this function supposed to do?
    Is it necessary for the functionality?

    thx in advance

    1. You are supposed to replace that function with whatever you want to display. In my example I had a function, be_post_summary(), that outputs a summary of blog posts.

  7. Hey,
    I wrote something pretty similar, checking whether others like you have implemented nonce check for infinity scroll / Ajax carts and other “non-data-critical” applications. Thing is, when caching pages, it gets pretty nasty as everyone is getting the same nonce hence loosing its value. I was wondering whether anyone was going forward on loosing the nonces and use a GET request instead. What are your thoughts on this?

    Regards,

  8. Thanks you for this code and explanation, it works perfectly and does exactly what i am looking for. Now I can decide how to display the extra data on the page. This is important as how I display the posts that come back is quite complicated and no infinite scroll WP plugin has been able to do what I want.

    Thanks Bill, this is super cool!

  9. Hi,
    I want to implement Western Journalism example on my wordpress website – homepage.

    I am little lost and need your help. When I follow the instructions you have given above – I receive an error for line 19 in JS File – Anonymous. What do I need to do? Also what is admin-ajax.php and where can I find it?

    Thanks

  10. For those who are trying to use this solution on a masonry grid:
    Items on the masonry use absolute positioning so appending the button in the container will not work. You either need to use another method to detect the bottom of the window ($(window).scrollTop() + $(window).height() > $(document).height() – 100) or append the button in the parent element.
    Then add this modified version of the load-more.js https://gist.github.com/FutureMedia/e3a4220b4ac623301be98ee36d062bf6

  11. How about to load more items when the user scrolls close to the bottom and not on click of the load more posts button? How can this be done?

  12. Very usefull and functional code, thanks for it. I implemented it with success.

    But now I’m trying to add a preload gif, using the class .load-more:
    .load-more {
    background: url(“../images/preload.gif”) no-repeat;
    display: inline-block;
    width: 128px;
    height: 15px;
    }

    It’s running ok, but I don’t know where in the js script get the end of the data loaded to change the display of the .load-more to none, and hide it at the end of all posts loaded.

    Any idea? Thanks in advance!

  13. Wow, super easy to implement and really good explained for people with beginner coding skills. Thanks for this Article, a big time saver and a good read to learn how to infinite scroll if you’re not just a Copy Cat.

    1. Now I am having a little trouble with getting this to work, while having the Main Query modified with WP_query, so the WordPress Frontpage adds a Custom Post Type to the regular Posts.
      The Script always just returns “0” and when I do a console.log on the query inside the data array, its empty.

      Any recommendations on how to modify your script so it works with that too?

      1. In the `be_load_more_js()` function (hooked to wp_enqueue_scripts) the query parameters are added to the $args array. Do a print_r( $args ); to make sure those query arguments match your desired query.

        If that looks right, the next step is to see how it’s processed. Temporarily copy this code into the be_load_more_js() function (this came from be_ajax_load_more() ): https://gist.github.com/billerickson/b85243965c4e1231bb74750a2f0719a7 After you load it once, you’ll see how the arguments were processed in be_ajax_load_more() and confirm they look correct.

        Just continue troubleshooting down the line until you find the issue.

        1. Hey Bill! Great tutorial by the way. I really appreciate what you share.

          I’m having the same issue as John where I keep getting “0” in my console.

          Here is what print_r( $args ); is giving me: “Array ( [nonce] => 479bf315ea [url] => http://alifeworthliving.xyz/wp-admin/admin-ajax.php [query] => Array ( [page] => [pagename] => videos ) )”.

          I’m not sure where to go from here. I also looked at: https://codex.wordpress.org/AJAX_in_Plugins#Error_Return_Values – and understand that the returned “0” means that the wordpress hook is not connecting to the admin-ajax.php… Let me know your thoughts!

  14. Wonderful tutorial. I was able to implement this piece of code on my index.php. (http://ganzinotti.com/business). Now I want to continue to add the functionality on other pages.

    For example: http://ganzinotti.com/business/books/ has a different style so I need to change the the code.

    Another example: http://ganzinotti.com/business/custom-posts/ here I need to include other custom post types.

    How can I easily extend your code without duplicating it? Conditional statements like is_home() are not working in functions.php and I do not want to duplicate the code, because I need eight different formats.

    Hopefully you can give me a hint.

  15. Just wanted to say thanks for this. Things weren’t very clear to me at first because somehow I was totally unaware of wp_localize_script, which is just flat-out awesome. I was able to adapt this to do exactly what I needed and it’s working great.

  16. Awesome man! Works like a charm! Thank you!

    I did have one question related to the markup of the additional posts. In the be_ajax_load_more() function, I’m outputting a modified version of the genesis loop -> http://pastie.org/10868812

    On line 17, I have printf( '', genesis_attr( 'entry' ) ); but this does not output the entry class. Is this a scope issue?

    I was able to target a different class to apply the css I needed but curious why it doesn’t output and what the best way to output it would be.

    Thanks man!

    1. Hmm, that’s weird, everything looks right to me. I never use that though. I’d use implode( ' ', get_post_class() )

    2. I’m getting the same issue. I couldn’t see the pastie example you posted. Where did you put the `implode(‘ ‘, get_post_class())`?

      1. In the post above, I use be_post_summary(); to represent the actual output of the post. It would be inside that function that I would output implode( ' ', get_post_class() ) on the post entry.

        1. Thanks, Bill. I’m just running a regular get_template_part() within the new loop where you are calling the be_post_summary() function. All my content areas within the templates use the post_class.


          if( $loop->have_posts() ): while( $loop->have_posts() ): $loop->the_post();
          get_template_part( 'template-parts/post/content', get_post_format() );
          endwhile; endif; wp_reset_postdata();

  17. Hi Bill,

    Thanks for sharing this. It works great, but I’m having trouble with a modification and I’m hoping you can point me in the right direction.

    I’d like the “Load more posts…” button to load a different amount of posts that page 1. For example, if I land on the blog page and see 10 posts, I’d like the load more button to load an additional 5 posts per click.

    I tried some things with posts_per_page and offset, but it was doing strange things. I’ll keep working on it, but if you have any pointers on how best to approach this I’d really appreciate it.

    1. The paged parameter is ignored if you use the offset parameter. You’ll need to do your own math. Offset = [Posts on First Page] + [Posts on Subseqeuent Pages] * ([Current Page] – 2).

      Example: $args['offset'] = 10 + 5 * ( page - 2);

      My Genesis Grid plugin lets you have a different number of posts on the first page and subsequent pages. See the query here.

      1. Thank you so much! I was able to modify your example to get it to mostly work:

        https://gist.github.com/AlphaBlossom/8ba1577ecdd06a9dd3429e3a94118c1b#file-click-to-load-php

        I’m still having one issue. It doesn’t work if I use the conditional check if( $query->is_main_query(). If I comment that out, it works exactly as needed.

        I’m using the Genesis sample theme with no plugins and no other modifications. My understanding is not using this can cause other issues.

        Thank you again, this is such a huge help!

  18. Hi Bill

    Firstly, thanks you for the article, you saved my butt there. 🙂

    I just have one question, how would I check to see if I reached the last page? That way I can add a statement to not show the “load more” button again.

    G

    1. $wp_query->max_num_pages shows you the maximum number of pages for the current query.

      So instead of using Javascript to add the “Load More” button (line 20 of load-more.js), include it in the ajax function be_ajax_load_more(), and before displaying it make sure $wp_query->max_num_pages > $_POST['page']

      1. How would you recommend adding the check so that it doesn’t repeat itself? Since be_ajax_load_more() is being duplicated, adding the button in the function repeats itself also.

        1. First of all thanks to Bill for an awesome tutorial.

          Tony – I don’t know if this is the best way (Bill might tell me this is horrible 😉 ) but I was working on something similar just last night (still in local development), at the moment I’m using jQuery to remove the first instance of the Load More button when the script successfully runs.

          (And of course the ‘second’ (new) Load More button only loads if there’s more posts to show anyway, as per Bill’s advice above).

        2. In the javascript file, right after you set loading = true, add a line to remove the button, like $('.post-listing .load-more').remove();

        3. Thank you guys for pointing me in the right direction. That didn’t work for me, but I was able to pull in $wp_query->max_num_pages via wp_localize_script and use that for a conditional statement in the load-more.js script.

          Added a loading spinner and new posts fade in, working great now! Thanks again for your help!!!

  19. I’m getting an error trying to implement this on MAMP: http://localhost/wp-admin/admin-ajax.php 500 (Internal Server Error)

    My debug log says: Error in GetAllFileNamesFromDirectoryWithFileMask.

    I have plugins on my site that use AJAX, and they’re still working properly.

    Any chance you’ll know what to do? I’m new to the dev side of things and I feel this is getting nitty gritty.

    Thanks in advance

  20. Hi Bill, Excellent article. I wanted to ask, how does the be_post_summary() function work? does it return the markup for the loop? Do you create that function elsewhere?

    1. Yes, it handles the markup for the posts. I didn’t include it in the code above because the specific markup I used isn’t relevant to the tutorial and everyone’s implementation will use different markup.

      If the function will only be used for the infinite scroll then I put it in the same file with all the other infinite scroll code. But often times it’s a generalized function used to display content anywhere throughout the site (main loop, related posts after post, infinite scroll…) in which case it’s usually in inc/post-summary.php in my theme.

  21. For a not so good in programming. This does not help me. There are no instruction on how to add in the front-end of front-page template. Reading comments doesn’t help either. 🙁

  22. I tried the 1st method and got an error that says “Uncaught TypeError: Cannot read property ‘top’ of undefined”. After spending too much time to resolve it I ended up having to use Jetpack to meet my deadline. I would like to use this method in the future if I can figure it out.

    1. i think your error is to do with these 2 lines:

      wp_enqueue_script( ‘be-load-more’, plugins_url( ‘/js/scripts.js’, __FILE__ ), array(‘jquery’), ‘1.0’, true );
      wp_localize_script( ‘be-load-more’, ‘beloadmore’, $args );

    2. I had a similar issue. You have to create the before setting it to the variable button.

      I did something like $('#main').append( '' );
      var button = $('.load-more');
      so the creation of the class is done before the variable.

      Hope that helps.

  23. im trying to implement this for the template archive.php, how would this template file look? do I still use the loop in there?

    1. Yes, the loop produces the first page’s results. The infinite scroll simply loads the additional page’s results as you scroll or click.

      The only thing you need to remove is the pagination links. It might be a good idea to do that using Javascript so that if the JS doesn’t load right, it gracefully degrades to standard paginated posts.

      1. I’m using a Genesis Child theme. I’m also interested in what Simon asked, is there any tutorial online that shows what the php would look like modified to load the archive/categories using infinite scroll for Genesis while hiding pagination?

        Even how to apply it to the footer after comments of a single post? I’m assuming you could somehow use the Genesis hooks but have no idea of how to modify it.

        1. Both of the tutorials above apply to the main Genesis loop. One shows how to load more posts as the user scrolls, and the other shows how to load more after the user clicks a button.

          What specifically are you looking for that’s not covered above?

          1. Thank you for your response Bill.

            I added the first functions script and javascript file to see what happened once I did, but I after checking, it didn’t modify anything in my child themes behavior.

            I managed to identify the css triggers:

            .content
            .pagination
            .archive-pagination div.pagination-next a (so long as I’m using a Prev/Next pagination rather than numbers)
            .post

            But I’m not sure how to use your provided code to infinite scroll the:
            a) Category/tag pages (instead of number pagination)
            b) After single posts (after the comments section)

  24. Hi, I tried this method and it didn’t do anything. I was looking to add infinite scroll on my single.php so that when the user scrolls to the end of the post it loads the previous post for at least 10 post.

    I tried the second method and nothing happened. I placed the code in my functions.php and I also created the load-more.js

    Can I get some assistance. I have been trying to figure out how to do this for a week and I have tried all the free wordpress plugins for this and none of them work as I like.

    1. ok, found the fix. Moved the be_ajax_load_more() along with the 2 action lines from archive.php to functions.php.

      Now to figure out how to remove “Click here to load earlier stories” after posts are shown..

  25. Bill, your code was a welcome reprieve from attempting to make this on my own – thank you for sharing!

    I’ve created a version that supports column classes, custom settings by page, and both auto + button loading. I’d love feedback on how to improve this code – it’s working, but I haven’t optimized it. Anyone who is looking for something similar is welcome to use this as a starting point!

    https://gist.github.com/oncecoupled/86daa4f23aa8749c0933f72133ac7106

    BTW, Bill, you have an extra closing bracket on line 26 of the final functions.php file (on-click version).

    1. Looks great! The only improvement I’d recommend is moving the “load more” Javascript into its own function since it’s used in two different contexts.

  26. For the purposes of newbies here. If someone is looking to display the standard genesis formatting for the loaded content you could simply have

    function be_post_summary(){
    do_action( ‘genesis_before_entry’ );
    printf( ”, genesis_attr( ‘entry’ ) );
    do_action( ‘genesis_entry_header’ );
    do_action( ‘genesis_before_entry_content’ );
    printf( ”, genesis_attr( ‘entry-content’ ) );
    do_action( ‘genesis_entry_content’ );
    echo ”;
    do_action( ‘genesis_after_entry_content’ );
    do_action( ‘genesis_entry_footer’ );
    echo ”;
    do_action( ‘genesis_after_entry’ );
    }

  27. Hi Bill, Thanks for share this awesome tutorial…
    One question for you. Suggest me how can i optimize this ajax triggered again and again. Is it possible to add fixed area for ajax trigger. For example when we reach the bottom of wrapper div then ajax call instead of every scroll.
    Thanks again 🙂

    1. That’s exactly what we’re doing. We’re adding an item at the bottom of the page (.load-more) and once the browser reaches it, load more posts. The problem is the browser won’t tell you when you reach it – you have to check the distance while scrolling. The “scroll handling” part is how we minimize how often our code runs. Instead of running every millisecond that the user scrolls, we set a timer and only run every 400 milliseconds (you can change this to whatever you like).

      On line 12 you set the delay on the timer. On line 16-18 you’ll see it checks the scroll timer to make sure it’s allowed to load, and if so it resets the timer.

  28. Hey Bill, this tutorial was great and super easy to implement, I just had one issue. It worked great when I was using it on my custom post type archive page, but then I wanted to convert that archive into a page template and the ajax load stopped working. It seems as though this function is not even called on a page template that includes a query. Is there a simple modification to the script to allow it to be called on page templates as well?

    1. The problem is this code uses the query settings for the Main Query, not your custom query. See this line. You would need to change this to pass your custom query arguments.

      1. I’m in a similar (same?) situation as Brett. I have a Search Results “page template” that uses a custom query. The results are from a Custom Post Type.

        The Page Template does a query (based on user input) and adds all results into an ARRAY of IDs.

        In the “Ajax Load More” code, if I hard code an array of IDs as one of the $args, it totally works. For example:

        $args[‘post__in’] = array (5, 6, 7, 8, 9, 10, 11, 12);

        The IDs obviously will be different depending on the search the end user makes.

        (I hard code it for proof of concept, but in the real site the array would be a variable)

        How could it be possible to pass in this array rather than hard code it? If I can pass this array in, it will surely allow for infinite scrolling for a custom query. Any advice you can share would be really helpful! Thx!

        1. Why are you doing one query (to get the IDs), then a separate query (to get the posts)? What if the results of the search generate 50,000 post IDs? Are you going to try passing an array that large?

          You should just pass the search query (ex: ?s=something) and the page (ex: get_query_var( ‘paged’ )) to WordPress to do the query itself. Then the infinite scroll code can simply get the next page of these results.

          1. Thanks for such a fast reply!

            Unfortunately the site search isn’t just a simple “s=”. It’s a Real Estate site with many custom search parameters, (min/max price, property type, location, etc.) from custom data entry fields. So the user isn’t just searching the title and content of a post.

            I suppose the search code could be re-written so that it doesn’t return a list of IDs, and is instead a bunch of $args for a wp_query statement. But before I commit to that, in testing I hard coded the $args in to simulate an actual search…

            On initial page load the correct results show up on page 1 (as expected), but page 2 ignores the query and outputs results that can duplicate stuff in page 1. I think the problem is, in the ‘query’ argument for beloadmore:

            ‘query’ => $wp_query->query,

            returns this when I do a print_r:

            Array([page]=>[page_name]=>search-results)

            “search-results” is my Page Template that displays the custom search results. This doesn’t appear to be a proper query. So there is still the issue of somehow passing in the custom query. Thoughts?

            Alternatively, my original quesiton about passing in a potentially long array I think would still be viable. I’ve seen my theme pull in results in the thousands, and it’s just as quick as if it were a small array. 🙂

            I feel like I’m so close. I would probably give up by now if it weren’t for the fact that I spent nearly 3 full days on this. I feel like i’m at the point of no return. 🙂

          2. Correct. As mentioned above, this code is designed to use the main WordPress query. You’ll want to replace that line with whatever you want to pass along to do your custom query.

            I think the best approach would be to pass along all the relevant GET parameters that accompany your custom search fields, so that you can do a single meta query. But you could also pass along an array of post IDs if you wanted.

            Pass along whatever parameters you want in the be_load_more_js() function, then use those parameters to do a WP_Query in the be_ajax_load_more() function.

          3. Hmmm… I’ll have to let that response soak in and hopefully make sense as I experiment with your advice. 🙂 Thx so much, you have been of great help and your article is indispensable. If I figure this out I’ll let you know!

  29. Thanks for sharing, Bill!
    I was a problem . i want use this cods on the post’s of category. how can i use it ?? ?
    i don’t have navigation number , i have load more button in the archive category.
    Thx!

  30. Again, thanks for the great article. I was finally able to get it all working for the most part, but just when I think I’ve got it licked, I ran into a problem…

    In the be_post_summary() function, I can output HTML, the_title(), the_excerpt(), etc. But I cannot get post meta with this:

    ID, “price”, true);
    ?>

    It prints a blank string.

    This is a custom field called “price”. I also have a bunch of other custom meta fields that I need to display. Note: I’m looping through posts from a Custom Post Type, not regular blog posts.

    Can you offer any advice on how to pull this in? Thanks!

    1. Whoops, my code got messed up because I wrapped it in PHP tags. This is the get_post_meta:

      echo get_post_meta($post->ID, “price_value”, true);

    2. My guess is you didn’t call the global $post; first. A simpler approach is to use get_the_ID() instead:

      echo get_post_meta( get_the_ID(), 'price_value', true );

  31. I’m having issues getting this to work on an archive for a Custom Post Type.

    Should I be following the code on this page or the code in this link?
    https://gist.github.com/billerickson/669a1477068f0d4b5dc0

    And when I update the content for a custom post type do I change this line?
    $args[‘post_type’] = isset( $args[‘post_type’] ) ? $args[‘post_type’] : ‘post’;
    $args[‘post_type’] = isset( $args[‘post_type’] ) ? $args[‘post_type’] : ‘work’;

    Ultimately I want to get this to work using a custom query (WP_Query) but for now if I can get this to work on an archive page that will be a good start.

    1. Either code should work. The one you linked to simply combines the different sections of code featured above in this post (I think, I didn’t run a diff across them, that’s just eyeballing it).

      No, you shouldn’t need to specify the post type. You’re passing all the query vars on this line. On a custom post type archive, one of those query vars will be 'post_type' => 'my_cpt'. The standard blog archive doesn’t include a post type parameter, which is why we’re setting it to ‘post’ if it isn’t set already.

  32. I have a custom page integrated with WordPress I’m trying to use the 2nd method and this is what i get “Uncaught ReferenceError: beloadmore is not defined”, I’ve installed WordPress in a folder, not directly on my root may this be my issue? if it is where should I paste the code?

  33. Hi Bill, thanks for your solution its working nicely for me. However do you happen to know how to hide the load more button if there arent any more posts to load?

  34. Hi,
    I try to implement the load more, but the ajax call is always empty.
    Firebug says {“success”:true,”data”:””} when I click the load more button.

    print_r( $args ); says:
    Array ( [nonce] => 203be4fbb7 [url] => http://example.com/wp-admin/admin-ajax.php [query] => Array ( [post__not_in] => Array ( [0] => 7 ) [category_name] => [posts_per_page] => 3 ) )

    I have a custom post type and I query the posts and display them as masonry.

    Why ist the query empty and how can I solve it

  35. Seems there is a common behaviour with Infinite Scroll is that the browser’s back button always take the user back to page 1, no matter how far the user had ever scrolled.

    For example, if I scroll down several pages and click on one of the post and then hit the “Back” button, the browser will start all over again and loading only page 1.

    Brody Law Firm’s website also takes me back to page 1; but interestly, Western Journalism website can always take me back to where I had scrolled to… (tested using Chrome on desktop)

    And thanks for this great article and all the explanation.

    1. You can use pushState to change the browser’s history, updating it with each new load. But make sure if someone accesses that URL directly (ex: /page/3) they get the expected content.

      As an example, see this line in my plugin BE Full Post Scroll. This plugin adds infinite scroll to the single post, loading the next full post and updating the URL. You can see it in use on Denison Forum.

      1. Hi Bill,

        the link doesn’t work. I’m very interested in this code with the History API applied to it, could you re-post it somewhere so we can have a look at it?

        Thanks

  36. Hi Erick, thanks a lot for this great tutorial.

    The only thing which is has not been included was hiding the “Load More” button upon not having any additional posts to parse.

    Any idea how this could be accomplished?

    Thanks & Kind Regards

  37. Hi, the infinite scroll breaks if the user idles on the page for more than 24h. Is it possible to regenerate the nonce after the lifetime has expired?

  38. Great Post. I have tried the 2nd method but i get this error from the Firebug console : “ReferenceError: beloadmore is not defined”. Could some one help direct where the issue could be?

    Thanks.

  39. Thank you for providing this excellent tutorial. I have successfully implemented this on my own project and had a question, is it possible to remove the absolute links from the loaded articles? I noticed that when the action is triggered with the load more button it changes the permalinks into absolute URL’s and this creates some conflict with my setup. I was wondering how you would approach this?

  40. Hey, thank you for the code but I can’t make it works!

    I use it only for the div displaying my posts in front-page.php but it load all the posts on every pages, like my category.php pages.

    But, it load everything without scrolling, I don’t understand why.

    This is in a 100% handmade theme so there is only the minimal used code :/

    1. Make sure the code is located in front-page.php, or you’re checking if( is_front_page() ) before running it.

  41. Thank you for this great article.

    I was able to make it work on archives and on a front-page with a secondary loop.

    When I need to query multiple post types on the front-page, I get a notice because there’s an array to string conversion. It disappears if I replace `array_map( ‘esc_attr’, $_POST[‘query’])` by `$_POST[‘query’]` in be_ajax_load_more().

  42. Hey Bill,

    Wonderful write-up, thanks for publishing this how-to. I’ve been tinkering with it for a couple days now and with the help of the above comments got it dialed in for my “home” page needs, complete with an excluded category and offset posts_per_page from the first page onward.

    The trouble is, the above category exclusion and offset posts_per_page wind up applying to all places where infinite scrolling is used, such as categories and archives. I’m attempting to modify the be_ajax_load_more function so it only adds the exclusion and offset $args when on the home page, but is_home always returns false within be_ajax_load_more. Am I missing something obvious?

    1. Rather than trying to detect that from within the ajax query, I recommend you pass that data along as a localized argument. In be_load_more_js(), add something like if( is_home() ) $args['is_home'] = true; and then look for that in the ajax query.

      Or even better, we’re passing the query along as an argument, so if is_home(), modify that query with whatever changes you want (excluded category and offset).

      1. Thanks Bill, I figured it was something simple…I should have seen that. 🙂

        I’ve almost got it working going that second route: the excluded category and offset appear to be working flawlessly, but pagination is getting lost in the mix somewhere. Page 2 loads as expected, but page 3 and onward are just a repeat of page 2. I’d added the following to be_load_more_js:

        $ppp = get_option(‘posts_per_page’);
        $paged = (get_query_var(‘paged’)) ? get_query_var(‘paged’) : 1;
        if (is_home()){ // Alter the home query
        $args[‘query’][‘cat’] = -1528;
        $args[‘query’][‘posts_per_page’] = $ppp;
        $args[‘query’][‘offset’] = 21 + $ppp * ($paged – 1);
        }

        It seems the value of $paged from $wp_query is stuck on the initial value for page 1. I’d prefer to keep the JS unaltered and do all the math in PHP, but from what I’m reading the only way to make it work is to do the offset calculation in the JS. Is that correct?

      2. Correct, you need the page variable in JS because you’re loading new content via JS – page number is changing without the entire page being reloaded.

        In the Javascript file, change this line to offset: 21 + beloadmore.ppp * ( page - 1)

        Then include posts per page (ppp) as one of the variables you’re localizing here.

        1. Thanks for the quick reply, that got me back on track.

          It dawned on me that a hybrid solution might accomplish what I need, while keeping the JS as vanilla as possible—so it functions without edit on other pages, or even other sites with different offsets. For posterity, here’s what I wound up with in be_load_more_js:

          if (is_home()){ // Alter the home query
          $args[‘ishome’] = 1; // Tell jQuery we’re home
          $args[‘query’][‘cat’] = -1528; // Keep skipping the Legacy category
          $args[‘query’][‘posts_per_page’] = get_option(‘posts_per_page’); // Restore the default WP PPP
          }

          …and picking it up again in be_ajax_load_more:

          if ($_POST[‘ishome’] == 1){ // Altered home query offset
          $args[‘offset’] = 21 + $args[‘posts_per_page’] * ($args[‘paged’] – 2);
          }

          Then I just added this after line 25 in load-more.js:

          ishome: beloadmore.ishome,

  43. Hello Bill,

    This seems like a very useful plugin, but what I’m looking for in particular is one that keeps loading posts much like your “BE Full Post Scroll” plugin. Problem is, the GitHub repository no longer exists.
    Initially, I tried implementing the first option of this infinite scroll plugin, and I was returned with:
    “Uncaught TypeError: Cannot read property ‘top’ of undefined
    at load-more.js?ver=1.0:19”

    I decided to implement the “functions.php” code into the actual functions.php theme file, and the error pops up whenever I reach the bottom of the post, likely indicating its use. Regardless, is there any chance you still have the necessary functions available for the scroll used on the Denton Forum posts? I feel that option would be a better fit for my website after the redesign.

      1. Thanks for the quick reply, Bill.
        I tried saving the plugin as a ZIP and installing it conventionally (upload), but nothing appears to work in terms of navigation. According to the source code, it DOES call the JS functions from ScrollSpy, leaving behind this CDATA element.
        /* */

        Said URL:
        https://atomicbranding.co/uncategorized/test-2/

        1. EDIT: Sorry, should have seen that coming when I left the syntax.

          var args = {“container”:”.content”,”post”:”.entry”,”next”:”.post-navigation a[rel=\”prev\”]”,”offset”:”2000″,”delay”:”400″,”debug”:””};
          /* ]]>

          1. You’ll need to customize the arguments to match the class names used in your theme. Use the be_full_post_scroll_args filter, see here.

        2. Okay, so far I have been able to load more pages, but the result seems far from your example, the Denison Forums. For instance, only one additional page will load, the URL stays the same, and the header and footer are duplicated. Any particular reason why? Wrong class attributes?

          1. Yes, it sounds like you aren’t using the correct classes.
            – Container is the element to which the newly retrieved post is appended. The default is .content
            – Post is the element that is the post; this is appended to the container
            – Next is the link that contains the URL for the next post you want loaded. You should use get_previous_post_link() somewhere on the page, and use this parameter to target that link

            If you need additional help implementing this, I recommend you hire someone on Codeable.

          2. Hi Carson,

            Did you ever get this to work? I’ve been going over the classes again and again and again –I’m about to break my keyboard in half! Maybe I should sleep, it is 6am after all.

            I’d greatly appreciate your help!

            Thanks,
            Roselle

  44. Thanks for the tip. In regard to the link I provided above, is there any chance you could point out which classes should be assigned to the $args array based on the source code? I believe that might be the part where I’ve had trouble in the past.

  45. Dang. I can read php and javascript and understand what I am reading. I am comfortable tweaking, deleting, adding php code and am building a theme from scratch right now, slowly. Began as a vanilla html markup coder many, many years ago. But, while I want to do this all myself and get why this is better than plugins, which I tend to hate after many happy years with Drupal, I guess it’s best for me to go to Codeable also. Can you tell me, though, what skills should I look for in a codeable developer to effect this infinity scroll for a home page that will be displaying a 3-col grid of different custom content types. That will help me narrow my search. Thank you in advance.

    1. A familiarity with WordPress and Javascript.

      But really, there are plugins that do a good job of infinite scroll. I believe Jetpack has a module for it. This tutorial is really for developers who want to build it themselves. I recommend trying existing plugins before hiring someone to build it custom.

      1. I agree Bill, there are some good free plugins for this. I actually really like Ajax Load More ( https://wordpress.org/plugins/ajax-load-more/)
        This plugin uses the same method for loading posts as you outline in your tutorial and you can use the same functions to display posts which makes it easy to match the styling.

        Thanks for the great tutorial BTW.

  46. Thanks for the tutorial, Bill.
    I’m trying to implement it my archive page but I’m not quite sure what I’m doing wrong.
    Does this feature override the “Blog pages show at most” setting in “Reading Settings” on the WP Dashboard?
    Do I have to do anything to my index.php page?
    Right now it looks like this:

    get_header();
    if (is_single()) {
    get_template_part(‘partials/loop’, ‘single’);
    } else {
    get_template_part(‘partials/archive-loop’, ‘index’);
    }
    get_footer();

    and my archive-loop-index.php page has a 3 column layout.

    Thanks again!

  47. Hi Bill,

    Thanks so much for this post, and for taking the time to answer comments !

    I have read through all of the comments but am still struggling to fully implement this solution for a custom query on a page. It works beautifully if I hard code the args in be_ajax_load_more. Any direction on how to pass the appropriate query arguments would be much appreciated!

  48. Bill, O Mighty WordPress/Genesis Guru…

    Thank you so much for your time and effort posting this, and helping us as much as you have already. I know you don’t have to debug any of our errors (for free, I might add), but thanks for responding to our comments and helping as much as you can.

    With that being said, I wont take up too much of your time, just hoping you could point me in the right direction…

    Okay, so I am using your ‘be-full-post-scroll’ plugin, filtered it with my own arguments, and created the ‘content-partial.php’ template.

    I can get the next (actually previous) post to load, BUT it loaded the site header and site footer too. So I removed them in the template. After that, it seemed like everything was fine –except that when I looked at the page source, it was still outputting the html meta and scripts of the next post. Also, the URL in the address bar doesn’t change at all. 🙈

    Looking over the previous comments, I could it be that the classes in my $args are wrong…? But when I look at the code, the classes .content and .entry should work. I just don’t even know. What can I do?

    Thanks in advance for your help!

    1. It sounds like your partial is loading an entire page rather than actually a “partial” page. Inside that file you should only output the markup you need. If you’re using genesis, don’t call the genesis(); function as that will load EVERYTHING.

  49. Bill,

    Thanks for pointing me in the right direction re: the template. I’m no longer calling genesis(); so I got that part working fine now.

    I still have the issue of the URL not changing on scroll down or up (and back/forward button functionality as an extension of the URL change).

    If you/anyone here knows how to remedy that, I’d greatly appreciate it 😇

    Thanks,
    Roselle

  50. Thanks for this tutorial, but as I am fairly new to ajax, javascript and php, it would appreciate if you can give me a simple example of be_post_summary(), just to give me some idea where to begin

    Thank you

        1. Sorry just an error form my part, I have commented out the be_post_summary().

          But it does not work, because if i delete $args[‘paged’] = esc_attr( $_POST[‘page’] );, it loads the same 3 posts over and over each time i click the button, and I re insert $args[‘paged’] = esc_attr( $_POST[‘page’] ); it just loads only one post and thats it

          Any help?

        2. I recommend looking at what arguments you’re passing to the AJAX function, specifically the ‘page’ parameter.

Leave a comment