Skip to content

Instantly share code, notes, and snippets.

@chadamski
Last active October 2, 2020 22:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chadamski/410f9deb4c9d7bfe51beef5720c5991d to your computer and use it in GitHub Desktop.
Save chadamski/410f9deb4c9d7bfe51beef5720c5991d to your computer and use it in GitHub Desktop.
WordPress CPT Ajax filtering
//////////////////////////////////////////////////////
HTML
//////////////////////////////////////////////////////
<section role="main" class="<?php echo $listClass; ?>">
<div class="filter-contain">
<span>Filter By Category</span>
<?php
$taxonomy = 'project_type';
$tax_terms = get_terms($taxonomy);
?>
<ul>
<li id="all-projects">
<a href="#" class="all-cats current ajax" data-cpt-name="project" id="all-projects-link">All</a>
</li>
<?php
foreach ($tax_terms as $tax_term) {?>
<li id="cat-<?php echo $tax_term->term_id; ?>">
<a href="#<?php //echo esc_attr(get_term_link($tax_term, $taxonomy)); ?>" class="<?php echo $tax_term->slug; ?> ajax" data-term-number="<?php echo $tax_term->term_id; ?>" title="<?php echo $tax_term->name;?>"><?php echo $tax_term->name; ?></a>
</li>
<? } ?>
</ul>
</div>
<div id="category-post-content" class="project-container">
<?php $loop = new WP_Query( array( 'post_type' => 'project', 'posts_per_page' => 6, 'orderby' => 'title', 'order' => 'ASC', ) );
if ( $loop->have_posts() ) :
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div class="project-tile <?php echo the_field('tiled_layout_size'); ?>" style="background-image: url(<?php echo the_field('featured_post_image'); ?>)">
<h1 class="posttitle">
<a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a>
</h1>
</div>
<?php endwhile; endif; wp_reset_postdata(); ?>
</div>
</section>
//////////////////////////////////////////////////////
JS
//////////////////////////////////////////////////////
function cat_ajax_get(catID) {
var ajaxurl = '/wp-admin/admin-ajax.php';
jQuery.ajax({
type: 'POST',
url: ajaxurl,
data: {"action": "load-filter", cat: catID },
success: function(response) {
jQuery("#category-post-content").html(response);
return false;
}
});
}
function all_cats_ajax_get(cptID) {
var ajaxurl = '/wp-admin/admin-ajax.php';
jQuery.ajax({
type: 'POST',
url: ajaxurl,
data: {"action": "load-all-filter", cat: cptID },
success: function(response) {
jQuery("#category-post-content").html(response);
return false;
}
});
}
$( ".portfolio a.ajax" ).click(function() {
$("a.ajax").removeClass("current");
$(this).addClass("current"); //adds class current to the category menu item being displayed so you can style it with css
var catnumber = $(this).attr('data-term-number');
cat_ajax_get(catnumber);
});
$( ".portfolio a.all-cats" ).click(function() {
$("a.ajax").removeClass("current");
$(this).addClass("current"); //adds class current to the category menu item being displayed so you can style it with css
var cptname = $(this).attr('data-cpt-name');
all_cats_ajax_get(cptname);
});
//////////////////////////////////////////////////////
Functions.php
//////////////////////////////////////////////////////
//PORTFOLIO ajax project filtering
add_action( 'wp_ajax_nopriv_load-filter', 'prefix_load_cat_posts' );
add_action( 'wp_ajax_load-filter', 'prefix_load_cat_posts' );
function prefix_load_cat_posts () {
$cat_id = $_POST[ 'cat' ];
$args = array (
'tax_query' => array(
array(
'taxonomy' => 'project_type',
'field' => 'term_id',
'terms' => array( $cat_id )
)
),
'post_type' => 'project', // <== this was missing
'posts_per_page' => 6,
'order' => 'DESC',
);
global $post;
$posts = get_posts( $args );
ob_start ();
foreach ( $posts as $post ) {
setup_postdata($post);
?>
<div class="project-tile <?php echo the_field('tiled_layout_size'); ?>" style="background-image: url(<?php echo the_field('featured_post_image'); ?>)">
<h1 class="posttitle">
<a href="<?php echo get_permalink();?>"><?php echo the_title(); ?></a>
</h1>
</div>
<?php } wp_reset_postdata();
$response = ob_get_contents();
ob_end_clean();
echo $response;
die(1);
}
//PORTFOLIO ajax ALL projects filtering
add_action( 'wp_ajax_load-all-filter', 'prefix_load_all_cat_posts' );
function prefix_load_all_cat_posts () {
$cat_id = $_POST[ 'cat' ];
$args = array (
'post_type' => 'project', // <== this was missing
'posts_per_page' => 6,
'order' => 'ASC',
'orderby' => 'title',
);
global $post;
$posts = get_posts( $args );
ob_start ();
foreach ( $posts as $post ) {
setup_postdata($post);
?>
<div class="project-tile <?php echo the_field('tiled_layout_size'); ?>" style="background-image: url(<?php echo the_field('featured_post_image'); ?>)">
<h1 class="posttitle">
<a href="<?php echo get_permalink();?>"><?php echo the_title(); ?></a>
</h1>
</div>
<?php } wp_reset_postdata();
$response = ob_get_contents();
ob_end_clean();
echo $response;
die(1);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment