[Resolved] Display Taxonomy Term Fields

[Author]

Posts

[donovanD]

I am trying to: Style a View to match a specific design. In this design, (a) individual terms in a taxonomy filter are styled with text and underline/rule matching their category color and (b) returning posts have a "read article" button with background color defined by the post category.

I visited this URL: hidden link

I expected to see: Latest News view styled to match the embedded image

Instead, I got: I see no way to display the category taxonomy filter terms and article buttons using WordPress defined category colors.

Please see attached screenshot showing the reference design above and the views output below.

Is it possible to configure this view to achieve the stated objectives:

(a) individual terms in a taxonomy filter are styled with text and underline/rule matching their category color and

(b) returning posts have a "read article" button with background color defined by the post category.

Thoughts?

Thanks!

[donovanD]

Here is the CSS I'm using to achieve the present results:

/* 
 * Style HP latest Articles Feature
 */

/* Radio button and container */
.hp-latest-articles-filters {
  float: left;
  width: 50%;
  height:300px;
  /*padding: 1em;*/
}

/* Hide radio button */
.hp-latest-articles-filters input {
    display: none ;
}

/* Stack radio buttons vertically */
label.radios-taxonomies-title:after {
    content: '';
    display: block;
}

/* Display articles to right of filters on desktop */
@media only screen and (min-device-width: 721px) {
.hp-latest-article {
  float: left;
  overflow: auto;
  width: 50%;
  height:300px;
  padding: 1em;
}
}

/* Display articles below filters on mobile */
@media only screen and (max-device-width: 720px) {
.hp-latest-article {
  overflow: auto;
  width: 100%;
  padding: 1em;
}
}

[donovanD]

Update/clarification: The Category 'color' attribute is a custom term field that is added by the theme (Elegant Themes Extra theme based on the Divi Builder).

Here is the filter shortcode that is being used to display post categories:

[wpv-control taxonomy="category" url_param="wpv-category" type="radios" default_label="Latest Article" taxonomy_order="ASC" taxonomy_orderby="name" hide_empty="true"]

This shortcode emits a radio button ('input') and label ('label') for each Category term. We want to extract each term's 'color' value and use it to set the color of the associated radio button label.

I have read the User Guide Front Page Filters article (https://toolset.com/documentation/user-guides/front-page-filters/), but it yielded no insight into how to style the individual category terms returned by [wpv-control] when configured to emit a group of radio buttons with taxonomy terms.

I have also searched for examples of retrieving term meta such as the Category 'color' field and determined that I will likely need to use the WordPress get_term_meta API to retrieve the category color value. However, this will need to be applied to the individual radio button labels, but I see no way of isolating them in the [wpv-filter-meta-html] returned by the [wpv-control ..] shortcode.

Any suggestions on how to accomplish this is appreciated.

Thanks!

[Beda]

1. Taxonomy Terms can be displayed or pulled only on Taxonomy Views or Taxonomy Archives.
There is no way to pull them in a Post View.

2. How to style the individual category terms returned by [wpv-control] when configured to emit a group of radio buttons with taxonomy terms.

This is only possible if you address each and every single item in the Radio.
Our Radio Labels have no singular Class and no ID. As such it's not feasible to address some CSS.
I will ask our Developers if it's possible to add at leas an ID attribute.

Unfortunately, your gaol cannot be achieved this way.

There is no way to pull the Taxonomy Field in a Post View, and you cannot address the radio fields in a "for each" method.

[donovanD]

Thanks Beda.

Just to clarify we are building a parametric search view. You can see it under the "Latest News" image on this page: hidden link

Yes, adding an ID attribute to the returned radio buttons would allow individual button label styling -- which is great.

Three questions:

1. Would we also need the associated category ID to retrieve the category color and set the label color property?

2. Would we need a way to retrieve and set the filter/radio button label colors in Views -- since there is no way to dynamically retrieve the category color from CSS?

3. If this Views approach is not feasible, can you suggest an alternate approach?

Thanks!

[Beda]

1. Would we also need the associated category ID to retrieve the category colour and set the label colour property?

No, you would call a specific img or background-color.
As mentioned it's not possible at all to address Term Fields or get them in a Post View.

2. Would we need a way to retrieve and set the filter/radio button label colours in Views -- since there is no way to dynamically retrieve the category colour from CSS?

No, as mentioned, this isn't possible.
This is because term fields can be retrieved only in Taxonomy Views (or archives).

3. If this Views approach is not feasible, can you suggest an alternate approach?

Unfortunately not, as Views is the Search and Display tool we offer.

It's an unusual request to style Taxonomy Filters like that.
Maybe if you would switch the type of Filter, it could partially work.

As an example, with Checkboxes.
These will produce an HTML where the single List Items get an ID, built with the taxonomy slug + it's ID.
So you can easily address each and every single one.
But still you could not get Term Field colours, it would require manual CSS.

[donovanD]

Thanks for the helpful reply Beda. Yes, I agree this is an unusual taxonomy filter styling request; but if you think about it, the use case is reasonable: category color is an established ux pattern, so extending category colors to the filter category selectors makes sense.

I chose the radio button because it displays all term options and is single select. However, your suggestion to use another type of filter could work if we can configure the filter to display all terms and allow single select -- or at least to emulate this operation. I will explore the checkbox as you suggested.

The manual CSS for term colors would require coding changes every time a new term is added, or if/when existing term colors are changed -- so we would need to find a work around. Assuming we use a checklist filter, could the post view term meta restriction be circumvented by creating a custom shortcode (using the WordPress get_term_meta function) and using it to set the individual label colors somewhere in the view?

Thanks!

[Beda]

The problem is you can't use ShortCodes or any other sort of conditional in the CSS editors.

Let's assume you do it the not-suggested way and add some <script> tags with CSS style in it, so to customise the look of each term in the filter, you could eventually achieve the goal.

But you cannot do that with get_term().
That function doesn't return Term Fields, AFAIK.
https://codex.wordpress.org/Function_Reference/get_term
Maybe you could work with https://developer.wordpress.org/reference/functions/get_term_field/

But either way, the solutions would imply not-suggested methods, and it would be possible only to style the checkboxes wich by default are not single-select.

I fear, this goal cannot be achieved with Toolset only but requires Custom Code that we cannot support.

I apologise for this and will forward this to the developers.

[donovanD]

Thank you Beda. I appreciate your assistance and offer to bring this to the attention of the developers. I will continue to explore options to achieve this.

Thanks again.

[Beda]

OK, thank you.

I will forward this to the Developers and we will discuss what we can do.

This ticket here could be closed, as in the current moment I cannot provide to you any satisfying solution.

[donovanD]

Thank you Beda. Closing this ticket.