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

2 Answers 2

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

Just wanted to share a link that helps explain comments contained in the answer:

http://solislab.com/blog/5-tips-for-using-ajax-in-wordpress/

Here's tip 1 mentioned in one of the comments:

  1. USE WP_LOCALIZE_SCRIPT() TO DECLARE JAVASCRIPT GLOBAL VARIABLES

Although wp_localize_script() is created for localization, it also has another great use. You can declare javascript variables with namespaces to use with your script. Here’s the syntax:

wp_localize_script( $handle, $namespace, $variable_array );

Here’s how you should declare the URL to the file that handles AJAX (in this example, I use admin-ajax.php, which is discussed in tip #2):

// embed the javascript file that makes the AJAX request
wp_enqueue_script( 'my-ajax-request', plugin_dir_url( __FILE__ ) . 'js/ajax.js', array( 'jquery' ) );

// declare the URL to the file that handles the AJAX request (wp-admin/admin-ajax.php)
wp_localize_script( 'my-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

This way, you won’t have to use PHP to print out JavaScript code, which is both ugly and non-cacheable. If you take a look at the generated HTML in the element, you’ll find this:

<script type="text/javascript" src="http://example.com/wordpress/wp-content/plugins/myajax/js/ajax.js"></script><script type="text/javascript">// <![CDATA[
<span class="mceItemHidden">
/* 
 */
var <span class="hiddenSpellError" pre=""-->MyAjax = {
    <span class="hiddenSpellError" pre="">ajaxurl</span>:  "http://example.com/wordpress/wp-admin/admin-ajax.php"
};
/* ]]&gt; */
</span>
// ]]></script>

Now, in your ajax.js file, you can use MyAjax.ajaxurl without having to resort to PHP and including wp-load.php. Please refer to tip #2 below for more about setting up the javascript code that sends the request, and how to handle the request properly.

share|improve this answer
    
While the link might help explain the answer, you should include the essential parts here and only provide the link for reference. Link-only answers can become invalid if the linked page changes. See How to Answer. –  Gabriel Jun 9 at 23:01
    
Spot on. I updated the answer. –  Deez717 Jun 9 at 23:19

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.