1

I had created on Custom Post Type 'resource', which has 4 taxonomies ('type', 'sector', 'industry', 'rtag')

now i had added 45 posts in following manners

  • Type - Brochure, Infographic, Research Paper, Video, White Paper - 9 posts each
  • Sectors - Engineering, Cloud, Database - 15 posts each
  • Industries - AEC, Real Estate, Manufacturing - 15 posts each

now i had created following templates for each taxonomy

  1. taxonomy-industry.php
  2. taxonomy-rtag.php
  3. taxonomy-sector.php
  4. taxonomy-type.php

no to get my desired out put i working on "resources/industry/aec/" which is technically taxonomy-industry.php

where i had display by default posts with following code

<?php
            $args = array(
                'post_type' => 'resource',
                'posts_per_page' => 9,
                'paged' => get_query_var('paged'),
                'tax_query' => array(),
            );

            // You can modify the $args based on the selected dropdown values here
            if (isset($_POST['industry']) && !empty($_POST['industry'])) {
                $args['tax_query'][] = array(
                    'taxonomy' => 'industry',
                    'field' => 'slug',
                    'terms' => sanitize_text_field($_POST['industry']),
                );
            }

            // Repeat similar checks for 'sector' and 'type'

            $query = new WP_Query($args);

            if ($query->have_posts()) :
                while ($query->have_posts()) :
                    $query->the_post();
               ?>

so when page load it will default all posts that are registered with AEC industry now i had added 3 dropdowns in this template like

    <?php
      // Get the terms for the 'type' taxonomy
      $type_terms = get_terms(array(
         'taxonomy' => 'type',
         'hide_empty' => false,
      ));

      // Get the terms for the 'sector' taxonomy
      $sector_terms = get_terms(array(
         'taxonomy' => 'sector',
         'hide_empty' => false,
      ));

      // Get the terms for the 'industry' taxonomy
      $industry_terms = get_terms(array(
         'taxonomy' => 'industry',
         'hide_empty' => false,
      ));

      // Retrieve the total number of posts for each option
      $type_counts = get_term_post_counts($type_terms);
      $sector_counts = get_term_post_counts($sector_terms);
      $industry_counts = get_term_post_counts($industry_terms);

      function get_term_post_counts($terms) {
         $term_counts = array();
         foreach ($terms as $term) {
            $term_counts[$term->slug] = $term->count;
         }
         return $term_counts;
      }
   ?>
   <div class="clearfix" style="padding:0 15px">
      <div class="one-fourth fl">Filter by</div>
      <div class="one-fourth fl">
      <!-- Dropdown for 'industry' -->
         <select id="industry-dropdown" class="width100 position-relative">
            <option value="">Industries</option>
            <?php foreach ($industry_terms as $term) : ?>
               <option value="<?php echo $term->slug; ?>"><?php echo $term->name . ' (' . $industry_counts[$term->slug] . ')'; ?></option>
            <?php endforeach; ?>
         </select>
      </div>
      <div class="one-fourth fl">
      <!-- Dropdown for 'sector' -->
         <select id="sector-dropdown" class="width100 position-relative">
            <option value="">Sectors</option>
            <?php foreach ($sector_terms as $term) : ?>
               <option value="<?php echo $term->slug; ?>"><?php echo $term->name . ' (' . $sector_counts[$term->slug] . ')'; ?></option>
            <?php endforeach; ?>
         </select>
      </div>
      <div class="one-fourth fl">
      <!-- Dropdown for 'type' -->
         <select id="type-dropdown" class="width100 position-relative">
            <option value="">Types</option>
            <?php foreach ($type_terms as $term) : ?>
               <option value="<?php echo $term->slug; ?>"><?php echo $term->name . ' (' . $type_counts[$term->slug] . ')'; ?></option>
            <?php endforeach; ?>
         </select>
      </div>
   </div>

no i had tried various code but didn't find the solution, what I am trying to implement that when any body select any drop-down then existing loop will change the value and display the result for that selected value for AEC industry

for example i had selected brochure then it should show Brochure from AEC for all sectors without page refresh.

We can go with JS+Ajax and Add another div to display output and hide old existing loop div.

Please guide me or suggest me some path to achieve this.

2
  • Creating a new custom loop via WP_Query is a mistake, WP already gave you templates and has a main query, why throw it away and create your own when you can use pre_get_posts to modify it? Then you can use standard query variables and get what you wanted for free built in to WordPress, e.g. if your taxonomy is industry and you have 5 terms, put them in a select dropdown with name="industry" and give the option values the term IDs and WP will even redirect you for free to the canonical pretty URL. Note none of this is possible if you throw away the main query and use new WP_Query
    – Tom J Nowell
    Commented Sep 12, 2023 at 15:11
  • the above will even have superior SEO as it'll have proper sitemap support, better performance, and your pagination won't break if the main query and your custom query have different numbers of pages
    – Tom J Nowell
    Commented Sep 12, 2023 at 15:12

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.