Create a Dropdown Selector and Redirect for a Custom Taxonomy in WordPress?

Question

Create a Dropdown Selector and Redirect for a Custom Taxonomy in WordPress?

Alan Loh

2022年5月31日 03:24

I'm trying to create a dropdown selector on my CPT and CT archive page for a custom taxonomy called location.

I've managed to get the form to submit, however, it does not direct me to the archive page, rather it directs me to a URL that looks something like this

https://example.com/?location=11

I'm wanting the destination URL to be this:

https://example.com/location/term-name

Bare with me as I have no background in Computer Science / IT so I'm learning on my own.

Below is my shortcode to insert it into my website. I have taken portions of this code from WordPress' Category Dropdown Selector and modified it for my Custom Taxonomy.

function insert_location(){
    ob_start();
?
form action=https://example.com method=get
    label class=screen-reader-text for=locationLocations/label
    select name=location id=location class=postform
        ?php
           $tax_terms = get_terms('location', array('hide_empty' = '0'));      
           foreach ( $tax_terms as $tax_term ):  
              echo 'option value=-1Select a Location/option
                    option class=level-0 value='.$tax_term-term_id.''.$tax_term-name.'/option';   
           endforeach;
        ?
    /select 
/form
script type=text/javascript  
/* ![CDATA[ */
(function() {
    var dropdown = document.getElementById( location );
    function onLocChange() {
        if ( dropdown.options[ dropdown.selectedIndex ].value  0 ) {
            dropdown.parentNode.submit();
        }
    }
    dropdown.onchange = onLocChange;
})();
/* ]] */
/script
?php
    return ob_get_clean();
}
add_shortcode('location_filter','insert_location');

Any assistance would be greatly appreciated in helping me to create a dropdown selector that takes visitors to the correct URL, thanks!

Topic dropdown php custom-taxonomy custom-post-types Wordpress javascript

Category Web

Alan Loh · Accepted Answer · 2022年5月31日 03:24

Never mind!

I managed to come up with a solution.

function insert_location(){
    ob_start();
?>
    <select name="location" id="location" class="postform">
        <?php
           $tax_terms = get_terms('location', array('hide_empty' => '0'));      
           foreach ( $tax_terms as $tax_term ):  
              echo '<option value="-1">Select a Location</option><option class="level-0" value="'.get_term_link($tax_term).'">'.$tax_term->name.'</option>';   
           endforeach;
        ?>
    </select> 
<script type="text/javascript">
    
/* <![CDATA[ */
(function() {
    var dropdown = document.getElementById( "location" );
    function onLocChange() {
        if ( dropdown.options[ dropdown.selectedIndex ].value != "-1" ) {
            window.location.href = dropdown.options[ dropdown.selectedIndex ].value;
        }
    }
    dropdown.onchange = onLocChange;
})();
/* ]]> */
</script>
<?php
    return ob_get_clean();
}
add_shortcode('location_filter','insert_location');

Instead of using the Term ID, I have replaced it with

.get_term_link($tax_term).

And rather than submitting with a form, I have chosen to use the following line of code.

window.location.href = dropdown.options[ dropdown.selectedIndex ].value;

Create a Dropdown Selector and Redirect for a Custom Taxonomy in WordPress?

About