Codex Ajax Load More Post WordPress

• Create file main.js with coded after :

</pre>
jQuery(function($){

var page = 1;
var loading = true;
var $window = $(window);
var $content = $("body.blog #content");
var load_posts = function(){
$.ajax({
type : "GET",
data : {action: 'cwp_loop',numPosts : 4, pageNumber: page},
dataType : "html",
url : url.ajaxurl,
beforeSend : function(data,settings){
$content.append('<div id="temp_load" style="text-align:center">\
<img src="' + $('#test').val() + '/images/ajax-loader.gif" />\
</div>');
$(".loadMoreDiv").remove();
},
success : function(data){
$("#temp_load").remove();
$data = $(data);
$content.append($data);
},
error : function(jqXHR, textStatus, errorThrown) {
$("#temp_load").remove();
alert(jqXHR + " :: " + textStatus + " :: " + errorThrown);
}
});
}

$('.loadmore-article').die("click").live("click",function() {
var content_offset = $content.offset();

loading = true;
page++;
load_posts();

});
load_posts();
});
<pre>

• Paste codex with into the functions.php

</pre>
wp_enqueue_script( 'cwp_ajaxLoop', get_template_directory_uri() . '/js/ajaxLoop.js', array("jquery"), '20120206', true );
wp_localize_script( 'cwp_ajaxLoop', 'url', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

add_action('wp_ajax_cwp_loop', 'cwp_loop_callback');
add_action('wp_ajax_nopriv_cwp_loop', 'cwp_loop_callback');
function cwp_loop_callback() {
global $post;
$numPosts = (isset($_GET['numPosts'])) ? $_GET['numPosts'] : 0;
$page = (isset($_GET['pageNumber'])) ? $_GET['pageNumber'] : 0;

query_posts(array(
'posts_per_page' => $numPosts,
'paged' => $page
));
$cpage = $page;

while ( have_posts() ) : the_post(); ?>
<article class="blog-box clearB">
<div class="blog-head clearB">
<div class="blog-date">
<div class="day"><?php $day = get_the_date('d'); echo $day; ?></div>
<div class="mondth-yr"><?php $date = get_the_date('M Y'); echo strtoupper($date); ?></div>
</div>
<div class="blog-avatar hidden-mobile left"><?php echo get_avatar(get_the_author_meta('ID'),72); ?></div>
<div class="blog-label left">
<label><a href="<?php $category = get_the_category(); echo get_category_link($category[0]->cat_ID);?>"><?php $cats = get_the_category($post->ID); if(!empty($cats)) echo $cats[0]->cat_name; ?></a>
</label>
<h1><?php the_title(); ?></h1>
<div class="by"><span>By</span> <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' )); ?>"><?php the_author(); ?></a></div>
</div>
</div>
<div class="blog-content right">
<section>
<?php
if ( has_post_thumbnail($post->ID) ) {
echo get_the_post_thumbnail($post->ID);
}
?>
<p><?php the_excerpt(); ?></p>
<a class="link1 right" href="<?php the_permalink(); ?>">Continue Reading</a></section>
<div class="comment-likes">
<div class="likes-box left">
<div class="like-heart left"> 12 </div>
<a href="#">1 Likes</a> </div>
<div class="comment-box right">
<div class="comment-bg left"> comment-bg </div>
<a href="#"><?php comments_number( '0 Comments', '1 Comment', '% Comments' ); ?></a> </div>
</div>
</div>
</article>
<?php endwhile;

$all = wp_count_posts();
$pall = ceil($all->publish/$numPosts);
if($cpage<$pall){
?>

<div class="loadMoreDiv right">
<div class="bungot"> <a class="loadmore-article" href="javascript:void(0);">Load More Articles</a> <a class="back-top right" href="#">Back to Top</a> </div>
</div>
<?php }

die(); // this is required to return a proper result
}
<pre> 

• Paste codex with into the index.php place you want showing up ?

<section id="content" class="left">
 <!-- CONTENT START -->
 
 
 <!-- CONTENT END -->
 </section>
 <input type="hidden" id="test" value="<?php echo get_template_directory_uri(); ?>" /> 

Tagged with: ajax load more wordpress, lazy loading post wordpress