WP Job Manager Field Editor Dynamic Taxonomy Child Dropdowns Demo

Dynamic Taxonomy Child Dropdowns

Advanced Field Configuration Tab

please note: this feature only works for hierarchal taxonomies (meaning only taxonomies you can set terms to have a “parent”).  This works for any taxonomy (custom or default) assigned to Job or Resume post types.

To enable this setting, edit the taxonomy field you want to use this new feature on.  As you can see in the screenshot on the left, there will now be a new setting you can enable “Child Dropdown“.

Enabling this setting will force the initial dropdown to ONLY show the top level category terms.  Once a term is selected from the dropdown, the associated child terms will be shown in a dynamically generated and shown dropdown.

By default, any child dropdowns shown, will inherit configuration from the main field (required, single/multiple, placeholder, etc)

Tutorial Video

Customizing Child Dropdowns

Dynamic Taxonomy Term Fields

To extend this feature even further, you can also completely customize how the dynamically shown child dropdown will be configured.

To customize the child dropdown, go to the taxonomy page (where you edit/add taxonomy terms), and you will now see a bunch of new fields that can be configured for each term.  This includes the type of dropdown (Single/Multiple), Max Selections (if using multiple), whether or not to require a selection, and a custom placeholder (details below).

If you already have existing taxonomies you want to modify, just click edit, and you will see all these new fields on the edit page.

Child Dropdown Settings

Below are each of the available settings for dynamically shown child dropdowns.  These settings can be found when editing a taxonomy term.  The settings apply to child terms of the term you configure them on.

Description

The main description field for the term (below where you select a parent), is what will be used for the description shown below the dynamically shown field (if one is set).

Child Dropdown

• inherit – This is the default setting.  The child dropdown will inherit settings from the main field configuration (required, single/multiple, placeholder)
• single – Force single select dropdown for all child terms, ignoring whether or not main field is single/multiple (visitor will only be able to select one option)
• multiple – Force multiple select dropdown for all child terms, ignoring whether or not main field is single/multiple

Max Selections

If parent (main field) is a multiple select field type, or if you forced child dropdown to be multiple (settings above), you can customize the max selections that can be made specifically for this child dropdown.

Require Selection

• inherit – This is the default setting.  The child dropdown will inherit required setting from main field configuration.
• Required – Force require a selection when this child dropdown is shown (ignoring main field configuration)
• Not Required – Force do not require a selection when this child dropdown is shown (ignoring main field configuration)

Placeholder

Use this field to set your own custom placeholder to use for the child dropdown.  The placeholder is what you see when no selections have been made in the dropdown (ie “Please choose an option”).  If this value is not set, the placeholder from the main field configuration (or the default from main field) will be used.

Child Dropdown + Conditional Logic

This initial release of the dynamic child dropdowns should be fully compatible with the Conditional Logic features.

There was a lot of time and effort put into making sure that the new dynamic child dropdowns were fully compatible with the conditional logic feature.  With that said though, because of the unlimited possibilities when it comes to conditional logic, there may be specific conditional logic setups that might not work correctly with the new dynamic dropdown features.  Please make sure to test all conditional logic setups after setting up any dynamic child dropdowns, to make sure that they work correctly with your setup.  If you find any issues, please make sure to open a support ticket and let me know.

Child Dropdown Examples

Using the example settings from image above (included below as well), this is how it would look in the output:

WP Job Manager Field Editor Dynamic Taxonomy Child Dropdowns Demo

Dynamic Taxonomy Term Fields

Required Child Dropdown

This release also adds some new handling i’ve been working on for HTML5 required validation on Chosen fields.  If you’re wondering what that means, think about when you submit a form for a Chosen field without selecting something … it submits and then loads the page again, showing an error for the submit.  The HTML5 validation is when a notification is shown before the page is submitted (the “please enter a value”).

The problem with Chosen.JS and HTML5 required fields, is the way that Chosen.JS initializes itself .. what is does, is creates a dynamic element, and actually hides the original select element … so when you try to use HTML5 validation, it doesn’t work, because the select element is hidden.

The solution I came up with uses only CSS, and from all my tests in 4-5 of the most popular Job Manager themes, it works great.  As of this initial release, i’ve only implemented this on child dropdowns.  Reason being is to allow users to thoroughly test this before adding this feature to the normal/standard chosen dropdowns (non child ones).

If you are not comfortable with adding filters/functions to your child theme’s functions.php  file, I recommend installing the Code Snippets plugin and using that to add your custom code (I still use this a lot of the time myself).

Features

• Sorting is based on taxonomy Name and is case-insensitive (capitalization does not matter)
• Any values not included in the sort array will be added after the sorted values

Example Filter

The filter you would use to specify the custom sorting is based on the taxonomy you’re going to sort.  If you don’t know the taxonomy slug, goto the screen where you can edit/add taxonomy values, and look at the URL in your browser, it is the value right after taxonomy= , as an example if this was my URL:

https://domain.com/wp-admin/edit-tags.php?taxonomy=food_styles&post_type=job_listing

The taxonomy slug would be food_styles

Using the example taxonomy above, the filter you would use, is as follows:

add_filter( 'field_editor_food_styles_tax_output_sort', 'custom_food_styles_sorting', 10, 4 );

As you can tell, the filter syntax would be:

field_editor_TAXONOMYSLUG_tax_output_sort

Example Function

In the example above, the function used for the filter is going to be custom_food_styles_sorting, with a priority of 10, and 4 args that will be passed to that function.

The 4 args that are passed to the function is as follows (you will probably not need all of them, but they are provided for reference or advanced developer usage):

$sort  – first argument passed is an empty array array() , if you return an empty array nothing will be sorted

$meta_key  – second argument is the meta key that is associated with this taxonomy and was called to be output

$listing_id – third argument is the listing ID that is being output

$args  – fourth argument is an array of field configuration data

function custom_food_styles_sorting( $sort, $meta_key, $listing_id, $args ){

    $my_sort = array( 'breakfast', 'Lunch', 'Dinner' );
    return $my_sort;

}

As you can see in the example above, in the function I have defined that I want the taxonomy output sorted in the order of  ‘breakfast’, ‘Lunch’, ‘Dinner’

You will notice that I did not capitalize the first value breakfast , and that was on purpose to show you below, how sorting is done case-insensitive, to still sort correctly, even if there was a user input error (you did not capitalize correctly), or if capitalization is changed on the taxonomy itself, but not in the code for sorting.

Full Code Example

add_filter( 'field_editor_food_styles_tax_output_sort', 'custom_food_styles_sorting', 10, 4 );

function custom_food_styles_sorting( $sort, $meta_key, $listing_id, $args ){

    $my_sort = array( 'breakfast', 'Lunch', 'Dinner' );
    return $my_sort;

}

Full Example Output:

Let’s say that on our example listing, the person who submitted the listing selected these taxonomy values:

Breakfast, Brunch, Lunch, Dinner

Normally without any custom sorting (without using the filter), the default output would be in alphabetical order, and would look like this:

Breakfast, Brunch, Dinner, Lunch

Notice how Lunch  is showing after Dinner … which is not what we want, so to fix it, we add the example code from above to our site.

When we add our custom sorting code above to our child theme’s functions.php  file (or using Code Snippets plugin), the order we defined was:

$my_sort = array( 'breakfast', 'Lunch', 'Dinner' );

The values output on the listing would then look like this:

Breakfast, Lunch, Dinner, Brunch

You will notice that the first value, Breakfast, the output is capitalized, but in our sort array we did not capitalize it.  That is because the values you pass to the sorting filter are case-insensitive, the actual value (with capitalization) that will be output, is based on how you have it set in the taxonomy configuration (in WordPress admin area).

You may also notice that Brunch  is now showing on the end.  This is because you did not define Brunch  in your sort array, and as such, it is added to the end of the sorted values when output.  To include Brunch  in the sorting, all you need to do is add Brunch  to the array $my_sort = array( ‘breakfast’, ‘Brunch’, ‘Lunch’, ‘Dinner’ ); and then it will be included in the sorting and output like this:

Breakfast, Brunch, Lunch, Dinner

And voila! Profit!