Created
May 30, 2016 01:36
-
-
Save mizner/e63b4c8932a12edb66b25a4f9c55f00d to your computer and use it in GitHub Desktop.
Custom Post Type & Tax w/ List JS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment