Scrolling Posts with Ajax

Question

This is a very common question all over google , but there is a conflict between the ways we can handle this.

I use this tutorial http://code.tutsplus.com/articles/getting-loopy-ajax-powered-loops-with-jquery-and-wordpress--wp-23232

I have to say that this is the best explained tutorial all over the internet (for me).

So far is working great with some exceptions that my lack of knowledge are making very difficult to adapt this to my website.

some of the exeptions.

• Conditionals , if there is only one post then stop loading the else conditionals
• Authors , I can make the way to load post from the page author (author.php)
• Stop Loading if post reach 100 then paginate normally
• Performance.

let me introduce my sample for authors.php:

authors.php

<?php
get_header();
$curauth = (isset($_GET['author_name'])) ? get_user_by('slug', $author_name) : get_userdata(intval($author));
?>


<div id="content" class="inner-content-author sep">

  <header class="head-line">
    <h1><?php echo $curauth->first_name; ?> <?php echo $curauth->last_name; ?></h1>

    <div id="author" class="authorF">
        <figure class="photo" id="<?php echo get_the_author_meta('ID'); ?>" style="background-image:url('wp-content/uploads/userphoto/<?php echo get_the_author_meta('ID'); ?>.thumbnail.jpg');background-size:cover;">
          <a href="" id="<?php echo get_the_author_meta('ID'); ?>" class="colaborator">
            <img src="wp-content/uploads/userphoto/<?php echo get_the_author_meta('ID'); ?>.thumbnail.jpg" alt="<?php echo get_the_author_meta('display_name');?>" width="80" height="80" class="photo" />
        </a>
    </figure>
    <div id="autor_<?php the_ID(); ?>">
      <?php echo $curauth->user_description; ?>
  </div>
</div>


</header>


<section class="article-list sep" role="region">

    <header class="head-line">
      <h2>M&aacute;s Notas de <?php echo $curauth->first_name; ?> <?php echo $curauth->last_name; ?></h2>
  </header>

  <div id="loadAuthorLoop"></div>


</section>

</div>

<?php locate_template( array('/layouts/sidebars/sidebar_type-c.php' ), true ); ?>


<?php get_footer(); ?>

loop-authors.php

<!-- Start Articles Loop -->
<?php
// Our include
define('WP_USE_THEMES', false);
require_once('../../../../../wp-load.php');

// Our variables
$numPosts = (isset($_GET['numPosts'])) ? $_GET['numPosts'] : 0;
$page = (isset($_GET['pageNumber'])) ? $_GET['pageNumber'] : 0;

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

$author = new WP_Query($args);
?>
<?php
if (  $author->have_posts() ) :
  while (  $author->have_posts() ) :  $author->the_post();
?>


<article id="post-<?php the_ID(); ?>" <?php post_class( 'cf' ); ?> role="article">
  <header class="article-header">
    <figure  style="background-image:url('<?php extract_url();?>');background-size:cover; background-position:center;">
      <?php the_post_thumbnail('lo-ultimo');  ?>
    </figure>
  </header>

  <section class="entry-content cf">
    <small><?php single_cat_title();?></small>
    <h2 class="h2 entry-title">
      <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
    </h2>
  </section>
</article>
<?php  endwhile; else: ?>
  <p>Nuestro Colaborador aun no tiene lista sus notas, por favor regresa pronto para leer más de <?php echo $curauth->first_name; ?> <?php echo $curauth->last_name; ?></p>

  <?php
  endif;
  wp_reset_postdata(); ?>
<!-- End Articles Loop -->

loop.js

/*------------------------------------------------------
Authors Posts
------------------------------------------------------*/

load_loop_authors = function(){

  $.ajax({
    type       : "GET",
    data       : {numPosts : 1, pageNumber: page},
    dataType   : "html",
    url        : get_url_authors,
    beforeSend : function(){
      if(page != 1){
        content_authors.append('<div id="aLoad"  class="loads" style="text-align:center">
          <i class="fa fa-circle-o-notch fa-spin"></i>
          </div>');
      }

    },
    success    : function(data){
      $data = $(data);
      if($data.length){
        $data.hide();
        content_authors.append($data);
        $data.fadeIn(500, function(){
          $("#aLoad").remove();
          loading = false;
        });
      } else {
        $("#aLoad").remove();

      }
    },
    error     : function(jqXHR, textStatus, errorThrown) {
      $("#aLoad").remove();
      alert(jqXHR + " :: " + textStatus + " :: " + errorThrown);
    }
  });
}


$window.scroll(function() {
  var content_offset = content_authors.offset();
  //console.log(content_offset.top);


  if(!loading && ($window.scrollTop() +
   $window.height()) > (content_authors.scrollTop() +
   content_authors.height() + content_offset.top)) {
    loading = true;
  page++;
  load_loop_authors();

}

});

The Main Problem here is that this loop loads all the post of the whole website.

Thanks !

Answer 1

Well first of all, that tutorial is "doing it wrong" in the AJAX department. WordPress has an AJAX API, which should be used in this case.

That said, the basis of your problem is this:

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

Those are your query arguments for the posts you're requesting. Note that there's nothing regarding which author you want to fetch posts from. You need to set an author parameter the same way you set the number of posts and the page number.

As far as numbers of posts and pages are concerned, every query object contains some properties which you can use to determine when you should load more posts.

In the case of your author query:

$author = new WP_Query($args);

echo $author->post_count;    // number of posts in this result set
echo $author->found_posts;   // total number of posts from this query
echo $author->max_num_pages  // total number of pages