[Resolved] Display of Hierarchical Taxonomy in View Filter

[Author]

Posts

[ngo6012]

If you take a look at hidden link you will see a working filter displaying some custom taxonomies. The Issue and Region taxonomies are set up to be hierarchical. However I have not found a way to style these on the front end in order to differentiate parent terms from child terms. My solution so far is I have manually added arrow signs into the term names. I would like to eliminate this, and add a "child_term" class to child terms and a "parent_term" class to parent terms in order to style them differently within this filter. None of the functions I have tried to add in functions.php have worked for this issue. Thank you for taking a look!

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Jodi

You confused me for a while there because your filters look like select boxes (multi-select) but are in fact checkboxes styled to look like select boxes.

If you simply insert the taxonomy filters as a select field or multi-select field then the taxonomy hierarchy is automatically displayed, as shown in my screenshot.

I suggest you change the type of filter to a multi-select and update the styling to your requirements.

Note that you will need to update the type attribute of the wpv-control-post-taxonomy shortcode, something like this:

<div class="form-group">
	<label>[wpml-string context="wpv-views"]Statuses[/wpml-string]</label>
	[wpv-control-post-taxonomy taxonomy="status" type="multi-select" default_label="--choose--" url_param="wpv-status"]
</div>

[ngo6012]

Hi Nigel,

I would still like to add parent and child classes to these terms in order to style them further. Can you help me do so?
Thank you,
Jodi

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Jodi

I had a look at the source code, it is not very easy to do this as there is nothing in the markup to identify which are parents and which children.

Only the content of the options themselves, which for child terms contain a dash.

I can use that to target the child terms to add a class (e.g. "child-term") to those options, but this is somewhat brittle, in that it would also pick up any other terms that include a dash anywhere in the name.

That's the best I can come up with, though.

You would need to add the following to the custom JS section of your View:

( function( $ ) {
	$( document ).ready( function(){

		$("select[multiple='multiple'] option:contains('-')").addClass('child-term');
	});
})( jQuery );

[ngo6012]

Hi Nigel,

Thanks for your suggestion but unfortunately this isn't going to help me. My thought was there must be a way to assign classes utilizing a WP PHP function such as get_term_children() or get_terms(). Perhaps in combination with global $wp_query? Then assign it to the <input> for the filter on the publications page.

[ngo6012]

With this new screenshot you can see the term has an id assigned that is in the format of (taxonomy name )-(term name), in this case region- or issue- for the taxonomy name. The class that I added within the view type is also here, but adding this class isn't helping me separate the terms at all. Maybe there's a way to edit the id and change it to (parent)-(term name) or (child)-(term name)?

If you have an idea of where this id is assigned (specific php file in backend?) that would be really helpful! Or perhaps there is some code I can just add to functions.php

Thanks!

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Jodi

Unfortunately Views doesn't provide any means to customise the filter output other than the styling options to add classnames to all elements, for example.

When using the checkboxes option for the filter there is nothing in the markup at all to distinguish between parent and child terms.

There is when using the multi-select option, in the form of an indentation and dash for the child terms, which is what the code I provided above was targeting, but from your follow-up question I see that you are still using checkboxes.

The only way you could use checkboxes and add different classnames would be to do so with a combination of PHP and JavaScript.

In PHP you could generate an array of child terms and an array of parent terms, and make these available as JavaScript objects on the front end using the WP function wp_localize_script (there is a good explanation here: hidden link), and then use jQuery to add the classnames to the parents and to the children as required.

I think it would be easier to change to a multi-select filter and use the code I provided above.

If you wanted to try the alternative I just described but are not able to do that yourself, you could try contacting one of the contractors listed here: https://toolset.com/contractors/