Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
WordPress Read More
<?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();
}
<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>
// 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);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.