Monday, August 17, 2020
How to make load more button in wordpress ?
Step 1. Paste below code and create page template.
<!--php /* Template Name: Load More template */
get_header();
?-->
<!--php
$args = array(
'post_type' =--> 'post',
'paged' => 1
);
// The Query
$the_query = new WP_Query($args);
// The Loop
if ($the_query->have_posts())
{
echo '<ul id="container">';
while ($the_query->have_posts())
{
$the_query->the_post();
echo '<li>' . get_the_title() . '</li>';
}
echo '</ul>
<button id="load_more">Load More</button>
';
}
else
{
// no posts found
}
/* Restore original Post Data */
wp_reset_postdata();
get_footer();
?>
Step 2. Paste below code in function.php file
add_action( 'wp_footer', 'my_action_javascript' );
function my_action_javascript() { ?>
<script type="text/javascript" >
jQuery(document).ready(function($) {
var page_count = '<?php echo ceil(wp_count_posts('post')->publish / 2); ?>';
var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
var page = 2;
jQuery('#load_more').click(function(){
var data = {
'action': 'my_action',
'page': page
};
jQuery.post(ajaxurl, data, function(response) {
jQuery('#container').append(response);
if(page_count == page){
jQuery('#load_more').hide();
}
page = page + 1;
});
});
});
</script> <!--php
}
// Action
add_action('wp_ajax_my_action', 'my_action');
add_action('wp_ajax_nopriv_my_action', 'my_action');
function my_action()
{
$args = array(
'post_type' =--> 'post',
'paged' => $_POST['page']
);
// The Query
$the_query = new WP_Query($args);
// The Loop
if ($the_query->have_posts())
{
while ($the_query->have_posts())
{
$the_query->the_post();
echo '<li>' . get_the_title() . '</li>';
}
}
else
{
// no posts found
}
/* Restore original Post Data */
wp_reset_postdata();
wp_die();
}
Subscribe to:
Comments (Atom)