joy
joy

Reputation: 101

How to create post taxonomy dropdown shortcode?

I am trying to create a dropdown shortcode for WordPress categories and tags taxonomies. I can seem to get the options to appear, but nothing happens upon selection.

I've managed to modify a code snippet that I am using for my WooCommerce tags filter for part of the solution.

Original Working Code Snippet ==>

add_shortcode( 'product_tax_dropdown', 'wc_product_taxonomy_dropdown' );
function wc_product_taxonomy_dropdown( $atts ) {
    // Attributes
    $atts = shortcode_atts( array(
        'hide_empty'   => '1', // or '0'
        'show_count'   => '0', // or '0'
        'orderby'      => 'name', // or 'order'
        'taxonomy'     => 'product_tag',
    ), $atts, 'product_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', 'woocommerce' ), $taxonomy_name ),
        'option_none_value'  => '',
        'value_field'        => 'slug',
        'taxonomy'   => $taxonomy,
        'name'       => $taxonomy,
        'class'      => 'dropdown_'.$taxonomy,
    ) );

    ?>
    <script type='text/javascript'>
        jQuery(function($){
            var select = '.dropdown_product_tag',
                taxonomy = '<?php echo $taxonomy; ?>';

            function onProductTaxChange() {
                if ( $(select).val() !=='' ) {
                    location.href = '<?php echo esc_url( home_url() ); ?>/?'+taxonomy+'='+$(select).val();
                }
            }
            $(select).change( onProductTaxChange );
        });
    </script>
    <?php

    return ob_get_clean();
}

Modified Broken Code Snippet ==>

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();
}

The taxonomies are appearing in a dropdown menu, but nothing happens when they are selected.

Upon selecting a taxonomy the user should be directed to the selected archive page:

Category Example: http://www.website.com/category/seleted-category Tag Example: http://www.website.com/tag/selected-tag

Upvotes: 0

Views: 572

Answers (1)

Sky
Sky

Reputation: 362

An alternative solution

add_shortcode('product_tax_dropdown', 'wc_product_taxonomy_dropdown');
function wc_product_taxonomy_dropdown( $atts ) {
    // Attributes
    $atts = shortcode_atts(array(
        'hide_empty'   => '1', // or '0'
        'show_count'   => '0', // or '0'
        'orderby'      => 'name', // or 'order'
        'taxonomy'     => 'product_tag',
    ), $atts, 'product_tax_dropdown');

    ob_start();
   ?> 
    <select class="<?php echo $atts['taxonomy']; ?>" name="<?php echo $atts['taxonomy']; ?>">
      <option><?php echo sprintf( __( 'Select a %s', 'woocommerce' ), $taxonomy_name ); ?> </option>
      <?php
        $terms = get_terms(array('taxonomy' => $atts['taxonomy'], 'hide_empty' => $atts['hide_empty'], 'show_count' => $atts['show_count'], 'orderby' => $atts['orderby']));
        foreach ($terms as $key => $term) {
      ?>
        <option value="<?php echo get_term_link($term->term_id, $atts['taxonomy']); ?>"><?php echo $term->name; ?></option>
      <?php } ?>
    </select>
    <script type='text/javascript'>
        jQuery(function(){
            var select = '.'<?php echo $atts['taxonomy']; ?>;
            jQuery(select).on('change', function() {
              if (jQuery(this).val() !== '') {
                  location.href = jQuery(this).val();
              }  
            });
        });
    </script>
    <?php
}

Upvotes: 1

Related Questions