• Hello, I am using a modified snippet to display my post categories in a dropdown. I am able to display the categories in a dropdown as expected, but the script is broken, as there is no action when a category is selected. Can someone help to see what I may be missing?

    Thank you.

    add_shortcode( 'tax_dropdown', 'taxonomy_dropdown' );
    function taxonomy_dropdown( $atts ) {
        // Attributes
        $atts = shortcode_atts( array(
            'hide_empty'   => '1', // or '0'
            'show_count'   => '0', // or '0'
            'orderby'      => 'name', // or 'order'
            'taxonomy'     => 'post_tag',
        ), $atts, 'tax_dropdown' );
    
        global $wp_query;
    
        $taxonomy      = $atts['taxonomy'];
        $taxonomy_name = get_taxonomy( $taxonomy )->labels->singular_name;
    
        ob_start();
    
        wp_dropdown_categories( array(
            'hide_empty' => $atts['hide_empty'],
            'show_count' => $atts['show_count'],
            'orderby'    => $atts['orderby'],
            'selected'           => isset( $wp_query->query_vars[$taxonomy] ) ? $wp_query->query_vars[$taxonomy] : '',
            'show_option_none'   => sprintf( __( 'Select a %s', 'post' ), $taxonomy_name ),
            'option_none_value'  => '',
            'value_field'        => 'slug',
            'taxonomy'   => $taxonomy,
            'name'       => $taxonomy,
            'class'      => 'dropdown_'.$taxonomy,
        ) );
    
        ?>
        <script type='text/javascript'>
            jQuery(function($){
                var select = '.dropdown_tag',
                    taxonomy = '<?php echo $taxonomy; ?>';
    
                function onTaxChange() {
                    if ( $(select).val() !=='' ) {
                        location.href = '<?php echo esc_url( home_url() ); ?>/?'+taxonomy+'='+$(select).val();
                    }
                }
                $(select).change( onTaxChange );
            });
        </script>
        <?php
    
        return ob_get_clean();
    }
Viewing 7 replies - 1 through 7 (of 7 total)
  • You have
    'class' => 'dropdown_'.$taxonomy,
    and
    var select = '.dropdown_tag',
    that don’t match. (default taxonomy is ‘post_tag’)

    Thread Starter shemakeswebsites

    (@shemakeswebsites)

    Hi Joy – my name is Joy as well. ??

    Thank you for your response…but unfortunately I don’t have any clue what I’m doing with this. I’ve tried to change the mentioned fields a few times but I still can’t get it to work. Also, I realized that I posted the wrong code snippet. I’m actually trying to reflect categories, not tags. This is what I last tried, with a slightly different script, but same results. The categories are reflected on the front-end in a dropdown, but there is no action when a category is selected.

    add_shortcode( 'cat_dropdown', 'category_dropdown' );
    function category_dropdown( $atts ) {
        // Attributes
        $atts = shortcode_atts( array(
            'hide_empty'   => '1', // or '0'
            'show_count'   => '0', // or '0'
            'orderby'      => 'name', // or 'order'
            'taxonomy'     => 'category',
        ), $atts, 'cat_dropdown' );
    
        global $wp_query;
    
        $taxonomy      = $atts['taxonomy'];
        $taxonomy_name = get_taxonomy( $taxonomy )->labels->singular_name;
    
        ob_start();
    
        wp_dropdown_categories( array(
            'hide_empty' => $atts['hide_empty'],
            'show_count' => $atts['show_count'],
            'orderby'    => $atts['orderby'],
            'selected'           => isset( $wp_query->query_vars[$taxonomy] ) ? $wp_query->query_vars[$taxonomy] : '',
            'show_option_none'   => sprintf( __( 'Select a %s', 'post' ), $taxonomy_name ),
            'option_none_value'  => '',
            'value_field'        => 'slug',
            'taxonomy'   => $taxonomy,
            'name'       => $taxonomy,
            'class'      => 'dropdown_'.$taxonomy,
        ) );
    
        ?>
        <script type='text/javascript'>
            jQuery(function($){
                var select = document.getElementById("cat");
        function onCatChange() {
            if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
                location.href = "<?php echo esc_url( home_url( '/' ) ); ?>?cat="+dropdown.options[dropdown.selectedIndex].value;
            }
        }
        dropdown.onchange = onCatChange;
            });
        </script>
        <?php
    
        return ob_get_clean();
    }

    Same problem.
    You have
    'class' => 'dropdown_'.$taxonomy,
    and are using getElementById("cat") so it will net find it because there is no ID called cat.

    Thread Starter shemakeswebsites

    (@shemakeswebsites)

    ??

    Thank you for trying to help – this is just over my head and I’m not understanding.

    Moderator bcworkz

    (@bcworkz)

    Why are you assigning the element name from a passed attribute? Are there multiple dropdowns on one page? If not, just name your dropdown “cat” in the arguments array 'name' => 'cat'. (or don’t name it at all, “cat” is the default) Then getElementById(“cat”) will work (the ID is the same as name unless specified otherwise).

    You are also assigning the element object to select variable, but then you are trying to manipulate an object in undefined dropdown. Try assigning the element object to dropdown instead of select. These sort of blunders (we’ve all done it) throw error messages in your browser console. By checking the console when the unexpected happens can often guide you to resolving the problem.

    Not that it really matters, but it’s odd to use a jQuery noConflict wrapper (jQuery(function($){}) and not use any jQuery within. If you are going to bother with jQuery at all, you may as well use it.

    $("#cat").change( function() {
      // do something when the field changes
    });

    Be sure the jquery library is being loaded on your page if you are going to use jQuery.

    I hope this helps in you understanding.

    Thread Starter shemakeswebsites

    (@shemakeswebsites)

    Hi, thank you for the reply. I don’t know what I’m doing. There is not multiple dropdowns on the page. ??

    I found a snippet that would create a woocommerce category dropdown, and it worked perfectly as is. I have tried to modify that original snippet to just reflect post categories and I haven’t been successful.

    I’ll try again. If I figure it out I will post the snippet here to help anyone else who may want to use this. Thank you.

    Moderator bcworkz

    (@bcworkz)

    At one time, everyone started out coding without knowing what they are doing. It’s fine, it’s part of learning. Keep at it. It’ll eventually make sense if you do. Good luck.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Category dropdown script issue’ is closed to new replies.