Skip to content

Instantly share code, notes, and snippets.

@ihorduchenko

ihorduchenko/ajax-load-more__footer.php

Last active December 12, 2018 13:21
Show Gist options
  • Save ihorduchenko/6be3aa63c7edbb3cf234cfa2360f3f3d to your computer and use it in GitHub Desktop.
Save ihorduchenko/6be3aa63c7edbb3cf234cfa2360f3f3d to your computer and use it in GitHub Desktop.
Download ZIP
Load more posts/pages/CPT's using Ajax
Raw
ajax-load-more__footer.php
<?php if ( is_page_template( 'template/tpl__newsroom.php' ) ) { ?>
<script>var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";</script>
<?php } ?>
<?php if ( is_page_template( 'template/tpl__newsroom.php' ) ) { ?>
<script>
var previousTarget = null;
paged = 2;
$(document).on('click', '.load-more button', function(){
var cat = $(this).data('cat');
var $this = $(this);
var parent = $this.parents('.load-more');
if (this !== previousTarget) {
paged = 2;
totalPostsLeft = $this.data('found');
previousTarget = this;
}
var data = {
action: "load_search_posts",
page: paged,
cat: cat,
security: "<?php echo wp_create_nonce("load_search_posts");?>"
};
$.ajax({
url: ajaxurl,
type: "POST",
data: data,
success: function(response) {
parent.before(response);
totalPostsLeft -= 9;
if ( totalPostsLeft <= 9 ) {
$this.remove();
}
paged++;
},
error: function(response) {
console.log(response)
}
})
});
</script>
<?php } ?>
Raw
ajax-load-more__functions.php
function load_search_posts_callback() {
check_ajax_referer( 'load_search_posts', 'security' );
$paged = $_POST['page'];
$cat = $_POST['cat'];
$args = array(
'post_type' => 'post',
'posts_per_page' => 9,
'orderby' => 'date',
'order' => 'DESC',
'cat' => $cat,
'paged' => $paged
);
$p_query = new WP_Query( $args );
if ( $p_query->have_posts() ) :
while ( $p_query->have_posts() ) : $p_query->the_post();
$id = $post->ID;
$p_thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $id ), 'full' );
if ( $p_thumb ) {
$p_img = $p_thumb[0];
} else {
$p_img = get_template_directory_uri() . '/assets/img/welcome.jpg';
}
$type = get_field( 'post_type' );
$author = get_field( 'author' ); ?>
<div class="col-md-6 col-xl-4">
<article class="loop-post">
<a href="<?php if ( $type == 'hs' ) {
echo get_field( 'hs_url' );
} else {
the_permalink();
}; ?>" class="loop-post--img d-block mb bg-cover bg-thumb mb-md-3"
style="background-image: url(<?php echo $p_img; ?>)"></a>
<div class="loop-post--content">
<h3 class="loop-post--title section-title d-md-none">
<a href="<?php if ( $type == 'hs' ) {
echo get_field( 'hs_url' );
} else {
the_permalink();
}; ?>"><?php the_title(); ?></a>
</h3>
<div class="loop-post--info article-info text-caption clr-purple mb-2 mb-md-3">
<?php $categories = get_the_category( $post ); ?>
<span>
<?php foreach ( $categories as $cat ) { ?>
<?php echo $cat->cat_name . '<span class="px-1"> / </span>'; ?>
<?php } ?>
</span>
<span><?php echo get_the_date( 'd F Y' ); ?></span>
</div>
<?php if ( $author ) { ?>
<div class="loop-post--author text-caption small-font mb-md-3">
<?php $author_obj = $author[0];
echo $author_obj->post_title; ?>
</div>
<?php } else { ?>
<div class="loop-post--author text-caption small-font mb-md-3">BCT</div>
<?php } ?>
<h3 class="loop-post--title section-title mod-sm d-none d-md-block mb-md-4">
<a href="<?php if ( $type == 'hs' ) { echo get_field( 'hs_url' ); } else { the_permalink(); }; ?>">
<?php the_title(); ?>
</a>
</h3>
<div class="loop-post--excerpt text-block d-none d-md-block">
<?php echo excerpt( 20 ); ?>
</div>
</div>
</article>
</div>
<?php
endwhile;
endif;
wp_reset_query();
die();
}
add_action( 'wp_ajax_load_search_posts', 'load_search_posts_callback' );
add_action( 'wp_ajax_nopriv_load_search_posts', 'load_search_posts_callback' );
Raw
ajax-load-more__template.php
<div class="row loop-posts ajax-more--container mb-5">
<?php
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$args = array(
'post_type' => 'post',
'cat' => $blog_id,
'paged' => $paged,
'orderby' => 'date',
'order' => 'DESC',
'posts_per_page' => 9,
);
$p_query = new WP_Query( $args ); ?>
<?php if ( $p_query->have_posts() ) {
while ( $p_query->have_posts() ) {
$p_query->the_post();
$id = $post->ID;
$p_thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $id ), 'full' );
if ( $p_thumb ) {
$p_img = $p_thumb[0];
} else {
$p_img = get_template_directory_uri() . '/assets/img/welcome.jpg';
} ?>
<?php $type = get_field( 'post_type' ); ?>
<?php $author = get_field( 'author' ); ?>
<div class="col-md-6 col-xl-4">
<article class="loop-post">
<a href="<?php if ( $type == 'hs' ) {
echo get_field( 'hs_url' );
} else {
the_permalink();
}; ?>" class="loop-post--img d-block mb bg-cover bg-thumb mb-md-3"
style="background-image: url(<?php echo $p_img; ?>)"></a>
<div class="loop-post--content">
<h3 class="loop-post--title section-title d-md-none">
<a href="<?php if ( $type == 'hs' ) {
echo get_field( 'hs_url' );
} else {
the_permalink();
}; ?>"><?php the_title(); ?></a>
</h3>
<div class="loop-post--info article-info text-caption clr-purple mb-2 mb-md-3">
<?php $categories = get_the_category( $post ); ?>
<span>
<?php foreach ( $categories as $cat ) { ?>
<?php echo $cat->cat_name . '<span class="px-1"> / </span>'; ?>
<?php } ?>
</span>
<span><?php echo get_the_date( 'd F Y' ); ?></span>
</div>
<?php if ( $author ) { ?>
<div class="loop-post--author text-caption small-font mb-md-3">
<?php $author_obj = $author[0];
echo $author_obj->post_title; ?>
</div>
<?php } else { ?>
<div class="loop-post--author text-caption small-font mb-md-3">BCT</div>
<?php } ?>
<h3 class="loop-post--title section-title mod-sm d-none d-md-block mb-md-4">
<a href="<?php if ( $type == 'hs' ) {
echo get_field( 'hs_url' );
} else {
the_permalink();
}; ?>"><?php the_title(); ?>
</a>
</h3>
<div class="loop-post--excerpt text-block d-none d-md-block">
<?php echo excerpt( 20 ); ?>
</div>
</div>
</article>
</div>
<?php } ?>
<?php if ( $p_query->max_num_pages > 1 ) { ?>
<div class="col-12 text-center load-more">
<button class="btn btn-outline-dark" data-paged="<?php echo $paged; ?>"
data-found="<?php echo $p_query->found_posts; ?>"
data-cat="<?php echo $blog_id; ?>"><?php pll_e( 'Load more' ); ?>
</button>
</div>
<?php } ?>
<?php } ?>
<?php wp_reset_postdata(); ?>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment