WORDPRESS - Make a load more posts button with Ajax - VARIANTA BUNA

WORDPRESS - Make a load more posts button with Ajax - VARIANTA BUNA

http://codex.wordpress.org/AJAX_in_Plugins
http://codex.wordpress.org/Function_Reference/wp_localize_script
http://www.garyc40.com/2010/03/5-tips-for-using-ajax-in-wordpress/

In functions.php:

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
}	


IN index.php sau unde am blogul:

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

In ajaxLoop.js:

// ajaxLoop.js
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();
});