So i am using ajax to filter and load posts into a container. I want to limit the amount of posts to 6 at a time and add a load more button underneath if there are more than 6 posts, but i don't want to add pages because i have a few containers on the same page that i'm using this same treatment for and my understanding is pages would add a /page-1 or something like that to the url (am i wrong?).
Either way, i just want to know how to check if there are more posts that fit this criteria so i can show the load more button, and then when the load more button fires how do i just load 6 more. Do i have to keep a page variable somewhere? or is there another smarter way.
Here is my query
function ajax_filter_get_posts( $category, $tag )
{
$category = $_POST['category'];
$tag = $_POST['tag'];
if($category)
{
$category_args = array(
'taxonomy' => 'category',
'field' => 'slug',
'terms' => $category
);
}
$args = array(
'posts_per_page' => 6,
'post_status' => 'publish',
'tag' => implode(",",$tag),
'tax_query' => array(
$category_args,
),
'category__in' => array(187,186,183,182,184),
);
$query = new WP_Query( $args );
if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post();
$output = post_factory($post);
$result['response'][] = $output;
$result['status'] = 'success';
endwhile; else:
$result['response'] = '<h2>No posts found</h2>';
$result['status'] = '404';
endif;
$result = json_encode($result);
echo $result;
die();
}
I know this post is about a year old, but in case anyone else needs an answer, here's the solution I'm implementing. I'm using Ajax to pull in a wp_query from a PHP file. The output from that file replaces the content of a div on my page. This is only the relevant code, not my complete code.
On click of the load more button, I use jQuery to count the number of posts on the page and put that count into a variable. Posts have a unique class assigned to them.
current = $('.item').length;
I send the post count to the PHP file using Ajax.
$.get(functions_home.url, { offset: current }, function(data) {
$('.grid').html(data);
}
I pull the post count from jQuery into a variable in the PHP file, and then use that variable to set the wp_query "offset" in $args.
$offset = $_GET['offset'];
$args = array (
'offset' => $offset
);
Once the query ($query) runs, I use $query->found-posts to tell me the total number of relevant posts, and I put that in a variable.
$total = $query->found_posts;
I make a div in my PHP file and use the found posts variable so that it's populated with the total number of relevant posts. I use CSS to hide that div, so that it's never visible on the website.
<div id="total"><?php echo $total; ?></div>
#total {
display: none;
}
I use jQuery to find that div on the page, and get the text from it, which is the total number of relevant posts. I put that in a variable.
total = $('#total').text();
I use jQuery to check whether the number of posts on the page is equal to the total number of posts, and, if it is, I hide the load more button. For my particular situation, I check in both the initial Ajax load and the Ajax call that fires when the load more button is clicked.
current = $('.item').length;
total = $('#total').text();
if ( current == total ) {
$('.load-more').css({
display: 'none'
});
}
I don't know if this is the best solution, or even a good solution, but it's what I've figured out to do, and it's working for me so far.