infinite scroll enabling (wordpress)

1 Views

So, I found this tutorial to enable infinite scroll:http://wptheming.com/2012/03/infinite-scroll-to-wordpress-theme/

Basically I need to have js file and add the following to the function.php

Read More
/**
 * Infinite Scroll
 */
function custom_infinite_scroll_js() {
    if( ! is_singular() ) { ?>
    <script>
    var infinite_scroll = {
         loading: {
            img: "<?php echo get_template_directory_uri(); ?>/images/ajax-loader.gif",
            msgText: "<?php _e( 'Loading the next set of posts...', 'custom' ); ?>",
            finishedMsg: "<?php _e( 'All posts loaded.', 'custom' ); ?>"
        },
        "nextSelector":"#nav-below .nav-previous a",
        "navSelector":"#nav-below",
        "itemSelector":"article",
        "contentSelector":"#content"
    };
    jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll   );
    </script>
    <?php
    }
}
add_action( 'wp_footer', 'custom_infinite_scroll_js',100 );

Where I need to change the following parameter:

  • img: The path to the ajax loader image
  • nextSelector: Selector for the “previous posts” link.
  • navSelector: Containing selector for the previous/next navigation links.
  • itemSelector: Selector for posts. This might be .hentry, .post, .etc
  • contentSelector: Containing div for your posts.

Well, I am stuck.

This is my php: 

$defaults = array(
        'base' => add_query_arg( 'paged', '%#%' ),
        'format' => '',
        'total' => $max_num_pages,
        'current' => $current,
        'prev_next' => true,
        'prev_text' => __( '&larr;',my_site),
        'next_text' => __( '&rarr;',my_site), 
        'show_all' => false,
        'end_size' => 1,
        'mid_size' => 1,
        'add_fragment' => '',
        'type' => 'plain',
        'before' => '<div class="pagination">', 
        'after' => '</div>',
        'echo' => true,
        'use_search_permastruct' => true
  );

And here is html output that I am currently getting: 

 <div class="pagination">
    <a class="prev page-numbers" href="example.com/dfgdg/page/2/">←</a>
    <a class="page-numbers" href="http://example.com/dfgdg/page/1/">1</a>
    <a class="page-numbers" href="http://example.com/dfgdg/page/2/">2</a>
    <span class="page-numbers current">3</span>
    <a class="page-numbers" href="http://example.com/dfgdg/page/4/">4</a>
    <span class="page-numbers dots">…</span>
    <a class="page-numbers" href="example.com/dfgdg/page/20/">20</a>
    <a class="next page-numbers" href="example.com/dfgdg/page/4/">→</a>
</div>

Could someone help me out with how to modify it?

or

is there a different approach that I should consider?

Thanks bunch!!

Em

Post Views: 1

Related posts

1 comment

  1. Basically what is going wrong here is that you are copy pasting without understanding the underlying code.

    In the JS snippet you added to the PHP you are adding on which element the infinite scrolling should work (contentSelector)

    In the example this is set to “#content”, but in your code it should be “.pagination”.

    So if you change the contentSelector it should work 🙂

    edit:
    i would advice that you change the “before” in your php to id=”pagination”. This might break your template, so make sure to test it with different pages, but this way you can select on the id instead of the class which is more reliable and faster

Comments are closed.