1 min read
WordPress Custom Taxonomy Dropdown with Select2
<form id="breeddropdown" class="breedslist" action="<?php bloginfo('url'); ?>" method="get" style="width: 100%;">
<?php
$args = array(
'show_option_all' => __( 'Choose A Breed', 'l-p' ),
'hide_empty' => 0,
'echo' => 0,
'show_count' => 0,
'taxonomy' => 'breeds',
'orderby' => 'name', // Order by name
'order' => 'ASC', // Ascending order
// Add these three args:
'name' => 'breeds', // same as the "taxonomy" above
'value_field' => 'slug', // use the term slug
'selected' => get_query_var( 'breeds' ),
'class' => 'breeddropdown',
'id' => 'breeds', // Add an ID for JavaScript manipulation if needed
'class' => 'breeddropdown-select2', // Add Select2 class
);
// Get the dropdown HTML
$select = wp_dropdown_categories( $args );
// Add onchange attribute to submit form when a breed is selected
$select = preg_replace( '/<select([^>]*)>/', '<select$1 onchange="this.form.submit()">', $select );
echo $select;
?>
<noscript><input type="submit" value="View" /></noscript>
</form>
<script>
jQuery(document).ready(function($) {
$('.breeddropdown-select2').select2({
placeholder: 'Choose A Breed(s)...',
allowClear: false,
closeOnSelect: true,
width: 'resolve' // need to override the changed default
});
});
</script>
