How to Filter custom post type by taxonomy?
-
21-04-2021 - |
Question
here is my code trying to make it
<div class="row">
<div class="col-lg-3 col-md-12">
<div class="card">
<div class="card-body">
<form action="<?php the_permalink() ?>" method="GET">
<?php
$terms = get_terms([
'taxonomy' => 'topics',
'hide_empty' => false
]);
foreach ( $terms as $term ) : ?>
<label>
<input
type="checkbox"
name="topics[]"
value="<?php echo $term->slug; ?>"
<?php checked(
(isset($_GET['topics']) && in_array($term->slug, $_GET['topics']))
) ?>
/>
<?php echo $term->name; ?>
</label>
<?php
endforeach; ?>
<button type="submit">Apply</button>
</form>
</div>
</div>
</div><!--end of col1 col-lg-3 col-md-12 -->
<div class="col-lg-9 col-md-12">
<div class="row">
<?php
$courses = new WP_Query(
array(
'post_type' => 'courses', // This is the name of your post type - change this as required,
'posts_per_page' => -1,
'tax_query' => array(
array(
'taxonomy' => 'topics',
'field' => 'slug',
'terms' => $term->slug,
'operator' => 'IN'
)
) // This is the amount of posts per page you want to show
)
);
while ( $courses->have_posts() ) : $courses->the_post();
// The content you want to loop goes in here:
?>
<div class="col-lg-6 col-md-12">
<div class="card shadow bounceIn"
style="margin-top: 10px; border: none; border-radius: 13px;">
<div class="card-header"
style="color: white; text-align: start; border-top-left-radius: 13px; border-top-right-radius: 13px; background-color: #EE225D; border:none;">
<h6 style="padding-bottom: 0; margin-bottom: 0;"><?php the_title(); ?></h6>
</div>
<div class="card-body"
style="padding-top: 20px; padding-bottom: 20px; color: #2B2365;">
<h6 style="font-weight: 700;"><?php the_field('full_name'); ?></h6>
<p><?php echo wp_trim_words( get_the_content(), 30, '...' ); ?></p>
<a href="<?php the_permalink(); ?>"
style="float:right; color: #EE225D; background-color: transparent; border-color: #EE225D;">
View Course
</a>
</div>
</div>
</div>
<?php
endwhile;
rewind_posts();
wp_reset_postdata();
?>
</div>
</div><!--end of col2 col-lg-9 col-md-12 -->
</div>
but when i refresh the page it keeps trying to load and when i remove function rewind_posts it load the page but filters not working i watched many videos trying to solve it but no success code explanation two columns one having the filters and second column having the posts
Solution
I believe you can add the following to the theme's functions.php & visit /courses/?topics=foo,bar
to get the results you're looking for:
<?php
/**
* Custom search-query with taxonomy filter
*/
function wpse373353_search_query( $wp_query ) {
// exit early if this isn't that main loop on the front-end of the site
if ( ! $wp_query->is_main_query() || is_admin() ) {
return;
}
if ( $wp_query->get( 'post_type' ) === 'courses' ) {
if ( ! empty( $_GET['topics'] ) ) {
$topics = $_GET['topics'];
foreach ( $topics as $key => $val ) {
$topic_terms[ $key ] = sanitize_key( $val );
}
}
if ( ! empty( $topic_terms ) {
if ( ! $tax_query = $wp_query->get( 'tax_query' ) ) {
$tax_query = [
// change to OR instead of default AND here if desired
// 'relation' => 'OR',
];
}
// add the topics tax-query
if ( ! empty( $topic_terms ) ) {
$tax_query[] = [
'taxonomy' => 'topics',
'field' => 'slug',
'terms' => $topic_terms,
];
}
// save the modified wp_query
$wp_query->set( 'tax_query', $tax_query );
}
}
}
// hook into the pre_get_posts action
add_action( 'pre_get_posts', 'wpse373353_search_query' );
Licensed under: CC-BY-SA with attribution
Not affiliated with wordpress.stackexchange