CODEWITHSUNDEEP
phpjquerywordpress
Emily Turcato
Emily Turcato

Reputation: 591

infinite scroll enabling (wordpress)

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

/**
 * 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:

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

Upvotes: 5

Views: 680

Answers (2)

Michael
Michael

Reputation: 1517

I've seen several tutorials similar to this one, and they all seemed a bit too complex compared to the simple task we're trying to perform.

I came up with a simple JavaScript-only solution for this problem, which is available as a Gist on GitHub:

https://gist.github.com/Plaristote/36250fa999da634082d324c27b8cefdc

import InfiniteScroll from "./infinite-scroll.js";

// You might need to customize the `nextUrl` getter to your needs,
// for instance:
class CustomInfiniteScroll extends InfiniteScroll {
  get nextUrl() {
    return `${window.location.href}?paged=${this.currentPage + 1}`;
  }
}

CustomInfiniteScroll.factory({
  anchorSelector: "nav.pagination",
  postSelector: ".post",
  containerSelector: ".post-list",
  loadingElement: document.getElementById("loading-element"),
  endElement: document.getElementById("end-element")
});

You just have a few elements and selectors to setup, and you should be good to go:

  • anchorSelector will be the element that will trigger the fetching of new items when it becomes visible on screen,
  • postSelector is used to recognize which elements from the next pages' HTML should be appended to the HTML of the current page,
  • containerSelector is the element to which the items matched by postSelector will be appended
  • loadingElement should be an element that will be displayed when new items are being fetched,
  • endElement will be displayed appended after the container when no more pages are available. This element is optional.

Note that this is quite likely not the most efficient solution to the problem. This snippet of code fetches the entire HTML of each page, then extract the posts before appending them to the current page... which is why it doesn't need any PHP to work. It's not efficient, but it's a much simpler way to achieve this simple task.

Upvotes: 0

jimmy jansen
jimmy jansen

Reputation: 647

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

Upvotes: 1

Related Questions