load more function
wp_enqueue_script( 'themeplate-scripts', get_template_directory_uri() . '/assets/js/theme.min.js', array(
'jquery',
'wp-util'
), $version, true );
<?php
function gfb_get_load_more_button( $args, $append_to, $class = 'load-more-permalink load-more-news', $btn_text = 'Load More' ) {
$args = wp_parse_args( $args, array(
'posts_per_page' => 5,
'offset' => 0,
'category' => '',
'category_name' => '',
'orderby' => 'publish_date',
'order' => 'DESC',
'include' => '',
'exclude' => '',
'meta_key' => '',
'meta_value' => '',
'post_type' => 'post',
'post_mime_type' => '',
'post_parent' => '',
'author' => '',
'author_name' => '',
'post_status' => 'publish',
'tax_query' => [],
) );
echo '<a href="#" class="load-more ' . $class . '" data-appendto="' . $append_to . '" data-query="' . esc_js( json_encode( $args ) ) . '">' . $btn_text . '</a>';
}
add_action( 'wp_ajax_gfb_get_more_posts', 'gfb_get_more_posts' );
add_action( 'wp_ajax_nopriv_gfb_get_more_posts', 'gfb_get_more_posts' );
function gfb_get_more_posts() {
global $post;
$posts = get_posts( $_REQUEST );
ob_start();
if ( ! empty( $posts ) ) {
foreach ( $posts as $post ) {
setup_postdata( $post );
get_template_part( 'loop-templates/content' );
}
}
$html = ob_get_contents();
ob_get_clean();
$query = $_REQUEST;
$query['offset'] = intval( $query['offset'] ) + $query['posts_per_page'];
wp_send_json_success( [
'query' => $query,
'posts' => $html,
] );
}
window.Project = (function (window, document, $, undefined) {
'use strict';
var app = {
initialize: function () {
$('.load-more').on('click', app.handleLoadMore);
},
handleLoadMore: function (e) {
e.preventDefault();
var $button = $(this),
query = $button.data('query'),
btn_text = $button.text(),
$appendTo = $($button.data('appendto'));
$button.text('Loading....');
wp.ajax.send('gfb_get_more_posts', {
data: query,
success: function (res) {
$button.text(btn_text);
if (res.posts) {
query.offset = res.query.offset;
$appendTo.append(res.posts);
$button.attr('data-query', query);
} else {
$button.text('No More Posts');
}
},
error: function (error) {
$button.text('No More Posts');
console.log(error);
}
});
return false;
},
};
$(document).ready(app.initialize);
return app;
})(window, document, jQuery);