javascript - Load More Posts Ajax Button in Wordpress -

i've had through old questions , tried many of different methods there seems to this. closest i've got working 1 here: how implement pagination on custom wp_query ajax

i've tried , doesnt work. absolutely nothing changes on page. if inspect load more button , click it, jquery making load more button action changes <a id="more_posts">load more</a> <a id="more_posts" disables="disabled">load more</a> doesnt seem right me anyway. it's not adding posts, think i'm missing simple life of me can't work out.

the code in template file is:

<div id="ajax-posts" class="row">     <?php      $postsperpage = 3;     $args = [         'post_type' => 'post',         'posts_per_page' => $postsperpage,         'cat' => 1     ];      $loop = new wp_query($args);      while ($loop->have_posts()) : $loop->the_post(); ?>         <div class="small-12 large-4 columns">             <h1><?php the_title(); ?></h1>             <p><?php the_content(); ?></p>         </div>         <?php     endwhile;       echo '<a id="more_posts">load more</a>';      wp_reset_postdata();      ?> </div> 

the code in functions file is:

function more_post_ajax(){     $offset = $_post["offset"];     $ppp = $_post["ppp"];      header("content-type: text/html");     $args = [         'suppress_filters' => true,         'post_type' => 'post',         'posts_per_page' => $ppp,         'cat' => 1,         'offset' => $offset,     ];      $loop = new wp_query($args);      while ($loop->have_posts()) { $loop->the_post();          the_content();     }     exit;  }  add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');  add_action('wp_ajax_more_post_ajax', 'more_post_ajax'); 

and jquery in footer is:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript">     jquery(document).ready( function($) {         var ajaxurl = "<?php echo admin_url('admin-ajax.php')?>";          // page on.         var page = 5;          // post per page         var ppp = 3;           $("#more_posts").on("click", function() {             // when btn pressed.             $("#more_posts").attr("disabled",true);              // disable button, temp.             $.post(ajaxurl, {                 action: "more_post_ajax",                 offset: (page * ppp) + 1,                 ppp: ppp             })             .success(function(posts) {                 page++;                 $("#ajax-posts").append(posts);                 // change this!                 $("#more_posts").attr("disabled", false);             });         });     }); </script> 

can see i'm missing or able help?

update 24.04.2016.

i've created tutorial on page https://madebydenis.com/ajax-load-posts-on-wordpress/ implementing on twenty sixteen theme, feel free check out :)

edit

i've tested on twenty fifteen , it's working, should working you.

in index.php (assuming want show posts on main page, should work if put in page template) put:

    <div id="ajax-posts" class="row">         <?php             $postsperpage = 3;             $args = array(                     'post_type' => 'post',                     'posts_per_page' => $postsperpage,                     'cat' => 8             );              $loop = new wp_query($args);              while ($loop->have_posts()) : $loop->the_post();         ?>           <div class="small-12 large-4 columns">                 <h1><?php the_title(); ?></h1>                 <p><?php the_content(); ?></p>          </div>           <?php                 endwhile;         wp_reset_postdata();          ?>     </div>     <div id="more_posts">load more</div> 

this output 3 posts category 8 (i had posts in category, used it, can use whatever want to). can query category you're in

$cat_id = get_query_var('cat'); 

this give category id use in query. put in loader (load more div), , pull jquery like

<div id="more_posts" data-category="<?php echo $cat_id; ?>">>load more</div> 

and pull category

var cat = $('#more_posts').data('category'); 

but now, can leave out.

next in functions.php added

wp_localize_script( 'twentyfifteen-script', 'ajax_posts', array(     'ajaxurl' => admin_url( 'admin-ajax.php' ),     'noposts' => __('no older posts found', 'twentyfifteen'), )); 

right after existing wp_localize_script. load wordpress own admin-ajax.php can use when call in our ajax call.

at end of functions.php file added function load posts:

function more_post_ajax(){      $ppp = (isset($_post["ppp"])) ? $_post["ppp"] : 3;     $page = (isset($_post['pagenumber'])) ? $_post['pagenumber'] : 0;      header("content-type: text/html");      $args = array(         'suppress_filters' => true,         'post_type' => 'post',         'posts_per_page' => $ppp,         'cat' => 8,         'paged'    => $page,     );      $loop = new wp_query($args);      $out = '';      if ($loop -> have_posts()) :  while ($loop -> have_posts()) : $loop -> the_post();         $out .= '<div class="small-12 large-4 columns">                 <h1>'.get_the_title().'</h1>                 <p>'.get_the_content().'</p>          </div>';      endwhile;     endif;     wp_reset_postdata();     die($out); }  add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax'); add_action('wp_ajax_more_post_ajax', 'more_post_ajax'); 

here i've added paged key in array, loop can keep track on page when load posts.

if you've added category in loader, you'd add:

$cat = (isset($_post['cat'])) ? $_post['cat'] : ''; 

and instead of 8, you'd put $cat. in $_post array, , you'll able use in ajax.

last part ajax itself. in functions.js put inside $(document).ready(); enviroment

var ppp = 3; // post per page var cat = 8; var pagenumber = 1;   function load_posts(){     pagenumber++;     var str = '&cat=' + cat + '&pagenumber=' + pagenumber + '&ppp=' + ppp + '&action=more_post_ajax';     $.ajax({         type: "post",         datatype: "html",         url: ajax_posts.ajaxurl,         data: str,         success: function(data){             var $data = $(data);             if($data.length){                 $("#ajax-posts").append($data);                 $("#more_posts").attr("disabled",false);             } else{                 $("#more_posts").attr("disabled",true);             }         },         error : function(jqxhr, textstatus, errorthrown) {             $loader.html(jqxhr + " :: " + textstatus + " :: " + errorthrown);         }      });     return false; }  $("#more_posts").on("click",function(){ // when btn pressed.     $("#more_posts").attr("disabled",true); // disable button, temp.     load_posts(); }); 

saved it, tested it, , works :)

images proof (don't mind shoddy styling, done quickly). post content gibberish xd

update

for 'infinite load' instead on click event on button (just make invisible, visibility: hidden;) can try with

$(window).on('scroll', function () {     if ($(window).scrolltop() + $(window).height()  >= $(document).height() - 100) {         load_posts();     } }); 

this should run load_posts() function when you're 100px bottom of page. in case of tutorial on site can add check see if posts loading (to prevent firing of ajax twice), , can fire when scroll reaches top of footer

$(window).on('scroll', function(){     if($('body').scrolltop()+$(window).height() > $('footer').offset().top){         if(!($loader.hasclass('post_loading_loader') || $loader.hasclass('post_no_more_posts'))){                 load_posts();         }     } }); 

now drawback in these cases never scroll value of $(document).height() - 100 or $('footer').offset().top reason. if should happen, increase number scroll goes to.

you can check putting console.logs in code , see in inspector throw out

$(window).on('scroll', function () {     console.log($(window).scrolltop() + $(window).height());     console.log($(document).height() - 100);     if ($(window).scrolltop() + $(window).height()  >= $(document).height() - 100) {         load_posts();     } }); 

and adjust accordingly ;)

hope helps :) if have questions ask.