How to Filter custom post type by taxonomy?

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

Answer 1

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' );