Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #681490

    I had a client who wanted infinite scroll for the articles on their site. Found a few posts related to Enfold and infinite scroll but nothing that was a concrete answer for what I wanted to do — using the Avia Template Builder I created a section page (it’s for a magazine) that has a blog posts content block at the bottom. I wanted that block to scroll. Turned out to be fairly simple to implement, posting this here in case it helps others.

    In your child theme’s — you are using one, right ;) — functions.php file add the following:

     *  Add infinite scroll to section pages like Eat / Drink
     *  Uses
    add_action( 'wp_enqueue_scripts', 'load_jscroll' );
    function load_jscroll(){
        wp_enqueue_script('jscroll', get_stylesheet_directory_uri().'/js/jquery.jscroll.min.js', array( 'jquery')  );
    function infinite_scroll() {
        global $avia_config;
            echo '<script type="text/javascript">
                jQuery( ".content" ).jscroll( {
                nextSelector: "span.current + a",
                contentSelector: ".article-grid",
                autoTrigger: true
            } )
    add_action( 'wp_footer', 'infinite_scroll' );

    On your page insert your blog posts element with pagination enabled. I gave mine a custom CSS class of article-grid to make it easy to target that portion of the page. In the code above you see the contentSelector parameter — that’s an optional parameter that lets you select only a portion of a page to be appended by infinite scroll. Since my page has lots of items at the top that I don’t want being reloaded as I scroll I use the custom css class to only grab the next batch of articles.

    When you get to the last batch of articles you would normally see the pagination, which I didn’t want. A quick css rule takes care of that:

    /** hide navigation since we're using jQuery infinite scroll */

    This is a pretty bare bones example. I’m using infinite scroll everywhere so I didn’t limit this to specific pages or content types (which you could easily do by wrapping the infinite_scroll() function in some conditional checks. Ex: is_frontpage() if you only wanted this to apply to the homepage of your site.

    You can grab the js file here: github link as well as see the other options available to you.

    Hopefully that helps someone else get going. Works perfectly for our needs.


    Hi wunderdojo,

    Great, thanks for sharing! Much appreciated :-)



    Thanks for sharing wunderdojo. I’ve tried to implement but I think Enfold has been updated to much since this answer. Should this work regardless of theme updates?



    I’m not sure. It’s still live on the site I did it for but I don’t know how current their version of Enfold is. It’s just javascript though so unless it’s causes an conflicts (check the Chrome dev console) it should still work.


    Hey there, thanks for the quick reply and yes check the console and there was an error with the javascript for .content which is why I thought some theme changes had been made. Could too share the address for the site you added it too? Thanks.


    The .content() selector is just looking for a div with that class applied so it could be that the class names have changed and you’ll need to adjust. Here’s a link to it in use:


    OK thanks. can’t see much difference but this line is being added to the template-page <div class=”scroll-inner”> which I assume is being applied by the script.


    Correct, basically what it does is this: You have a block on your page where you’ve loaded say the five most recent blog posts:

    <div id='latest-posts' class='content'>
         <div id='post-one'>... </div
         <div id='post-two'>... </div>
         <a href='link-to-next-posts'>Older Posts</a>

    So the javacript is fetching thet content from that next link and appending it to the containing div (#latest-posts). You need to make sure that you’re targeting an existing element on your page. For me there was a block with the class .content applied to it. On your page you’ll want to see what the parent element of the content you want to autoload is.

    • This reply was modified 4 years, 2 months ago by wunderdojo.

    Thanks of that. I’ve had a look but my page is made more complex as i’m using the blog post grid option. I’ve tried to target the right element but it’s a bit out of my knowledge. Thanks for your help again.



    : Is the site live? Please post the URL so that we can check it. Did you apply a custom CSS class attribute to the blog posts element as @wunderdojo suggested?


    Best regards,


    Hi Ismael, yes I tried the custom class but still getting a javascript error in the console. I’ve set the page currently to show all posts but can change back if you need to test?




    Yes, please create a new thread/ticket and post the details in the private field. We’ll check it there. Also, it would be awesome if you can create a test page or a copy of the blog page.

    Best regards,

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.