[Resolved] How to use taxonomy terms as variables in Content template

[Author]

Posts

[jozsefG]

I am creating a tourist information site about our county (hidden link) . I am using the DIVI theme and Divi builder to create Content templates.

I created a post type called DESTINATION. I also created a taxonomy called REGIONS. There are 6 different tourist regions and I have to color th destinations of each region a little differently. For example all titles are blue for Bihor Mountains region.

I created a term group to set a color for each region but it seems that I can only use those terms values only in archives... And I am now creating the Content template for Destinations post type.

No problem I can use the description of the region so I added hex value as descripton and used that to put the color value in form of a shortcode in the inline css. That worked for titles but I also have to use that color value in some transparent title backgrounds overlayed on the featured images of recommended destinations. For that I have to use RGBA values. So I rewrote the descriptions to RGB values separated with commas, and I tried to insert the shortcode like this:
<h1 style='color:rgba([wpv-post-taxonomy type="region" format="description"],1.00);'>Other destinations</h1>
This way I have the RGB value from the desc field and the rest is just plain CSS. But it outputs now as text, the shortcode is not working... I can assume only that it's because of the () pair.

Please help me find a way to achieve what I want because I already lost two working days with this...

I also attached a screenshot of the design. This is a destination page address: hidden link

PS... It's very annoying to change all those {!{ to [ brackets when I use the divi builder... Isn't there a solution for that?

TIA,
Zsolt

[Christian Cox]

Please help me find a way to achieve what I want because I already lost two working days with this...
I would take a slightly different approach. I would not store hex values in custom fields. I would predefine those values in CSS, and use term slugs to build CSS selectors that correspond to those colors. For example, let's say your Regions are Mountain, Desert, Grassland. The term slugs are "mountain", "desert", and "grassland". In your content template, you can apply the term as a CSS selector to some wrapper element around the entire template:

<div class="region {!{wpv-post-taxonomy type='region' format='slug'}!}">
  <h1>Post title</h1>
</div>

Then in your CSS you can use those slug selectors to assign different colors to things inside that template:

.region.mountain h1 {
  color: blue;
}

.region.desert h1 {
  color: red;
} 

.region.grassland h1 {
  color: green;
}

In other words, the styles are already defined in CSS. You use the term slug as a variable to apply different CSS classes. Obviously this is a simple example that should be refined to fit your site needs.

PS... It's very annoying to change all those {!{ to [ brackets when I use the divi builder... Isn't there a solution for that?
In the Divi Builder, you should leave the brackets just like that {!{ - }!}. You should not replace them with square brackets.

[jozsefG]

I have quite long and complicated slugs in 4 different languages. And there can be even more languages in the near future. And I have to use those colors in many instances. Isn't there a way to use my approach somehow? Or something similar where I don't have to write tons of css for every slug?

[Christian Cox]

Isn't there a way to use my approach somehow?
I think your approach would work if you fix the syntax. The wpv-post-taxonomy shortcode will add a comma after the description by default unless you add an empty string for the separator attribute. Here's an update:

<h1 style='color:rgba([wpv-post-taxonomy type="region" format="description" separator=""],1.00);'>Other destinations</h1>

If your term description is a comma-separated list of values like "100,150,200", then this should work. If it does not appear to work as expected, place the taxonomy shortcode outside of the h1 tag and see what it outputs, just to clarify where the problem is occurring.

[jozsefG]

Thanks Christian. Actually my shortcode was correct, the only problem was with a bug of the Divi Builder. I used a code module for it, because WP rewrites my code if I happen to click on visual on text editor, but if my shortcode is in it, it outputs the code as text and doesn't execute it. I guess because the parathesis in rgba(). So I switched for a text module and it is working.

Is there a plan to make term fields work globally, in content templates and views too? Because I don't see another possibility to "brand" my single pages for a CPT based on a taxonomy... I solved this now by using the description, but what happens if my client asks me to have an icon for every region? An Icon of the given region that shows in the single page of a destination?
I've seen several themes having this kind of functionality programmed so I guess it's not something against the logic of WP.

[Christian Cox]

Is there a plan to make term fields work globally, in content templates and views too?
You can use term fields in Views now...but only in taxonomy Views. If you want to include term fields in a post or a View of posts, the general approach is to create a taxonomy View and nest it inside the post or loop. Filter the taxonomy View by term, set by the current post or by the page where the View is inserted. This taxonomy View will loop over the terms applied to the current post, giving you the ability to output term information or term fields for each term. I do not know of a plan to change this recommended workflow.