Apply Active class to URL when the Current page is that URL

This thread is resolved. Here is a description of the problem and solution.

Problem:

use conditional logic to output class="active" to the li tag of the following:
https://toolset.com/forums/topic/apply-active-class-to-url-when-the-current-page-is-that-url/#post-775669

Solution:

You will need to compare with the static URL and custom field value, for example, the static URL in your codes:

See the solution here:
https://toolset.com/forums/topic/apply-active-class-to-url-when-the-current-page-is-that-url/#post-776200

Relevant Documentation:

https://toolset.com/documentation/user-guides/conditional-html-output-in-views/checking-types-fields-and-custom-fields/

This support ticket is created 6 years, 8 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-
-	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

Tagged: Content Templates, Views plugin

This topic contains 2 replies, has 2 voices.

Last updated by Kate 6 years, 8 months ago.

Assisted by: Luo Yang.

Author

Posts

May 1, 2018 at 6:39 am #775669

Kate

Tell us what you are trying to do?

I'd like to use conditional logic to output class="active" to the li tag of the following:

<ul id="breadcrumb">
 	<li><a href="<em><u>hidden link</u></em>">Welcome</a></li>
 	<li><a href="<em><u>hidden link</u></em>">Intro 1</a></li>
 	<li><a href="{!{types field='part-1b' output='raw'}!}{!{/types}!}">Compare 1</a></li>
 	<li><a href="{!{types field='part-2a' output='raw'}!}{!{/types}!}">Intro 2</a></li>
 	<li><a href="{!{types field='part-2b' output='raw'}!}{!{/types}!}">Compare 2</a></li>
 	<li><a href="{!{types field='part-3a' output='raw'}!}{!{/types}!}">Intro 3</a></li>
 	<li><a href="{!{types field='part-3b' output='raw'}!}{!{/types}!}">Compare 3</a></li>
 	<li><a href="{!{types field='confirm' output='raw'}!}{!{/types}!}">Confirm</a></li>
 	<li><a href="{!{types field='get-report' output='raw'}!}{!{/types}!}">Get Report</a></li>
</ul>

Is there any documentation that you are following?
I've tried the following, but the conditional code disappears when I save.
https://toolset.com/forums/topic/views-if-current-page-if-current-post/

Please see this in action here:
So, on this page: hidden link

The following should happen:
<li class="active">hidden link">Welcome

Can you help me with the correct conditional shortcode?

Thanks!

May 1, 2018 at 8:54 am #776200

Luo Yang

Hello,

The thread you mentioned above is different from your case, in your case, you will need to compare with the static URL and custom field value, for example, the static URL in your codes:

 <li><a href="<em><u>hidden link</u></em>">Welcome</a></li>

You can change it to:

<li [wpv-conditional if=" '[wpv-post-url id="$current_page"]' = '<em><u>hidden link</u></em>'"]class="active"[/wpv-conditional]><a href="<em><u>hidden link</u></em>">Welcome</a></li>

The custom field value:

<li><a href="{!{types field='part-1b' output='raw'}!}{!{/types}!}">Compare 1</a></li>

You can change it to:

<li [wpv-conditional if=" '[wpv-post-url id="$current_page"]' = $(wpcf-part-1b)"]class="active"[/wpv-conditional]><a href="{!{types field='part-1b' output='raw'}!}{!{/types}!}">Compare 1</a></li>

More help:
https://toolset.com/documentation/user-guides/conditional-html-output-in-views/checking-types-fields-and-custom-fields/

May 1, 2018 at 12:33 pm #777699

Kate

Wow, that's perfect, thank you so much!!!