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?

  • 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. – Keelan 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! – Keelan Mar 14 '13 at 15:11
7
+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.

  • I'm having trouble with giving the bounty to you on my phone, so will give it as soon as I got a pc. – Keelan Mar 15 '13 at 12:54
  • @CamilStaps Gladly there's a "grace period" ;) Thanks. – kaiser Mar 15 '13 at 14:01
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.

  • 2
    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
  • 1
    This is still an incomplete answer. – s_ha_dum Apr 7 '13 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, privacy policy and cookie policy

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