7

I added infinite scroll support of the Jetpack plugin to my own theme using this tutorial:

add_theme_support( 'infinite-scroll', array(
    'container'  => 'content',
    'footer' => false,
    'render' => 'vividflow_infscroll_render',
    'wrapper' => 'post_summaries',
    'posts_per_page' => 12,
    'type' => 'scroll'
) );

Now I need something like a counter which increments every time additional posts are loaded.

I know that the new posts are placed in an infinite-view-n class and I have a JavaScript function which I want to call on that new loaded class:

function setupPostSummaries(counter) {
    jQuery('.infinite-view-'+counter).doSomething();
}

So I guess I need a PHP variable in the infinite scroll render function or the loop which increments every time additional posts are loaded. Then I can do in the end of The Loop:

<script type="text/javascript">setupPostSummaries(<?php the_counter(); ?>);</script>

Is such a variable there already? Or is there an other way to achieve my goal?

4
  • Any progress on this one?
    – kaiser
    Commented Mar 14, 2013 at 15:05
  • @kaiser oh, sorry I didn't reply. Your answer works good, but I wait with accepting and rewarding so that others can reply as well.
    – user26607
    Commented Mar 14, 2013 at 15:08
  • Fully ok for me. Btw: I edited some minor things, as numberposts is deprecated. Added a replacement.
    – kaiser
    Commented Mar 14, 2013 at 15:10
  • I saw - didn't even notice it. But see you in 20 hours!
    – user26607
    Commented Mar 14, 2013 at 15:11

3 Answers 3

6
+100

Grabbing the values

Normally you just access the $wp_query object or, in case you did do a custom query like $my_query = new WP_Query();, the $my_query object. From there you can get the $wp_query->numberposts (or better, as non-deprecated: $wp_query->found_posts) for the full amount of posts and $wp_query->posts_per_page for the number of posts per page.

Inside a plugin

Just write a small plugin to do this job for you:

<?php
/* Plugin Name: Infinite Scroll Counter Script */
add_action( 'wp_enqueue_scripts', 'wpse88834_add_script' );
function wpse88834_add_script()
{
    wp_enqueue_script(
        'wpse_counter',
        plugin_dir_url( __FILE__ ).'js/counter.js',
        array( 'jquery' ), // the infinte scroll script should also be added as dependency
        filemtime( plugin_dir_path( __FILE__ ).'js/counter.js' ),
        true
    );
    wp_localize_script(
        'wpse_counter',
        'wpse_counter_obj',
        array(
            'numberposts'    => $GLOBALS['wp_query']->numberposts,
            'found_posts'    => $GLOBALS['wp_query']->found_posts,
            'posts_per_page' => $GLOBALS['wp_query']->posts_per_page,
        )
    );
}

When you're then inside your script, you can access your data there easily

/* Inside ~/js/counter.js */
jQuery( document ).ready( function($) {
    /* wpse_counter_obj.numberposts */
    wpse_counter_obj.found_posts
    wpse_counter_obj.posts_per_page
    // Current
    var post_count_curr = 0;
    post_count_curr  += wpse_counter_obj.found_posts;
    console.log( post_count_curr  );
} );

Now you just have to add an event listener to the infinite scroll and increment the counter.

0
2

I've run into this same issue, and used the following to get the page number:

$curPage = (get_query_var('paged') ? get_query_var('paged') : 1) + 1;

I cannot say why its off by one when doing a custom WP_Query yet its fine if I don't - this may be something specific to the theme I'm customizing. But this value does increment for each call.

3
  • 2
    Please explain how this will help with content loaded viea Javascript. Where are you suggesting this code be placed?
    – s_ha_dum
    Commented Mar 11, 2013 at 3:57
  • The content is still rendered server side, javascript is just making the request.
    – ViNull
    Commented Apr 7, 2013 at 14:56
  • 1
    This is still an incomplete answer.
    – s_ha_dum
    Commented Apr 7, 2013 at 15:14
1

A solution to the problem of only affecting the last set of posts, but not to the question of getting a 'page number', is here:

All new posts are loaded in a div with class post_summaries. You can edit your JavaScript function so that it only affects the last element with this code:

function setupPostSummaries() {
    jQuery('.post_summaries').last().doSomething();
}

However, as said, this does solve the problem but not the question.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.