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 am creating a custom dropdown for my wp site and I am running into issues.

I have a taxonomy set up called 'types', these can be filtered in a nav at the top of the page and they link to the right taxonomy template which filters through the category by finding the query var in the url and then returning the results into the template for each category type.

I am trying to create a dropdown where when someone clicks a category in the drop down it does exactly the same as what my menu at the top of the page does. here is my code so far:

Top menu that allows me to click into each filtered term and name:

<?php
        echo '<ul id="the-directory" class="col3-2 super-nav">';
            $args = array( 'taxonomy' => 'types', 'style' => 'list', 'title_li' => '', 'walker' => new WPSE67791_Walker_Category );
            wp_list_categories( $args );
        echo '<img class="cat-img" src="'; echo get_template_directory_uri(); echo '/images/directory-image.jpg"'; echo 'alt="directory-image" />';
        echo '</ul>'; 
        ?>

The walker function:

class WPSE67791_Walker_Category extends Walker_Category {

    public function start_el(&$output, $category, $depth, $args) {
        parent::start_el( $output, $category, $depth, $args );
                $find = 'cat-item-' . $category->term_id . '"';
                $replace = 'category-' . $category->slug . '"';
                $output = str_replace( $find, $replace, $output );

        }
    }

    // nav menu walker
    class My_Walker extends Walker_Nav_Menu
    {
    function start_el(&$output, $item, $depth, $args) {
        global $wp_query;
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

        $class_names = $value = '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
        $class_names = ' class="'. esc_attr(  basename(get_permalink($item->object_id )) ) .' ' . esc_attr( $class_names ) . '"';

        $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

        $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
        $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
        $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
        $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
        $attributes .= ' data-id="'. esc_attr( $item->object_id        ) .'"';
        $attributes .= ' data-slug="'. esc_attr(  basename(get_permalink($item->object_id )) ) .'"';
        $attributes .= ' id="'. esc_attr(  basename(get_permalink($item->object_id )) ) .'"';



        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= '</a>'; /* This is where I changed things. */
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
    }

The above code creates the menu and I can click into the template and view the content.

What I want to do is have a similar set up in a dropdown at another section of the site different to the above nav.

Currently I have in a sidebar this code:

<form method="get" action="<?php bloginfo('url'); ?>">
<?php
    wp_dropdown_categories(array('show_option_all' => 'Browse shops by category','taxonomy' => 'types', 'depth' => '1'));
?>
<script type="text/javascript"><!--
    var dropdown = document.getElementById("cat");
    function onCatChange() {
        if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
            location.href = "<?php echo get_option('/'); ?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
        }
    }
    dropdown.onchange = onCatChange;
</script>
    </div>
</form>

The problem with this is it only gives me a url like so: ?cat=6 and this does not work on my templates at all.

Is there something that needs to be done in a new walker function to enable the dropdown to work like I want it to?

Thanks Mark

share|improve this question
add comment

Your Answer

 
discard

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

Browse other questions tagged or ask your own question.