Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have a Contact Us page which is showing 9 locations on the sidebar by querying the custom post type "Distributors." I want the user to be able to use a drop down that is populated by the taxonomy "Location." For example, if the user selects "California" from the drop down, it will automatically update the list with just those posts tagged with California. What is the best way to go about this? Also, I don't mind if the page refreshes when the user narrows down to their Country or State.

Ideally, I'd like the parent categories to be shown in one drop down, ie. Germany, Japan, USA, etc. Then a second drop down become populated with the children of that category. For example, the first drop down would display USA, then California would show up in the second drop down.

Thanks.

share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

use this code for populating parent dropdown.

<select id="parent">
    <option>-</option>
    <?php
        if(taxonomy_exists('parent_taxonomy_name')):
            $results = get_terms('parent_taxonomy_name',array('fields'=>'all','parent'=>0));
            if ($results):
                foreach ($results as $result):
    ?>                                                                 
                    <option value="<?php echo $result->name; ?>"><?php echo $result->name; ?></option>
    <?php 
                endforeach;
            endif;
        endif;
    ?>
</select>

You may need to use ajax/jquery to fill in the 2nd dropdown box.

<select id="child">
    <option>-</option>
</select>

jquery code would be something like this:

jQuery("#parent").change(function(){
jQuery.post(
    // see tip #1 for how we declare global javascript variables
    MyAjax.ajaxurl,
    {
        // here we declare the parameters to send along with the request
        // this means the following action hooks will be fired:
        // wp_ajax_nopriv_myajax-submit and wp_ajax_myajax-submit
        action : 'myajax-submit',

        // other parameters can be added along with "action"
        parent : jQuery(this).val()
    },
    function( response ) {
        if(response['success'] != false)
        {
            jQuery('#child').empty().append('<option value="">Select Location</option>');
            jQuery.each(response,function(index,value){
                jQuery('#child').append('<option value="'+value+'">'+value+'</option>');
            });
        }
    }
);

});

finally, process ajax in your functions.php file like this:

// if both logged in and not logged in users can send this AJAX request,
// add both of these actions, otherwise add only the appropriate one
add_action( 'wp_ajax_nopriv_myajax-submit', 'myajax_submit' );
add_action( 'wp_ajax_myajax-submit', 'myajax_submit' );

function myajax_submit() {
    // get the submitted parameters
    $parent = $_POST['parent'];
    // generate the response
                $locations = ashyana_getTaxonomyValues( 'parent_taxonomy_name', $parent, 0 );
                $results = array();
                if ($locations):
                    foreach ($locations as $location):                                
                        $loc[] = $location->name;
                    endforeach;
                    $response = json_encode( $loc );
                else:
                    $response = json_encode( array( 'success' => false ) );
                endif;

    // response output
    header( "Content-Type: application/json" );
    echo $response;

    // IMPORTANT: don't forget to "exit"
    exit;
}

Hope it helps. Note: change the taxonomy names and other parameters/args/variables with respect to your needs.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.