JQUERY UPDATE
<script type="text/javascript">
jQuery(function($){
function fetchBlogPosts(){
$.post( ajaxUrl, {'action' : 'post_blog',
'security' :'<?php echo wp_create_nonce('load_more_posts'); ?>' },
function(response){
});
}
$('.load-more').click(function(){
fetchBlogPosts();
});
});
</script>
PHP FUNCTION UPDATE
add_action('wp_ajax_post_blog', 'blog_post_data_fetch');
add_action('wp_ajax_nopriv_post_blog', 'blog_post_data_fetch');
function blog_post_data_fetch(){
check_ajax_referer('load_more_posts', 'security');
ob_clean();
get_template_part( 'inc/blog','posts' );
wp_die();
}
After reading several AJAX tutorials and honestly AJAX with WordPress still confuses me :( I'm stuck with the following code which does work.
However, I would just like it to add additional posts to an existing loop and not repeat the same posts.
So in other words, the initial the page loads the loop below and then when I click on the ".load-more" button it should load more posts via AJAX but offset it by the existing posts already being displayed.
How is this possible to do?
FUNCTIONS.PHP
add_action('wp_ajax_post_blog', 'blog_post_data_fetch');
add_action('wp_ajax_nopriv_post_blog', 'blog_post_data_fetch');
function blog_post_data_fetch(){
get_template_part('inc/blog','posts');
}
BLOG POSTS TEMPLATE
<?php
$the_query = new WP_Query( array(
'post_type' => 'blog',
));
if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post();
?>
<div class="carousel-cell">
<div class="blog-item">
<div class="featured-image">
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) :
the_post_thumbnail('blog-thumb');
else :
?>
<img src="<?php bloginfo('template_url'); ?>/img/blog-thumb.jpg" alt="">
<?php endif; ?>
</a>
</div><!--/featured-image-->
<div class="post">
<h1><a href="#"><?php the_title(); ?>hello</a></h1>
<?php the_excerpt(); ?>
</div><!--/post-->
</div><!--/blog-item-->
</div><!--/carousel-cell-->
<?php endwhile; endif; ?>
JQUERY
function fetchBlogPosts(){
$.post( ajaxUrl, { 'action' : 'post_blog' }, function(response){
});
}
$('.load-more').click(function(){
fetchBlogPosts();
});