Skip to content

Instantly share code, notes, and snippets.

@AlphaBlossom

AlphaBlossom/be_load_more_js.php

Last active March 29, 2019 23:34
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save AlphaBlossom/845721ab5c556933de0e6092296944b5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save AlphaBlossom/845721ab5c556933de0e6092296944b5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. AlphaBlossom revised this gist Aug 2, 2016. 2 changed files with 5 additions and 7 deletions.
    2 changes: 2 additions & 0 deletions be_load_more_js.php
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    <?php

    /**
    *
    * Javascript for Load More
    10 changes: 3 additions & 7 deletions load-more.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,6 @@
    /**
    *
    * Modified version of http://www.billerickson.net/infinite-scroll-in-wordpress/#comment-674098.
    * Adds spinner to show that it's working on loading more posts.
    * Adds "Load More" pagination and when no more posts will display "No More Posts".
    *
    * /
    // Modified version of http://www.billerickson.net/infinite-scroll-in-wordpress/#comment-674098.
    // Adds spinner to show that it's working on loading more posts.
    // Adds "Load More" pagination and when no more posts will display "No More Posts".

    jQuery(function($){

  2. AlphaBlossom created this gist Aug 2, 2016.
    28 changes: 28 additions & 0 deletions be_load_more_js.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    /**
    *
    * Javascript for Load More
    * Added conditional to not display on blog home page or single post pages
    * Added 'maxpage' to use in load-more.js to determine if there are no more posts
    *
    */

    function be_load_more_js() {

    global $wp_query;

    // Don't show load more on single pages, posts, etc except for blog home page
    if( !is_home() && is_singular() )
    return;

    $args = array(
    'nonce' => wp_create_nonce( 'be-load-more-nonce' ),
    'url' => admin_url( 'admin-ajax.php' ),
    'query' => $wp_query->query,
    'maxpage' => $wp_query->max_num_pages,
    );

    wp_enqueue_script( 'be-load-more', get_stylesheet_directory_uri() . '/js/load-more.js', array( 'jquery' ), '1.0', true );
    wp_localize_script( 'be-load-more', 'beloadmore', $args );

    }
    add_action( 'wp_enqueue_scripts', 'be_load_more_js', 9 );
    55 changes: 55 additions & 0 deletions load-more.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,55 @@
    /**
    *
    * Modified version of http://www.billerickson.net/infinite-scroll-in-wordpress/#comment-674098.
    * Adds spinner to show that it's working on loading more posts.
    * Adds "Load More" pagination and when no more posts will display "No More Posts".
    *
    * /

    jQuery(function($){

    $('#genesis-content').append( '<div class="load-more"><span class="fa-spinner-hidden"><i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i></span> MORE POSTS<span class="more-posts-arrow"></span></div>' );

    var button = $('#genesis-content .load-more');
    var page = 2;
    var loading = false;

    // Get max number of pages
    var maxpage = beloadmore.maxpage;

    // Remove Page links - .pagination
    $('#genesis-content .pagination').remove();
    $('body').on('click', '.load-more', function(){
    $(".fa-spinner-hidden").fadeIn( "slow" );
    if( ! loading ) {
    $(".fa-spinner-hidden").fadeOut( 1400 );
    loading = true;
    var data = {
    action: 'be_ajax_load_more',
    nonce: beloadmore.nonce,
    page: page,
    query: beloadmore.query,
    };
    $.post(beloadmore.url, data, function(res) {
    if( res.success) {
    // Add and Fade in new articles
    $(res.data).hide().appendTo('#genesis-content').fadeIn(1000);
    if( page >= maxpage) {
    // If last page, remove "load more" button and replace with "No more articles" text.
    $('#genesis-content .load-more').remove();
    $('#genesis-content').append( '<span class="no-more-posts">NO MORE POSTS</span>' );
    } else {
    $('#genesis-content').append( button );
    }
    page = page + 1;
    loading = false;
    } else {
    // console.log(res);
    }
    }).fail(function(xhr, textStatus, e) {
    // console.log(xhr.responseText);
    });
    }
    });

    });