I have created a custom post type and assigned a term from a custom taxonomy to each page within this CPT.

  1. I want to create two select boxes on the front end of my site.
  2. I want the 1st select box to display the custom taxonomy terms.
  3. Once someone has selected a term, I want the 2nd select box to display the pages assigned to that term.
  4. I then need a button that will take me to this selected page.

If anyone could help with this, that would be great.

3 Answers 3


This is a very broad question so I am going to offer an outline.

  1. Use get_terms to create your first select box.
    1. This would be done in PHP.
  2. For the second box you will need to use Javascript.
    1. Using Javascript, watch the first select box for change
    2. When something changes, grab the ID of the selected term and request the pages assigned to that term using the AJAX API.
      1. In the AJAX callback, you'd have a pretty standard WP_Query to grab the posts.
  3. Once both boxes are populated, your Javascript can insert the button into the DOM

It should not be very complicated but it is a fair bit of code. Try to get started and [edit] your question with more specific problems if you need to.

Be aware, that pure Javascript issues/questions are off-topic here per the faq. Obviously, though related to Javascript, the use of the AJAX API would not be off-topic, as that is a WordPress specific API.


Here is the PHP you'll need. Afterwards you'll need some JavaScript to selectively activate the $posts_by_terms depending on which $list_of_terms has been chosen. It's pretty straightforward.

    // we don't know your post type or taxonomy
    $taxonomy = 'my-custom-taxonomy';
    $post_type = 'my-post-type';
    $terms = get_terms($taxonomy, array('orderby' => 'name'));

    // first dropdown
    $list_of_terms  = '<select>';
    $list_of_terms .= '<option value="*">Select Category</option>';

    // rest of dropdowns
    $posts_by_terms = array();

    $i = 0;
    foreach($terms as $term){
        // each posts_by_terms is a select box
        $posts_by_terms[$i]  = '<select>';
        $posts_by_terms[$i] .= '<option value="*">Choose Post</option>';

        $args = array(
            'post_type' => $post_type,
            'posts_per_page' => -1,
            'tax_query' => array(
                    'taxonomy' => $taxonomy,
                    'field' => 'id',
                    'terms' => $term->term_id

        $term_loop = new WP_Query($args);
        while($term_loop->have_posts()) : $term_loop->the_post();
            $posts_by_terms[$i] .= '<option value="'.get_permalink($post->ID).'">'.get_the_title().'</option>';

        // wrap it up
        $posts_by_terms[$i] .= '</select>';

        // add to first box (each term)
        $list_of_terms .= '<option value="'.$term->slug.'">'.$term->name.'</option>';

    $list_of_terms .= '</select>';

    echo $list_of_terms;
  • OK thanks, I'll have a go over the weekend and let you know my outcome. May 24, 2013 at 18:12
  • So I've managed to implement this code. At present I currently get the select box with list of available terms. Currently no 2nd select box is showing. Is this correct? It would be good if it could be seen but maybe disabled until someone selects a term. So is the jQuery required in order to show the posts in the 2nd box or is the answer above regarding AJAX a better route to go down? I'm pretty rubbish with jQuery so going to need to look elsewhere for some help on this I reckon. May 25, 2013 at 18:14

I'd be interested to know your opinion on my finished solution. Please feel free to pull me up on anything if it could be done better. Solution is below:

<select id="select-category">
    <option class="first-option" value="-1">Select Product Category</option>
        $taxonomy = 'category';
        $terms = get_terms($taxonomy, array('orderby' => 'name'));

        foreach($terms as $term) {
            echo '<option value="'.$term->term_id.'">'.$term->name.'</option>';
        } ?>

<select id="select-product" disabled="disabled"></select>

<input id="myButton" type="submit" value="Take me to this product" />

followed by this in my functions.php file:

function implement_ajax() {
$term_id = $_POST['id'];   

echo '<option class="first-option" value="-1">Select Product</option>';

$args = array(
    'post_type' => 'products',
    'taxonomy' => 'category',
    'terms'    => $term_id

global $wp_query;
$wp_query = new WP_Query($args);

while ($wp_query->have_posts()) : $wp_query->the_post()
    echo '<option value="' . get_permalink() . '">' . get_the_title() . '</option>';
add_action('wp_ajax_my_special_ajax_call', 'implement_ajax');
add_action('wp_ajax_nopriv_my_special_ajax_call', 'implement_ajax');

I then impliemnted some jQuery to make it all come together. Would love to know if this is the best and most efficient way of doing it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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