Custom Post Type & Tax w/ List JS
<section class="auctions row container">
<h1><?php $post_type = get_post_type_object( 'auctions_post' );
echo $post_type->label; ?></h1>
<div id="auctions-list">
<input class="search" placeholder="Filter Auctions"/>
<ul class="sort-by">
<button class="sort btn" data-sort="name">Sort by name</button>
<button class="sort btn" data-sort="date">Sort by date</button>
</ul>
<h3>Term List</h3>
<?php
$tax = 'auctions_type'; // your taxonomy name
// get the terms of taxonomy
$terms = get_terms( $tax, $args = [
'hide_empty' => false, // do not hide empty terms
'orderby' => 'count',
]
);
?>
<ul class="auction-types-filter">
<button class="btn" id="filter-none">Show all</button>
<?php
foreach ( $terms as $term ):
$term_link = get_term_link( $term ); // Get the term link
// How to grab links, in case you need a tags: esc_url( $term_link )
if ( $term->count > 0 ): // display name and count
?>
<button class="btn"
id="filter-<?php echo $term->slug ?>"><?php echo $term->name . ' (' . $term->count . ')' ?></button>
<?php
elseif ( $term->count === 0 ): // display name
?>
<button class="btn" id="filter-<?php echo $term->slug ?>"><?php echo $term->name ?></button>
<?php
endif;
endforeach;
?>
</ul>
<?php
function get_all_the_terms( $post ) {
$postTerms = wp_get_post_terms( $post->ID, 'auctions_type' );
foreach ( $postTerms as $postTerm ) {
echo $postTerm->name . ', '; // Added a space between the slugs with . ' '
}
}
?>
<section class="list">
<?php
$the_query = new WP_Query( [
'post_type' => 'auctions_post',
'posts_per_page' => - 1
] );
while ( $the_query->have_posts() ) : $the_query->the_post();
$get_term = wp_get_post_terms( $post->ID, 'auctions_type', [ "fields" => "all" ] );
$the_term = $get_term[0]->name;
?>
<a class="" href="<?php the_permalink(); ?>">
<article class="<?php echo $the_term ?> auction-listing">
<?php
if ( has_post_thumbnail() ) :
$thumb_id = get_post_thumbnail_id();
$thumb_url_array = wp_get_attachment_image_src( $thumb_id, 'medium', true );
$thumb_url = $thumb_url_array[0];
else:
$thumb_url = get_template_directory_uri() . '/images/powell-auction-default-image.jpg';
endif; ?>
<div class="auction-listing-image"
style="background: url('<?php echo $thumb_url ?>') center center no-repeat; height: 300px; width: 300px; background-size: cover;">
</div>
<div class="auction-listing-description description">
<p><strong><span
class="category"><?php get_all_the_terms( $post ); ?></span></strong>
</p>
<h2 class="name"><?php echo the_title(); ?></h2>
<p class="date"><strong>Date: </strong><?php the_field( 'event_date_ends' ); ?></p>
<p class="time"><strong>Time: </strong><?php the_field( 'time' ); ?></p>
<p class="location"><strong>Location: </strong><?php the_field( 'location' ); ?></p>
<p class="office"><strong>Office: </strong><?php the_field( 'office' ); ?></p>
<p class="agent"><strong>Agent: </strong><?php the_field( 'agent' ); ?></p>
</div>
</article>
</a>
<?php
endwhile;
wp_reset_postdata();
?>
</section>
<script>
jQuery(document).ready(function ($) {
var options = {
valueNames: ["category", "name", "description", "date"]
};
var featureList = new List("auctions-list", options);
<?php foreach ( $terms as $term ): ?>
$("#filter-<?php echo $term->slug; ?>").click(function () {
featureList.filter(function (item) {
var taxList = item.values().category;
<?php /* console.log(taxList.includes("<?php echo $term->name; ?>")); // Debug */ ?>
if (taxList.includes("<?php echo $term->name; ?>") == 1) {
return true;
} else {
return false;
}
});
return false;
});
<?php endforeach; ?>
$("#filter-none").click(function () {
featureList.filter();
return false;
});
});
</script>
</div>
</section>