WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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) {

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?

share|improve this question
Any progress on this one? – kaiser Mar 14 '13 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. – Camil Staps Mar 14 '13 at 15:08
Fully ok for me. Btw: I edited some minor things, as numberposts is deprecated. Added a replacement. – kaiser Mar 14 '13 at 15:10
I saw - didn't even notice it. But see you in 20 hours! – Camil Staps Mar 14 '13 at 15:11
up vote 7 down vote accepted

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:

/* Plugin Name: Infinite Scroll Counter Script */
add_action( 'wp_enqueue_scripts', 'wpse88834_add_script' );
function wpse88834_add_script()
        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' ),
            '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 */
    // 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.

share|improve this answer
I'm having trouble with giving the bounty to you on my phone, so will give it as soon as I got a pc. – Camil Staps Mar 15 '13 at 12:54
@CamilStaps Gladly there's a "grace period" ;) Thanks. – kaiser Mar 15 '13 at 14:01
There you go! Thanks a lot :-) – Camil Staps Mar 15 '13 at 14:36

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.

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

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() {

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

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.