Add Search and Filter functionality to custom loop

Question

I have a custom post type and a page where I loop through them. I'm trying to implement the plugin Search and Filter to the page, so people can filter the custom posts.

However, it does not work at the moment... It just resorts to the regular wordpress search.

Any ideas how should I implement it to my loop?

Here's my loop:

                <div class="meetup-groups">

            <?php
            $loop = new WP_Query( array(
                'post_type' => 'meetup_groups',
                'posts_per_page' => -1
            )
            );
            ?>

            <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

            <!-- do stuff -->
            <a href="<?php echo esc_url( get_field('meetup_group_link') ); ?>">
                <div class="meetup-card">
                <div class="meetup-overlay"></div>
                <img src="<?php the_post_thumbnail('medium'); ?>">
                <div class="meetup-card-text"><h3><?php the_title(); ?></h3>
                <div class="meetup-location"><h4><?php the_field('city'); ?><br><?php the_field('country'); ?></h4></div></div>
            </div></a>



            <?php endwhile; wp_reset_query(); ?>

            </div>

Answer 1

You must create a different search form for your post type, so that search results can be displayed according to post type.

You can add this to your search form

<input type="hidden" name="post_type" value="meetup_groups">

Example :

<form method="get" id="my-custom-searchform" action="<?php echo esc_url(home_url( '/' )); ?>">
        <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" placeholder="<?php echo esc_attr__( 'Search ...', 'text-domain' ); ?>" />
        <button type="submit"><?php echo esc_html__('Search','text-domain'); ?></button>
<input type ="hidden" name="post_type" value="meetup_groups">
</form>

You also have to change the file search.php To display as you see fit.

You must create a file that contains something like this to display the post type search.

For example I make a meetup-groups.php file with the following code.

 <div class="meetup-groups">



            <?php if (have_posts()) : while (have_posts()) : the_post();  ?>

            <!-- do stuff -->
            <a href="<?php echo esc_url( get_field('meetup_group_link') ); ?>">
                <div class="meetup-card">
                <div class="meetup-overlay"></div>
                <img src="<?php the_post_thumbnail('medium'); ?>">
                <div class="meetup-card-text"><h3><?php the_title(); ?></h3>
                <div class="meetup-location"><h4><?php the_field('city'); ?><br><?php the_field('country'); ?></h4></div></div>
            </div></a>



            <?php endwhile; 
endif; ?>

            </div>

Then call the file in the php file search.php file

example search.php file

<?php get_header(); ?>
<?php
if (is_post_type_archive('meetup_groups') || is_tax('meetup_groups-category') || is_tax('meetup_groups-tags')){
get_template_part('meetup-groups.php');

} else {

// Add Default WordPress Loop 

}
?>
<?php get_foooter(); ?>

This code, depends on how you make custom taxonomy

if (is_post_type_archive('meetup_groups') || is_tax('meetup_groups-category') || is_tax('meetup_groups-tags')){