[Resolved] Setting a specific style for the current archive term in a WP archive view

[Author]

Posts

[Tcoffee]

Tell us what you are trying to do? add a specific style to the active parent taxonomy item in the sidebar menu in taxonomy archive page of parent & child taxonomy for the custom taxonomy: "Product- categories".

Is there any documentation that you are following? https://toolset.com/forums/topic/setting-a-specific-style-for-the-active-taxonomy-item/ (I have tried this but no luck).

Is there a similar example that we can see? hidden link

What is the link to your site? hidden link

[Jamal]

Hello and thank you for contacting the Toolset support.

You can use a condition on the sidebar view inside the loop against the current product category archive page and add a class to the

. You can then style it with custom CSS.
Check this code:

<wpv-loop>
  <li class="[wpv-conditional if="( '[wpv-taxonomy-archive info='slug']' eq '[wpv-taxonomy-slug]' )"]current[/wpv-conditional]">
    [wpv-taxonomy-link]
  </li>
</wpv-loop>

Read more about the shortcodes here https://toolset.com/documentation/user-guides/views/views-shortcodes/

Taking for example hidden link :
- [wpv-taxonomy-archive info='slug'] will return the slug of the term of the current archive: 'commercial'.
- [wpv-taxonomy-slug] will return the slug of the term inside the loop.
Once both are equal, we will add "current" to the class attribute of the

tag.

Then we can add a custom CSS style to the view to style the current category term:

li.current {
    font-weight: bold;
    background: yellow;
}

I hope this helps. Let me know your feedback.

[Tcoffee]

Hi,

I Have tested with the code you have provided but for some reason, it is not working. The class "current" is only getting applied to category item "commercial" on every page. Here is the HTML markup of the same: hidden link.

Can you please look into this Nand pls let me know if any additional info required.

[Jamal]

Can I take a closer look at your views to investigate why?
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.

The sidebar view was cached, that's why the "class" current was only applied to the first category, cached from the first visit. Check this screenshot hidden link

I deactivate the cache for the view in both WordPress archives, and the class "current" is now correctly assigned to the current archive page term. Check this screenshot hidden link

I hope this helps. Let me know your feedback.

[Tcoffee]

HI,

Thanks, it seems to be working only on parent taxonomy page and not in child taxonomy page. Please help me with the following:

1. How to disable caching in views
2. How to make it work in a child taxonomy page (for eg: hidden link), Currently the conditional output not returning any value for the class. ref this screenshot: hidden link

[Jamal]

1. To disable caching on a view, add cached="off" to the view shortcode:

[wpv-view name="product-category-parent-sidebar" cached="off"]

2. This is expected. The actual condition checks the terms of the sidebar view item against the current term(of the archive page) . If you want it to work for child terms, the condition should be updated. Conditions can be composed and nested. (condition1 or condition2), (condition3 and (condition4 or condition5)), etc.

Currently, we have:

[wpv-conditional if="( '[wpv-taxonomy-archive info='slug']' eq '[wpv-taxonomy-slug]' )"]current[/wpv-conditional]

We'll need a way to check if the current term has a parent on the top level, and add the class "current" to its parent.
Unfortunately, there is no direct way in Toolset to get the slug of the parent term. Even if it exists, it will not work for another level of children. Luckily, Toolset allows to use custom shortcodes or functions inside conditions:
- https://toolset.com/documentation/user-guides/views/conditional-html-output-in-views/using-custom-functions-in-conditions/
- https://toolset.com/documentation/user-guides/views/conditional-html-output-in-views/using-shortcodes-in-conditions/

This way, you can build, your own custom function or shortcode, that will use WordPress function get_term_parents_list to get all the parent terms and check inside the sidebar loop if the current item is a parent. You may use PHP functions explode and in_array.
- https://developer.wordpress.org/reference/functions/get_term_parents_list/
- hidden link
- hidden link

Check this ticket, it may give you some inspiration https://toolset.com/forums/topic/create-a-view-of-only-parent-child-and-sibling-terms-on-a-taxonomy-archive/

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