Taxonomy Search Dropdown WordPress
- SOLVED
I'm need to implement a function for a thematic child theme that display a dropdown search box that allows selection of a taxonomy term. When a taxonomy is select then a second dropdown search box will appear that list and links the titles of all the custom-posts which have that taxonomy.
It sounds like similar a dropdown search for 'States' and then a dropdown search that display the 'Cities' of the selected State.
Thanx.
Answers (3)
Jatin Soni answers:
This search form with dropdown I have done for custom post type.
Now here you need to replace all your texonomy terms
<form class="searchcat" role="search" method="get" id="searchform" action="<?php bloginfo('url'); ?>">
<div class="rowElem">
<input type="text" value="" name="s" id="s" placeholder="search here..." tabindex="1" /><select name="post_type">
<option value="">All Type</option>
<option value="video">Video</option>
<option value="audio">Audio</option>
<option value="gallery">Gallery</option>
<option value="portfolio">Portfolio</option>
</select>
<input type="submit" id="searchsubmit" value="Search" tabindex="2" />
</div>
</form>
Also you can use something like this to get automatically
<form role="search" method="get" id="searchform" action="<?php bloginfo('home'); ?>">
<div>
<input type="text" value="" name="s" id="s" />
<?php
function get_terms_dropdown($taxonomies, $args){
$myterms = get_terms($taxonomies, $args);
$optionname = "optionname";
$emptyvalue = "";
$output ="<select name='".$optionname."'><option selected='".$selected."' value='".$emptyvalue."'>Select a Category</option>'";
foreach($myterms as $term){
$term_taxonomy=$term->YOURTAXONOMY; //CHANGE ME
$term_slug=$term->slug;
$term_name =$term->name;
$link = $term_slug;
$output .="<option name='".$link."' value='".$link."'>".$term_name."</option>";
}
$output .="</select>";
return $output;
}
$taxonomies = array('YOURTAXONOMY'); // CHANGE ME
$args = array('order'=>'ASC','hide_empty'=>true);
echo get_terms_dropdown($taxonomies, $args);
?>
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>
Jatin Soni comments:
This is tested with search function and works completely fine Just copy and paste :)
function get_terms_dropdown($taxonomies, $args){
$myterms = get_terms($taxonomies, $args);
$output ="<select>";
foreach($myterms as $term){
$root_url = get_bloginfo('url');
$term_taxonomy=$term->taxonomy;
$term_slug=$term->slug;
$term_name =$term->name;
$link = $root_url.'/'.$term_taxonomy.'/'.$term_slug;
$output .="<option value='".$link."'>".$term_name."</option>";
}
$output .="</select>";
return $output;
}
?>
<form class="searchcat" role="search" method="get" id="searchform" action="<?php bloginfo('url'); ?>">
<div class="rowElem">
<input type="text" value="" name="s" id="s" placeholder="search here..." tabindex="1" /> <?php
$taxonomies = array('Your_Texonomy');//change Your_Texonomy to yours
$args = array('orderby'=>'count','hide_empty'=>true);
echo get_terms_dropdown($taxonomies, $args);
?>
<input type="submit" id="searchsubmit" value="Search" tabindex="2" />
</div>
</form>
Just replace Your_Texonomy with your texonomy name like video_category etc
Arnav Joy answers:
this will output all the terms of taxonomy
<?php
$tax_name = 'category'; // replace this with your taxonomy name
$terms= get_terms( $tax_name , 'orderby=count&hide_empty=0' );
$count = count($terms);
if ( $count > 0 ){
echo "<select>";
foreach ( $terms as $term ) {
echo "<option value=".$term->term_id.">" . $term->name . "</option>";
}
echo "</select>";
}
?>
Daniel Yoen answers:
try this tutorial :
http://www.aroundwp.com/multiple-taxonomies-in-a-dropdown-menus/
:)
Daniel Yoen comments:
I think you need this JSON script :
Put this script where you want to show the drop down :
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#json_options").change(function(){
var json_option = $("#json_options").val();
$("#json_post").empty().append("<option>loading...</option>"); //show loading...
var json_url = "<?php echo get_template_directory_uri(); ?>/index-json.php?json_option=" + encodeURIComponent(json_option);
$.getJSON(json_url,function(data){
$("#json_post").empty(); //clear states selections
if(data==""){
$("#json_post").append("<option value=\"0\">No states found</option>");
}
else{
for(i=0; i<data.id.length; i++){
$("#json_post").append("<option value=\"" + data.id[i] + "\">" + data.name[i] + "</option>");
}
}
});
return false;
});});
</script>
<?php
function get_terms_dropdown($taxonomies, $args)
{
$myterms = get_terms($taxonomies, $args);
foreach ($myterms as $term)
{
$term_taxonomy = $term->taxonomy;
$term_slug = $term->slug;
$term_name = $term->name;
$link = $term_slug;
$output .= "<option value=" . $term_slug . ">" . $term_name . "</option>";
}
return $output;
}
$taxonomies = array('TAXONOMY'); <strong>// REPLACE WITH YOUR OWN TAXONOMY</strong>
$args = array('orderby' => 'count','hide_empty' => true);
?>
<select name="json_options" id="json_options">
<option value="0">Select here</option>
<?php echo get_terms_dropdown($taxonomies, $args); ?>
</select>
<select name="json_post" id="json_post"></select>
Then, create a file with a name index-json.php in your theme folder, fill with this cript :
<?php
define('WP_USE_THEMES', false);
require_once('../../../wp-load.php');
$json_option = $_GET['json_option'];
$json = array();
$args=array('post_type' => 'YOUR POST TYPE', 'YOUR TAXONOMY' => $json_option); <strong>// REPLACE WITH YOUR OWN</strong>
$jasonquery=new WP_Query($args);
if($jasonquery->have_posts())
{
while ($jasonquery->have_posts())
{
$jasonquery->the_post();
$json['id'][] = get_the_ID();
$json['name'][] = get_the_title();
}
header('Content-Type: text/javascript; charset=UTF-8');
echo json_encode($json);
}
wp_reset_postdata();
?>
hope this help :)
Daniel