Replacing hierarchal checkboxes with dropdown selector on custom taxonomy inside custom post type

Question

I have seen several blog posts on this topic but have not been able to implement them with success.

I have tried the following (perhaps one of these is the solution and I am slightly off):

I have a CPT of Properties, that has three custom taxonomies:

Guests
Rooms
City (The city taxonomy is populated through a custom function that watches for when a second CPT [Destinations] has new posts created and adds the same name as a taxonomy to the Properties City entries)

I would like to ensure that when creating a Property post and setting its city that only one city(destination) is selected. I would like to use a dropdown for this action.

Following the 1st(or 3rd) link above's example I have tried the below implementation:

The function for initializing in my functions.php:

// Creates dropdown taxonomy select for guest taxonomy in Properties.
function dropdown_tax_init(){

  $categories = get_categories('taxonomy=city');
  $select     = "<select name='cat' id='cat' class='top-tags-dropdown'>n";
  $select .= "<option value='-1'>Select Tag</option>n";
  foreach ($categories as $category) {
      if ($category->count > 0) {
          $select .= "<option value='" . $category->slug . "'>" . $category->name . "</option>";
      }
  }
  $select .= "</select>";
  echo $select;

}

add_action( 'init', 'dropdown_tax_init' );

I also call the js via my functions.php like so:

function admin_footer_script() {
    wp_register_script('dropdown_tax_script', get_template_directory_uri() . '/js/taxonomy-dropdown.js', array('jquery'), '1.0.0'); // Conditional script(s)
    wp_enqueue_script('dropdown_tax_script'); // Enqueue it!
}

add_action( 'admin_footer', 'admin_footer_script' );

Lasty, my js is as follows:

var dropdown = document.getElementById("cat");

function onCatChange() {
    if (dropdown.options[dropdown.selectedIndex].value != -1) {
        location.href = "<?php echo home_url();?>/city/" + dropdown.options[dropdown.selectedIndex].value + "/";
    }
}
dropdown.onchange = onCatChange;

My javascript is showing in inspect in the admin footer.

The drop down flashes on load but the custom taxonomies do not load when I have the function in my function.php something is breaking the loading of custom taxonomies in the right sidebar in the Gutenberg editor. They never show up.

Happy to go into further details, thank you.

score 0 · Answer 1 · answered Sep 21 '19 at 05:26

Not sure if this is the main reason, but anyway you can't exec PHP code form Javascript like that:

location.href = "<?php echo home_url();?>/city/" + '...';

This would result into invalid url and fail the redirect. If you need to transfer some values from PHP to JS, use wp_localize_script() function instead. Check detailes here.

To debug other potential troubles you need to perform some separate tets:

PHP-side. Make sure that your $categoriesarray is not empty and it has non-empty categories or simply check the $select output (without any related JS executed for now).
JS-side. Log each call of onCatChange() to Console to be sure that onchange event: a) fires correctly, 2) is not triggered by some other reason (e.g. loosing focus in old IE or other tricky surprises). Then log the the string value assigned to location.href and make sure that it is not broken and is a valid url.

Additional tips:

Always escape your output ($category->slug, $category->name -- they are not always reliable and sometimes may break your markup);
Probably missed backslashes when inserting line breaks into strings: should be \n, not just n?
If you call a script with dependency array('jquery'), feel free to use jQuery instead of vanilla JavaScript. This can help you avoid crossbrowser issues.

Hope this helps.

Replacing hierarchal checkboxes with dropdown selector on custom taxonomy inside custom post type

1 Answers1