[Resolved] Setting up conditional css depending on taxonomy

[Author]

Posts

[MorganM3180]

Tell us what you are trying to do?

I'm trying to style each taxonomy business type (retail, restaurants, lodging, health, services, etc)with its own css styles - in the archive, the taxonomy archives, and in the single business template. I want the name of the category to be a particular color, a text background block will be in the same particular color, etc.

Is there any documentation that you are following?
I was using a solved support request, "https://toolset.com/forums/topic/css-for-categories/", however, it wasn't clear to me how to wrap the field using the wpv-conditional statement, if there are 6 different terms that may be returned within the taxonomy field. It's a semantic question.

Is there a similar example that we can see?
I can show you what I want it to do via Adobe XD, but I don't have a site example.

What is the link to your site? hidden link - the site is in development, but the archive would be hidden link and an example of the content template would be hidden link

[Christian Cox]

Hello, the solution in the other ticket can be extended like so:

[wpv-conditional if="( has_term('one', 'category', null) eq '1' )"]
<div class="category-one">
[/wpv-conditional]
 
 
[wpv-conditional if="( has_term('two', 'category', null) eq '1' )"]
<div class="category-two">
[/wpv-conditional]
 
 
 
[wpv-conditional if="( has_term('three', 'category', null) eq '1' )"]
<div class="category-three">
[/wpv-conditional]

[wpv-conditional if="( has_term('four', 'category', null) eq '1' )"]
<div class="category-four">
[/wpv-conditional]
 
 
[wpv-conditional if="( has_term('five', 'category', null) eq '1' )"]
<div class="category-five">
[/wpv-conditional]
 
 
 
[wpv-conditional if="( has_term('six', 'category', null) eq '1' )"]
<div class="category-six">
[/wpv-conditional]

Is this what you're trying to accomplish? This approach only works if one term from the taxonomy will be assigned to each post.

[MorganM3180]

Yes, one term will be assigned to each post. Would you mind showing me a sample of how to wrap this around the field.

[Christian Cox]

I'm not sure I understand. The has_term function is used instead of a taxonomy shortcode if that's what you mean. If not, please show me which field you are referring to.

[MorganM3180]

I obviously am not understanding how to use this function. I've added "has_term" to the settings, do I then use the slugs in each conditional as in
[wpv-conditional if="( has_term('one', 'retail', null) eq '1' )"]
div class="retail">
[/wpv-conditional]

etc...

And, do I place this in the content template for the single post?

[Christian Cox]

The has_term function takes two slugs. The first slug is the term slug, and the second is the taxonomy slug. So if the taxonomy slug is "business-type" and the term slug is "retail", then you would use the conditional like this:

[wpv-conditional if="( has_term('retail', 'business-type', null) eq '1' )"]
<div class="retail">
[/wpv-conditional]

Then your retail content would go here, followed by a closing div.
</div>

And, do I place this in the content template for the single post?
Sure, you can place it in the template for single posts, or in an archive. Either is fine.

[MorganM3180]

This will work fine if I'm doing a single taxonomy archive, but what about if it's an archive with posts with all of the terms?

[Christian Cox]

This will work fine if I'm doing a single taxonomy archive, but what about if it's an archive with posts with all of the terms?
I'm not following. What is the problem, exactly? Here's an example:

[wpv-conditional if="( has_term('one', 'category', null) eq '1' )"]
<div class="category-one">
[/wpv-conditional]
  
  
[wpv-conditional if="( has_term('two', 'category', null) eq '1' )"]
<div class="category-two">
[/wpv-conditional]
  
  
  
[wpv-conditional if="( has_term('three', 'category', null) eq '1' )"]
<div class="category-three">
[/wpv-conditional]
 
[wpv-conditional if="( has_term('four', 'category', null) eq '1' )"]
<div class="category-four">
[/wpv-conditional]
  
  
[wpv-conditional if="( has_term('five', 'category', null) eq '1' )"]
<div class="category-five">
[/wpv-conditional]
  
  
  
[wpv-conditional if="( has_term('six', 'category', null) eq '1' )"]
<div class="category-six">
[/wpv-conditional]

[wpv-post-link]
[wpv-post-body view_template="None"]

</div>

This would wrap the post link (wpv-post-link) and post body (wpv-post-body) in a div containing a class for whatever term is assigned to the current post in the loop. It would work for any term, assuming as you said only one term is assigned to each post.

[MorganM3180]

Sorry I was being dense! Thanks so much for your patience. I got it. My issue is resolved now. Thank you!