[Support request] How to make a unique class on a page

[Jusung]

Refering this.
https://generatepress.com/forums/topic/current-color-of-a-button/

I am trying to make current color on a button.
So, I gave class to each color and changed the color based on a unique body class.

So, if you see first and second link, you can see the current color on a button.

However, Some pages don’t have a unique class.
You can log in with the account I provided, and go to 계정(my account)
There you can see 4 buttons that don’t have current color.

It has different link, but have the same body class.
So, I can’t set the current color on a button.

In this case, how can I find the unique class that can be used for button..?
Am I supposed to give unique class to a certain url by adding php code..?
Or is there other way to make this work.?

I think this is out of scope,
but could you just give me an idea?
So, I will try to make this on my own.

[Ying]

However, Some pages don’t have a unique class.
You can log in with the account I provided, and go to 계정(my account)

Do you mean you don’t find the unique class for the account page?
If so, try this: .woocommerce-account

[Jusung]

I mean on the account page, there are different options such as order, address, profile and so on.

I also have added extra menu on my account page, which doesn’t have any unique body class.

/my-account/menu1
/my-account/menu2
like this, each link should have a unque body class, but on my end, I can’t find any unique body class.

[Fernando]

Hi Jusung,

Can you share the login link as well?

Please use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Jusung]

Yes. Here is the login link,

On this link, you can login with the account I provide.
And you can go to 계정 on the menu.

There you can see 4 buttons I made.
excepts for 주문, the other 3 buttrons don’t have any unique body class.

[Ying]

Do you want these buttons that are on the same page to have different dynamic colours while they share the same body class?

If so, it’s not possible. I would recommend using static color in this case.

[Jusung]

I mean, those 4 buttons have different URL.
So, based on the URL, I want to set different color.
To make this, I need a unique body class.

If you see 스토어 or 블로그, you can see different color of buttons based on the page.
It is because The page of those buttons has a unique body class.

So, on my guessing, I have to give a unique body class to a certain link.
So, I can make it.

<script>
if(window.location.href.match('aeollure.com/my-account/msreview/')){
    jQuery('body').addClass('msreview1');
  }else if(window.location.href.match('aeollure.com/my-account/address-book/')) {
    $('body').addClass('address-book');
	}else if(window.location.href.match('aeollure.com/my-account/msm-profile/')) {
    $('body').addClass('msm-profile1');
}
</script>

I am trying this, but not workign.

[Fernando]

You can try using PHP instead.

generate_hook_element_display filter could help.

Add your CSS through a Hook Element. Then, add a snippet like this:

add_filter( 'generate_hook_element_display', function( $display, $element_id ) {
$url = 'http://' . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
    if ( 100 === $element_id && strpos($url,'my-account/msreview/') !== false ) {
        $display = true;
    }

    return $display;
}, 10, 2 );

Replace 100 with your Element ID:

Getting the Element ID: https://share.getcloudapp.com/YEuDdrnQ

Just make new instances of the Hook Element and the code for every page.

[Author]

Posts