[Resolved] Ordering a Taxonomy view by Hierarchy rather than alphabetical order

[Author]

Posts

[jenniferC-6]

Tell us what you are trying to do?
I'm using the toolset Fields and Text block to display a list of 'location' taxonomy terms associated with my CPT. While I can get the proper terms to show up as intended, the only order selection I have is Ascending or Descending so they are displaying in alphabetical order when I want them to show up in parent/child/hierarchical order.

This is a visual of how the parent/child taxonomy structure is set up in WP backend taxonomy for this CPT:
USA (parent)
-South (child)
--Virginia (grandchild)
--- Blue Ridge Highlands (great-grandchild 1)
--- Central Virginia (great-grandchild 2)
--- Southern Virginia (great-grandchild 3)

So I'm trying to get the terms to display like this:
USA, South, Virginia, Blue Ridge Highlands, Central Virginia, Southern Virginia

...they are actually displaying in alphabetical order like this:
Virginia, USA, Southern Virginia, South, Central Virginia, Blue Ridge Highlands

Is there any documentation that you are following?

I found a few older posts from 2-3 years ago, but I'm wondering if this is still the best way to tackle this issue given there's been quite a few updates in Toolset since then. Can you please advise on simplest way to achieve this?
Here's the older post I found: https://toolset.com/forums/topic/taxonomy-hierachy/

[Jamal]

Hello and thank you for contacting the Toolset support.

Toolset did not support the hierarchical order for displaying taxonomies since then. The custom shortcode solution is still the simplest workaround to achieve this. Another workaround could be the user of a 3rd party plugin that will affect the order of returned terms from regular WordPress functions. For example: https://wordpress.org/plugins/taxonomy-terms-order/

IMHO, the custom shortcode is better suited as it will not affect the overall functioning of WordPress. Instead it will be applied only where the shortcode is being used.

I hope this helps. Let me know if you have any questions.

[jenniferC-6]

Thank you for the reply. I have tried the solution using the custom shortcode as described in the old post link I provided, but I'm still not able to get this to work.

I saved the given php snippet in the custom code area of Toolset settings. Then I tried to use a shortcode block to add this in a content template. All I am getting is the actual code on the front end.

What am I doing wrong here?

[Jamal]

If the shortcode appears as is on the frontend, it means that it was not registered correctly. I think that the snippet is still inactive, and that's why the shortcode is not evaluate. Check this screenshot hidden link

Activate the snippet, and reload the custom code page to check if it was activated correctly.

If that does not help, allow me temporary access to your website and I'll check it closely. Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

[jenniferC-6]

Thank you Jamal! That did work and now the shortcode is showing properly on the front end. Still a few questions...
Is there a way to get rid of the separator being displayed after the last taxonomy term?

Here's an example of how it looks on front end now:
USA - South - Virginia - Blue Ridge Highlands - Central Virginia - Southern Virginia -
I would like for the last '-' not to show.

Also, how do you change the separator character to '>' so it looks more like a traditional breadcrumb?

[jenniferC-6]

Whoops! Nevermind about the separator character... I see now that I just change it in the shortcode, but still would like to know how to get rid of that last separator hanging out at the end.

[jenniferC-6]

One last question... how do you style a shortcode like this? I will be putting the shortcode in a few different places on my site and each instance will need a different font size and color.

[Jamal]

The custom code will use a core WordPress function "wp_list_categories", we can't customize its output using this code, but we can hide the last separator using some CSS. Would it be possible to share a URL where I can see this, and I'll see what custom CSS code can be added to it.

[jenniferC-6]

Here is an example url:
hidden link

So as far as styling the text size, can you wrap a shortcode in a div or something like that?

[Jamal]

Currently, the separator is simple text " - " and it is hard to hide using CSS. Can you try with an HTML separator in the shortcode:

[display_post_tax_terms .... separator = "<span> - </span>"]

Then it would be easier to add custom CSS code to hide the last separator span.

If you are unsure how to do it, allow me temporary access to your website to help with it. Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

[Jamal]

Thank you for the credentials. Now that you have set the separator as HTML span tag, we can hide the last one using the following CSS code, I tested it on the content template and it works as expected:

.entry-content>p span:last-child {
    display: none;
}