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(); ?>
