Custom Taxonomy Search result page

I finally managed to make it work.

found this post which was somehow related to my task.

According to this, first, we have to edit the search form by putting a hidden input. name the input whatever you want. and changing the input value on form submission using javascript.

<input type=”hidden” name=”search_type” value=”site-search” />

secondly, search.php or any other page template you’ve created for the search result has to be replaced with the code below. by putting a condition that controls the value of the hidden input and loading the related template accordingly.

<?php
$search_refer = $_GET[“search_type”];
if ($search_refer == ‘icon - packs’) {
    load_template(TEMPLATEPATH . ‘ / pack - search . php’);
} elseif ($search_refer == ‘icons’) {
    load_template(TEMPLATEPATH . ‘ / icons - search . php’);
};
?>

for searching in the taxonomy and listing them as result in the search result page I played a little with wp-query and other related and created this custom function for displaying them.

1)functions.php – I’ve created a function, sending the searched phrase and taxonomy name to it, and it returns an array of terms of custom taxonomy.

// We get a list taxonomies on the search box
function getTaxBySearch($search_text,$tax_name){

    $args = array(
        'taxonomy'      => 'icon_package', // taxonomy name
        'orderby'       => 'id', 
        'order'         => 'ASC',
        'fields'        => 'all',
        'name__like'    => $search_text
    ); 
    
    $terms = get_terms( $args );
    $count = count($terms);
    if($count>0){
        return $terms;
    }else{
        return 0;
    }
    
    }

and finally, making the search result page template for every search type(icons,icon packages)

<?php get_header(); ?>

<?php $terms = getTaxBySearch($args['searched_phrase'], 'icon_package'); ?>

<?php if ($terms > 0) : ?>
    <div class="icons-search__container">
        <div class="icons-header">
            <h1> Free SVG Flat Icon Packs</h1>
            <p></p>
        </div>
        <div class="item-grid-masonry" data-controller="item-grid--masonry" data-item-grid--masonry-has-masonry-value="true" data-item-grid--masonry-scrollbar-fix-value="true" style="height: 3555px;">

            <?php foreach ($terms as $term) : ?>
                <?php $term_url = get_term_link($term->term_id, 'icon_package'); ?>
                <?php $term_by_id = get_term($term->term_id, 'icon_package'); ?>
                <div class="item-grid-item" style="width: 461px; transform: translate3d(0px, 0px, 0px);">
                    <div class="icon-pack-card" style="--color-bg: #e3e9e7">
                        <a class="icon-pack-card__link" href="<?php echo $term_url; ?>" aria-label="Link to item page">
                            <div class="icon-pack-card__header">
                                <div class="icon-pack-card__title">
                                    <?php $term->name; ?>
                                </div>
                                <div class="icon-pack-card__count">
                                    <?php echo $term_by_id->count; ?> Icons
                                </div>
                            </div>
                            <div class="icon-pack-card__inner" data-item-count="4">
                                <?php
                                $args_query = array(
                                    'post_type' => array('icons'),
                                    // 'nopaging' => true,
                                    'order' => 'DESC',
                                    'tax_query' => array(
                                        array(
                                            'taxonomy' => 'icon_package',
                                            'field' => 'term_id',
                                            'terms' => $term->term_id,
                                            'operator' => 'IN',
                                            'include_children' => false,
                                        ),
                                    ),
                                );
                                $query = new WP_Query($args_query);
                                if ($query->have_posts()) :
                                    $postcounter = 0;
                                    while ($query->have_posts() && ($postcounter < 4)) :
                                        $query->the_post();
                                ?>
                                        <?php $featured_img_url = get_the_post_thumbnail_url($post->ID, 'full'); ?>
                                        <img class="icon-pack-card__image" width="2048" height="2048" alt="Flat Pan" src="<?php echo $featured_img_url; ?>">
                                        <?php $postcounter++; ?>
                                    <?php endwhile; ?>
                                <?php else :  ?>
                                    <div>nothing</div>
                                <?php endif; ?>
                            </div>
                        </a>
                    </div>
                </div>
        </div>

    <?php endforeach; ?>
    </div>
<?php else : ?>
    <div class="search-no-results">
        <div class="search-no-results__img">
            <img width="100" height="100" alt="asd" title="asdas" src="#">
        </div>
        <h3>No results found</h3>
        <p> Uh oh! Looks like we don't have any <strong><?php echo $args['searched_phrase']; ?></strong> icons yet. We're building our catalog, so check back soon.
        </p>
    </div>
<?php endif; ?>

<?php get_footer(); ?>