- 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(); ?>" />