WordPress Read More

functions.php

<?php

add_action('wp_ajax_nopriv_listing_load_more', 'listing_load_more');
add_action('wp_ajax_listing_load_more', 'listing_load_more');

function listing_load_more()
{
  $next_page = $_POST['curPage']+1
  // this is where you put your code to get more posts. 
  // it's just a normal wp_query but you pass in the current page number from 
  // the posted form
  $filter_query_args = array(
      'post_type'      => 'page', // change this to custom post type or whatever
      'posts_per_page' => 5, // number of results
      'order'          => 'ASC',
      'orderby'        => 'title',
      'paged'          => $next_page,
  );
  
  $the_query = new WP_Query( $filter_query_args );

  // The Loop
  if ( $the_query->have_posts() ) {
  	while ( $the_query->have_posts() ) {
  		$the_query->the_post();
  		echo '<li>' . get_the_title() . '</li>';
  		echo '<article class="search-result">';
        echo '<div class="search-result__content">';
            echo get_the_title();
        echo '</div>'
      echo '</article>'
  	}
  } else {
  	// no posts found
  }
  /* Restore original Post Data */
  wp_reset_postdata();
}

page.php

<div class="large-12 columns search-results">
    <article class="search-result">
    <div class="search-result__content">
        Stuff goes here
    </div>
  </article>
  <article class="search-result">
    <div class="search-result__content">
        Stuff goes here
    </div>
  </article>
</div>
<a href="#" class="button" id="listing-load-more-button" data-current-page="1">Load More</a>

scripts.js

 // bind the read more button
$(document).on('click', '#listing-load-more-button', function(e) {
  // prevent the button from doing anything
  e.preventDefault();
  // update the button text to show we're loading more
  $('#listing-load-more-button').html('Loading...');
  // get the last element in the list, that we'll append after
  var lastArticle = $('.search-results article').last();
  // grab the current page from the button's data attribute, data-current-page
  var currentPage = parseInt($('#listing-load-more-button').data('currentPage'));
  
  $.ajax({
    url: '/wp-admin/admin-ajax.php', // don't change this
    type: 'post',
    data: {
        action: 'listing_load_more', // this corresponds to a hook in your functions
        query_vars: ajaxpagination.query_vars,
        curPage: currentPage
    },
    success: function (result) {
      // append the results to the end  
      $(lastArticle).last().after(result);
      // change the button text back
      $('#listing-load-more').html('Load More');
      // scroll to the newest entries
      $('html, body').animate({
          scrollTop: $(lastArticle).offset().top
      }, 750, 'easeInOutQuad');
      // update our current page number
      $('#listing-load-more-button').data('currentPage',currentPage + 1);
    }
  });
  
  $('#listing-load-more').data('currentPage',currentPage + 1);

});