Как правильно настроить фильтр на странице, по произвольному полю: Sity_contest, data_cont, name_contest?

Всем привет! Прошу совета, подскажите пожалуйста, как правильно прописать и вывести фильтр по произвольным полям в wordpress? Есть карточка:

<div class="change-img">
                <div class="front-side-img">
                    <img src="<?php the_field('image_contest'); ?>" alt="<?php the_field('alt_img_contest'); ?>">
                    <img src="<?php the_field('image_logotip_konkursa'); ?>" alt="" class="logo__front">
                    <div class="sity__name">
                    <h2 class="front-sity__name"><?php the_field('Sity_contest'); ?></h2>
                    </div>

                </div>
                <div class="back-side-img">
                    <div class="back-side__info">
                        <h3 class="back-side__title">
                        <a href="<?php the_permalink() ?>" class="judgeall__link">
                        г.
                            <span class="back-side__span"><?php the_field('Sity_contest'); ?></span>
                        </a>
                        </h3>
                        <span class="back-side__text back-side__aderss">адрес:
                            <span class="back-side__span"><?php the_field('Adres_contest'); ?></span>                           
                        </span>

                        <span class="back-side__data">дата:
                            <span class="back-side__span"><?php the_field('data_cont'); ?></span>                           
                        </span>
                        <span class="back-side__prise"> стоимость участия:
                            <span class="back-side__span"><?php the_field('prise_contest'); ?>руб.</span>
                            
                        </span>


                        <?php if (get_field('button_one_contest')) : ?>
                            <a href="<?php the_field('button_one_contest'); ?>" target="_blank" class="btn btn-cart"><?php the_field('button_one_text_contest'); ?></a>
                        <?php endif; ?>

                        <?php if (get_field('button_tow_contest')) : ?>
                            <a href="<?php the_field('button_tow_contest'); ?>" target="_blank" class="btn btn-cart"><?php the_field('button_tow_text_contest'); ?></a>
                        <?php endif; ?>
                        


                    </div>
                </div>
            </div>

эта карточка вызывается следующим образом:

<div class="contest__container">


  
    <div class="row">
        <div class="contest__heading heading ">
            <h2 class="heading__title">Заголовок</h2>
            <p class="heading__subtitle">Подзаголовок</p>
        </div>
    </div>
    <div class="row">
        <div class="contest__content">
            <div class="rotate-block">

                    
                
            </div>
        </div>
    </div>
</div>


<!-- delete -->

<div class="tabs">
  <ul class="tab-menu tab-list">
    <li class="tab-list__item active"><a href="#will-be">Будет</a></li>
    <li><a href="#was">Было</a></li>
  </ul>  

  <div class="tab-content active" id="will-be">
    <div class="rotate-block">
      <?php
      $args = array(
        'post_type' => 'cards', // Тип записи
        'meta_type' => 'DATE',
        'meta_query' => array(
          array(
            'key' => 'data_cont', // Поле даты
            'value' => date('Y-m-d'), // Только даты, которые еще не наступили
            'compare' => '>=',
            'type' => 'DATE'
          )
        ),
        'posts_per_page' => -1,
        'orderby' => 'meta_value_num',
        'meta_key' => 'data_cont',
        'order' => 'ASC'
      );
      $query = new WP_Query($args);

      if ($query->have_posts()) :
        while ($query->have_posts()) : $query->the_post();
          get_template_part('template-parts/content', 'cards');
        endwhile;
        wp_reset_postdata();
      else :
        echo '<p>Нет записей для отображения</p>';
      endif;
      ?>
    </div>
  </div>

  <div class="tab-content" id="was">
    <div class="rotate-block">
      <?php
      $args = array(
        'post_type' => 'cards', // Тип записи
        'meta_type' => 'DATE',
        'meta_query' => array(
          array(
            'key' => 'data_cont', // Поле даты
            'value' => date('Y-m-d'), // Только даты, которые уже прошли
            'compare' => '<',
            'type' => 'DATE'
          )
        ),
        'posts_per_page' => -1,
        'orderby' => 'meta_value_num',
        'meta_key' => 'data_cont',
        'order' => 'DESC'
      );
      $query = new WP_Query($args);

      if ($query->have_posts()) :
        while ($query->have_posts()) : $query->the_post();
          get_template_part('template-parts/content', 'cards');
        endwhile;
        wp_reset_postdata();
      else :
        echo '<p>Нет записей для отображения</p>';
      endif;
      ?>
    </div>
  </div>
</div>

<!-- delete -->



<?php get_footer(); ?>

Карточек может быть много и по этой причине на странице нужен фильтр примерно как на картинке (для примера). Подскажите пожалуйста, как можно реализовать фильтр под такие условия: Фильтрация по произвольному полю: Sity_contest, data_cont, name_contest Что бы результат выводился в виде карточек, а не текстом. Буду признателен за подробный совет. Спасибо.

Пробовал какой то плагин для wordpress, но вывод получился не корректный, а именно в виде текста (только заголовок). Очень хотел бы реализовать фильтр без применения сторонних плагинов.