I created a directory website with dropdowns in the menu allowing the user to navigate throughout the categories and sub categories. [Website]

I am using wp_dropdown_categories() to display the menus and the javascript shared here to allow the user to select category and be navigated to that page. When 'All Categories' is selected, nothing happens. How can that functionality be added?

$args = array(
    'show_option_all'    => 'All Categories',
    'show_option_none'   => 'BROWSE',
    'orderby'            => 'NAME', 
    'order'              => 'ASC',
    'show_count'         => 0,
    'hide_empty'         => 1, 
    'child_of'           => 0,
    'exclude'            => 1,
    'echo'               => 1,
    'selected'           => $cat_id2->term_id,
    'hierarchical'       => 1, 
    'name'               => 'cat',
    'id'                 => '',
    'class'              => 'postform',
    'depth'              => 1,
    'tab_index'          => 0,
    'taxonomy'           => 'category',
    'hide_if_empty'      => false,

wp_dropdown_categories( $args );


<script type="text/javascript">
var dropdown = document.getElementById("cat");
function onCatChange() {
    if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
        location.href = "<?php echo get_option('home'); ?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
dropdown.onchange = onCatChange;

  • Are you using the Javascript example 1 or 2 from the codex's wp_dropdown_categories? Can you provide the Javascript as well?
    – RachieVee
    Commented Oct 8, 2014 at 20:25
  • JS is now provided above.
    – MF1
    Commented Oct 12, 2014 at 0:41
  • 1
    $cat_id2 is not defined. And your "dropdown" variable is null on page load. The function isn't running whenever an option is being changed in the dropdow, only on page load. You may need to find some JS help for this as that isn't my expertise. Looks like your only PHP issue is the $cat_id2 being undefined. Hope that helps.
    – RachieVee
    Commented Oct 23, 2014 at 16:10
  • Would it help to see the link of my site?
    – MF1
    Commented Oct 23, 2014 at 16:19
  • 1
    Sure. The more you can provide, the better. Hopefully someone can help you out if I can't. Good luck! :-)
    – RachieVee
    Commented Oct 23, 2014 at 16:28

3 Answers 3


Here is a variation of the code that you use. I'm using get_categories() here to achieve the same goal. I had to adjust my code slightly to make it acceptable for your need.

There are a however other modifications you have to make for this to work. When you select the All Categories option, you will be taken to a page that will display what ever you need to display. This page you will have to manually create

There is no index archive pages in Wordpress as you might know. (Check out this post I have done on the same subject). What this means is, domain.com/category/ returns a 404.

So, to make this all work, you'll have to make a copy of page.php, rename it to something like page-category.php (see the codex on how to create custom page templates), open it up, create your custom query to display what you would like to display when this page is visited

You now need to create your page in the back end. I would suggest that you use the slug category so that when you visit domain.com/category/, this page would be displayed. (Just remember, you cannot create child pages for this page, it will break the hierarchy). I have also made the code to go to domain.com/category/ when All Categories is selected

Apart from that, the code should work fine. You just need to check the URL structures maybe, and also set the parameters in get_categories() to suite your needs. Here is the drop down code.

<select name="event-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'> 
    <option value=""><?php echo esc_attr(__('Select Category')); ?></option> 

        $option = '<option value="' . get_option('home') . '/category/">All Categories</option>'; // change category to your custom page slug
        $categories = get_categories(); 
        foreach ($categories as $category) {
            $option .= '<option value="'.get_option('home').'/category/'.$category->slug.'">';
            $option .= $category->cat_name;
            $option .= ' ('.$category->category_count.')';
            $option .= '</option>';
        echo $option;


I actually had an idea here that will come in handy. I've recently done an answer on displaying all categories in a list with all post titles under the specific category. This same idea can be used in your page-category.php template.

When a user selects the All Categories option, they will be taken to this page which will list all categories and post title.

Here is the complete code: (for an explanation of the code, see my post here)

In your functions.php

add_action( 'transition_post_status', 'publish_new_post', 10, 3 );

function publish_new_post() {
   delete_transient( 'category_list' );

In your template where you need to display your list

if ( false === ( $q = get_transient( 'category_list' ) ) ) {

    $args = array( 
        'posts_per_page' => -1

    $query = new WP_Query($args); 

    $q = array();

    while ( $query->have_posts() ) { 


        $a = '<a href="'. get_permalink() .'">' . get_the_title() .'</a>';

        $categories = get_the_category();

        foreach ( $categories as $key=>$category ) {

            $b = '<a href="' . get_category_link( $category ) . '">' . $category->name . '</a>';    


        $q[$b][] = $a; // Create an array with the category names and post titles

    /* Restore original Post Data */

set_transient( 'category_list', $q, 12 * HOUR_IN_SECONDS );

foreach ($q as $key=>$values) {
        echo $key;

        echo '<ul>';
            foreach ($values as $value){
                echo '<li>' . $value . '</li>';
        echo '</ul>';


You could probably just modify the script above to this:

var dropdown = document.getElementById("cat");
function onCatChange() {
    if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
        location.href = "<?php echo get_option('home'); ?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
    else if ( dropdown.options[dropdown.selectedIndex].value == 0 ) {
        location.href = "<?php echo get_option('home'); ?>";
dropdown.onchange = onCatChange;

If you want to also include -1 (BROWSE CATEGORIES) you could change the second conditional to: dropdown.options[dropdown.selectedIndex].value <= 0


I was going to add this as a comment, but my rep points aren't high enough yet :)

I spent about 20 mins testing/ walking through what you have. My first test replicated the problem you describe, but when I set up some breakpoints (the change event and a specific LOC) and watch expressions using the built in Chrome debugging tools, the problem appears to have stopped occurring. I'm assuming you've either fixed the problem, or there is some state change that has occurred for my session based on using the Chrome Inspect tool so that it now works.

You do appear to have one error in your JS: in each place you have the code:

dropdown(x).onchange = onCatChange(x); 

(e.g. lines 567, 4840, 4851), this code is throwing an error when the value is 0 (the 'All' entry elected) and possibly also -1 (the 'Browse' entry selected), although I suspect that this occurs simply because selecting BROWSE causes the top-level All entry to be set again by default (which in turn triggers the error).

Perhaps in some cases, this error being thrown causes execution to stop depending on the browsers settings for Java error handling? And in turning on the debugging tools I may have toggled a change in execution mode so that the code continues through this failure? Just an idea.

Also, when I select "Activities" in Dropdown1, "Bowling" in Dropdown2, then change the Dropdown2 selection to "All Activities", the URL stays as:


but the page content changes to display the simple text "category".

Anyway, hope this helps you out!


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.