├── README.md
├── your_template.php
├── js
    └── script.js
└── functions.php


/README.md:
--------------------------------------------------------------------------------
1 | wp-load-more-ajax
2 | =================
3 | 
4 | Tutorial on how to implement simple Load More posts functionality via AJAX.
5 | 
6 | Hope you will find this useful.
7 | 


--------------------------------------------------------------------------------
/your_template.php:
--------------------------------------------------------------------------------
 1 | <!-- your HTML: -->
 2 | <div id="posts_list">
 3 | 	<article class="single-article"> <!-- posts content --> </article>
 4 | 	<article class="single-article"> <!-- posts content --> </article>
 5 | 	<article class="single-article"> <!-- posts content --> </article>
 6 | 	<article class="single-article"> <!-- posts content --> </article>
 7 | 	<article class="single-article"> <!-- posts content --> </article>
 8 | 	<article class="single-article"> <!-- posts content --> </article>
 9 | </div>
10 | 
11 | <a class="load_more" data-nonce="<?php echo wp_create_nonce('load_posts') ?>" href="javascript:;">Load more</a>
12 | 


--------------------------------------------------------------------------------
/js/script.js:
--------------------------------------------------------------------------------
 1 | (function($){
 2 | 
 3 | //javasctipt 
 4 | //load more click function: improved to prevent double click and fire funciton only after content has been loaded (good for slow internet connection)
 5 | $('.load_more:not(.loading)').live('click',function(e){
 6 | 	e.preventDefault();
 7 | 	var $load_more_btn = $(this);
 8 | 	var post_type = 'post'; // this is optional and can be set from anywhere, stored in mockup etc...
 9 | 	var offset = $('#posts_list .single-article').length;
10 | 	var nonce = $load_more_btn.attr('data-nonce');
11 | 	$.ajax({
12 | 		        	type : "post",
13 | 		        	context: this,
14 | 		         	dataType : "json",
15 | 		         	url : headJS.ajaxurl,
16 | 					data : {action: "load_more", offset:offset, nonce:nonce, post_type:post_type, posts_per_page:headJS.posts_per_page},
17 | 		         	beforeSend: function(data) {
18 | 						// here u can do some loading animation...
19 | 						$load_more_btn.addClass('loading').html('Loading...');// good for styling and also to prevent ajax calls before content is loaded by adding loading class
20 | 		         	},
21 | 		         	success: function(response) {
22 | 						if (response['have_posts'] == 1){//if have posts:
23 | 							$load_more_btn.removeClass('loading').html('Load More');
24 | 							var $newElems = $(response['html'].replace(/(\r\n|\n|\r)/gm, ''));// here removing extra breaklines and spaces
25 | 							$('#posts_list').append($newElems);
26 | 						} else {
27 | 							//end of posts (no posts found)
28 | 							$load_more_btn.removeClass('loading').addClass('end_of_posts').html('<span>End of posts</span>'); // change buttom styles if no more posts
29 | 						}
30 | 		         	}
31 | 		      	});
32 | });
33 | 
34 | });
35 | 


--------------------------------------------------------------------------------
/functions.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | // enqueue_scripts: make sure to include ajaxurl, so we know where to send the post request
 3 | function dt_add_main_js(){
 4 |   
 5 |   wp_register_script( 'main-js', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '1.0', false );
 6 |   wp_enqueue_script( 'main-js' );
 7 |   wp_localize_script( 'main-js', 'headJS', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), 'templateurl' => get_template_directory_uri(), 'posts_per_page' => get_option('posts_per_page') ) );
 8 |   
 9 | }
10 | add_action( 'wp_enqueue_scripts', 'dt_add_main_js', 90);
11 | 
12 | 
13 | add_action( "wp_ajax_load_more", "load_more_func" ); // when logged in
14 | add_action( "wp_ajax_nopriv_load_more", "load_more_func" );//when logged out 
15 | //function return new posts based on offset and posts per page value
16 | function load_more_func() {
17 |   //verifying nonce here
18 |     if ( !wp_verify_nonce( $_REQUEST['nonce'], "load_posts" ) ) {
19 |       exit("No naughty business please");
20 |     }     
21 |   $offset = isset($_REQUEST['offset'])?intval($_REQUEST['offset']):0;
22 |   $posts_per_page = isset($_REQUEST['posts_per_page'])?intval($_REQUEST['posts_per_page']):10;
23 |   //optional, if post type is not defined use regular post type
24 |   $post_type = isset($_REQUEST['post_type'])?$_REQUEST['post_type']:'post';
25 |   
26 |   
27 |   ob_start(); // buffer output instead of echoing it
28 |   $args = array(
29 | 	  			'post_type'=>$post_type,
30 | 				'offset' => $offset,
31 | 				'posts_per_page' => $posts_per_page,
32 | 				'orderby' => 'date',
33 | 				'order' => 'DESC'
34 | 					);
35 |   $posts_query = new WP_Query( $args );
36 |   
37 |   
38 |   if ($posts_query->have_posts()) {
39 | 	  //if we have posts:
40 | 		  $result['have_posts'] = true; //set result array item "have_posts" to true
41 | 		  
42 | 		  while ( $posts_query->have_posts() ) : $posts_query->the_post(); ?>
43 | 			<article id="post-<?php the_ID(); ?>" class="single-article" >
44 | 				<?php //here goes your post content:?>
45 | 				<h1><?php the_title(); ?></h1>
46 | 				<?php the_content(); ?>
47 | 			</article>
48 | 			<?php endwhile;
49 | 		$result['html'] = ob_get_clean(); // put alloutput data into "html" item
50 |   } else {
51 | 	  //no posts found
52 | 	  $result['have_posts'] = false; // return that there is no posts found
53 |   } 
54 |         if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
55 |             $result = json_encode($result); // encode result array into json feed
56 |             echo $result; // by echo we return JSON feed on POST request sent via AJAX
57 |         }
58 |         else { 
59 |             header("Location: ".$_SERVER["HTTP_REFERER"]);
60 |         }
61 |   die();
62 | }
63 | ?>
64 | 


--------------------------------------------------------------------------------