-
-
Save edwinsiebel/065318f585608a27abd22dcee8ba2479 to your computer and use it in GitHub Desktop.
Very simple infinite scroll in WordPress. Handles also the back button. It will return the user to his previous position. Please read my comments.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //Just a random file for loading your posts to see that the infinite scroll works. | |
| <?php get_header(); ?> | |
| <div class="col-md-6 col-md-offset-3"> | |
| <div class="post-container"> | |
| <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> | |
| <div class="page-header post"> | |
| <h1><?php the_title(); ?></h1> | |
| <p><?php the_excerpt(); ?></p> | |
| </div> | |
| <?php endwhile; endif; ?> | |
| </div> | |
| <?php | |
| //You will probably want to wrap this in a div and hide it from your users. | |
| the_posts_pagination( array( | |
| 'mid_size' => 2, | |
| 'prev_text' => __( '<i class="fa fa-angle-double-left"></i>', 'textdomain' ), | |
| 'next_text' => __( '<i class="fa fa-angle-double-right"></i>', 'textdomain' ), | |
| )); | |
| ?> | |
| </div> | |
| <?php get_footer(); ?> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function($) { | |
| $(window).scroll(function() { | |
| var url = $('.nav-links .next').attr('href'); | |
| if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 150) { | |
| //To avoid repeating calls we set the paginate container to hold only text and we remove the links. | |
| //that way url variable would be empty, thus if statement would return false and not continure to the get call. | |
| $('.navigation').text("Fetching more posts..."); //You can optionally load an icon-loader or something. | |
| $(".loader").removeClass("hidden"); //Show the loader icon | |
| $.get(url, function(data) { | |
| var dom = $(data); | |
| var next_posts = dom.find('.posts-container').html(); | |
| var pagination = dom.find('.navigation').html(); | |
| $('.posts-container').append(next_posts); | |
| $('.navigation').html(pagination); //We want to load the new pagination with new links. | |
| $(".loader").addClass("hidden"); //Hide the loader icon | |
| //We want to check if we have any post content in session storage. | |
| //If we don't we will set it to empty string just incase an append to it the new data. | |
| var posts_to_append = sessionStorage.getItem("posts_to_append"); | |
| if(!posts_to_append) { | |
| posts_to_append = ""; | |
| } | |
| sessionStorage.setItem("posts_to_append", posts_to_append + next_posts); | |
| //Here we always need the newest pagination avaiable so we replace instead of appending. | |
| sessionStorage.setItem("pagination_to_append", pagination); | |
| }); | |
| } | |
| }); | |
| //Remove all of this and all the lines with sessionStorage in the function above if you don't want to | |
| //remember the user's previous location before he left the page. | |
| $(document).ready(function() { | |
| //We use to identify when user clicks the refresh icon. | |
| window.onbeforeunload = unloadPage(); | |
| function unloadPage() { | |
| var clicked_post_link = sessionStorage.getItem("clicked_post_link"); | |
| if(clicked_post_link === "no" || !clicked_post_link) { | |
| sessionStorage.removeItem("posts_to_append"); | |
| sessionStorage.removeItem("pagination_to_append"); | |
| window.scrollTo(0, 0); | |
| } | |
| } | |
| $(document).on( "click", "a", function(e) { | |
| e.preventDefault(); | |
| //If user doesn't click on a post link we will reset storage to its default. | |
| if($(this).hasClass('post-page')) { | |
| sessionStorage.setItem("scroll_position", $(window).scrollTop()); | |
| sessionStorage.setItem("clicked_post_link", "yes"); | |
| window.location = $(this).attr('href'); | |
| } else { | |
| sessionStorage.removeItem("posts_to_append"); | |
| sessionStorage.removeItem("pagination_to_append"); | |
| sessionStorage.setItem("clicked_post_link", "no"); | |
| window.location = $(this).attr('href'); | |
| } | |
| }); | |
| var scroll_position = sessionStorage.getItem("scroll_position"); | |
| var content = sessionStorage.getItem("posts_to_append"); | |
| var pagination = sessionStorage.getItem("pagination_to_append"); | |
| if(content) { | |
| $('.posts-container').append(content); | |
| $('.navigation').html(pagination); | |
| window.scrollTo(0, scroll_position); | |
| //We want to reset it so if user click page refresh it will reset the session. | |
| sessionStorage.setItem("clicked_post_link", "no"); | |
| } | |
| }); | |
| })(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment