Filter custom post type using multiple taxonomy dropdowns

2 Views

I’m trying to create two dropdown boxes on a custom post type page called Activities. One taxonomy category is for Activities Grade Level and the other for Activities Type. With what I have now, if you leave one of the drop boxes empty the search will go to a 404 page.
I used the code from this wordpress forum and so this is what I have in my functions folder: 

function get_terms_dropdown_grade_level($taxonomies, $args){
        $myterms = get_terms($taxonomies, $args);
        $output ="<select name='activities_grade_level'>";
        $output .="<option value='#'>Select grade level</option>";
        foreach($myterms as $term){
                $root_url = get_bloginfo('url');
                $term_taxonomy=$term->taxonomy;
                $term_slug=$term->slug;
                $term_name =$term->name;
                $link = $term_slug;
                $output .="<option value='".$link."'>".$term_name."</option>";
        }
        $output .="</select>";
return $output;
}

function get_terms_dropdown_type($taxonomies, $args){
        $myterms = get_terms($taxonomies, $args);
        $output ="<select name='activities_type'>";
        $output .="<option value='#'>Select  activity type</option>";
        foreach($myterms as $term){
                $root_url = get_bloginfo('url');
                $term_taxonomy=$term->taxonomy;
                $term_slug=$term->slug;
                $term_name =$term->name;
                $link = $term_slug;
                $output .="<option value='".$link."'>".$term_name."</option>";
        }
        $output .="</select>";
return $output;
}

And this is what I have on the post type archive page:

Read More
    <h2>Filter by</h2>
    <form action="<?php bloginfo('url'); ?>" method="get">
    <div>
    <?php
    $taxonomies = array('activities_grade_level');
    $args = array('orderby'=>'name','hide_empty'=>false);
    $select = get_terms_dropdown_grade_level($taxonomies, $args);
    $select = preg_replace("#<select([^>]*)>#", "<select$1 onchange='return this.form.submit()'>", $select);
    echo $select;
    ?>
    <?php
    $taxonomies = array('activities_type');
    $args = array('orderby'=>'name','hide_empty'=>false);
    $select = get_terms_dropdown_type($taxonomies, $args);
     
    $select = preg_replace("#<select([^>]*)>#", "<select$1 onchange='return this.form.submit()'>", $select);
    echo $select;
    ?>
    <input type="submit" name="submit" value="filter" />
    </div>
    </form>

Incase it’s good information, I’ll include the urls too. A regular url that leads to the correct search is

[…]/?activities_grade_level=elementary-school&activities_type=engineering&submit=filter

A url where one of the drop boxes is empty is

[…]/?activities_grade_level=%23&activities_type=engineering&submit=filter
where %23 replaced something that could have been elementary-school or middle-school

A url that leads to the correct category would be

[…]/activities_type/engineering/

or

[…]/activities_grade_level/middle-school

Any suggestions for this php and wordpress beginner?

Post Views: 2

Related posts

1 comment

  1. Right, seems a little empty here but I figured out the problem myself, again. The trick was to have empty values in the $output variables.

    So

    $output .="<option value=''>Select taxonomy #1</option>";

    NOT

    $output .="<option value='#'>Select taxonomy #1</option>";

    This is how you can create two dropdown menus and filter out your posts using your custom taxonomies.

    Paste this into your functions.php file

    function get_terms_dropdown_grade_level($taxonomies, $args){
            $myterms = get_terms($taxonomies, $args);
            $output ="<select name='MYTAXONOMY#1'>"; //CHANGE ME!
            $output .="<option value=''>Select taxonomy #1</option>"; //CHANGE ME TO YOUR LIKING!
            foreach($myterms as $term){
                    $root_url = get_bloginfo('url');
                    $term_taxonomy=$term->taxonomy;
                    $term_slug=$term->slug;
                    $term_name =$term->name;
                    $link = $term_slug;
                    $output .="<option value='".$link."'>".$term_name."</option>";
            }
            $output .="</select>";
    return $output;
    }

    function get_terms_dropdown_type($taxonomies, $args){
            $myterms = get_terms($taxonomies, $args);
            $output ="<select name='MYTAXONOMY#2'>"; //CHANGE ME!
            $output .="<option value=''>Select taxonomy #2</option>"; //CHANGE ME TO YOUR LIKING!               foreach($myterms as $term){
                    $root_url = get_bloginfo('url');
                    $term_taxonomy=$term->taxonomy;
                    $term_slug=$term->slug;
                    $term_name =$term->name;
                    $link = $term_slug;
                    $output .="<option value='".$link."'>".$term_name."</option>";
            }
            $output .="</select>";
    return $output;
    }

    Paste this onto the page you want the dropdown menus to appear. (I put mine on a special archives page, like archive-activities.php.)

    <h3>Filter by:</h3>
                    <form action="<?php bloginfo('url'); ?>" method="get">
                        <div>
                            <?php
                            $taxonomies = array('MYTAXONOMY#1'); //CHANGE ME!
                            $args = array('orderby'=>'name','hide_empty'=>false);
                            $select = get_terms_dropdown_grade_level($taxonomies, $args);
                            $select = preg_replace("#<select([^>]*)>#", "<select$1 onchange='return this.form.submit()'>", $select);
                            echo $select;
                            ?>
                            <?php
                            $taxonomies = array('MYTAXONOMY#2'); //CHANGE ME!
                            $args = array('orderby'=>'name','hide_empty'=>false);
                            $select = get_terms_dropdown_type($taxonomies, $args);

                            $select = preg_replace("#<select([^>]*)>#", "<select$1 onchange='return this.form.submit()'>", $select);
                            echo $select;
                            ?>
                            <input type="submit" name="submit" value="filter" /> <!--CHANGE VALUE TO YOUR LIKING!-->
                        </div>
                    </form>

    Cheers! 🙂

Comments are closed.