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>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.