[Resolved] Button

[Sam]

Hi, I am trying to add buttons using your article: https://docs.generatepress.com/article/adding-buttons/

However, when I add the tag to the product category description (woocommerce) when I save the changes it strips out the class (leaving something like: Button), meaning I cannot style the button. do you have any ideas on how I can overcome this? If you look at our current theme (which we will be moving from) you can see the buttons above the description text. I do not want to add a header element as the buttons would be different for each category so want to be able to manage them for each category.

Many thanks
Sam

[Leo]

Hi there,

Not sure if I fully understand.

If the HTML is getting stripped, it’s likely that there are some syntax errors.

If you want to add specific style buttons, this should be the HTML:

<a class="button style-1" href="https://google.com">Button to Google</a>
<a class="button style-2" href="https://google.com">Button to Google</a>

Then you CSS would be this:

a.button.style-1 {
    color: #000;
    background-color: #fff;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know 🙂

[Sam]

Hi Leo, sorry if I made it sound confusing.

If I paste exactly the button code snippet into the description of a product category:

Button to Google

Then click “update” it strips out the class and the result is as below after the page reloads:

Button to Google

Does that make sense?

[Leo]

I tried the exact same code and it’s working.

Tough to tell without seeing the issue live but it could be a caching error.

PS please highlight your code and click the code button in the editor.

[Sam]

Ah sorry I missed that…

See below
<a class="button style-1" href="https://google.com">Button to Google</a>

becomes

<a href="https://google.com">Button to Google</a>

I have no caching activated.

[Leo]

Sorry I’m not sure why it isn’t working for you.

That is just plain HTML in WordPress editor and GP doesn’t have a way to make it not to work.

Can you make sure you are using the text editor?

Here is a little clip showing that it works:
https://www.screencast.com/t/4lgOzZC4z5

[Sam]

Yeah it’s really odd.

Yes I am, see here: https://www.dropbox.com/s/j74q0h1umssl4gp/buttons.mov?dl=0

[Leo]

Hmm that’s the category description field which doesn’t allow HTML as far as I understand.

Does the code work on a normal page text editor like I did?

[Sam]

Hi Leo, what is odd is on my live site, it has a Tiny MCE editor…

Now I am very confused. Would that editor have been added by the theme I am using on the live site?

https://www.dropbox.com/s/vz7d6t79z7ejd9r/Screenshot%202019-06-12%20at%2019.03.15.png?dl=0

[Leo]

Maybe you are using a plugin to allow it.

Google “category description wordpress html” and you should see multiple articles mentioned that it is not allowed by default.

I assume the same code works on a static page text editor?

[Sam]

You know it’s strange, I never remember having to do anything on our current set up, so maybe it is to with our theme or something. I guess I will find out when we migrate to GP. I did as you suggest and the code from the WC website worked:

/**
 * Allow HTML in term (category, tag) descriptions
 */
foreach ( array( 'pre_term_description' ) as $filter ) {
    remove_filter( $filter, 'wp_filter_kses' );
}
 
foreach ( array( 'term_description' ) as $filter ) {
    remove_filter( $filter, 'wp_kses_data' );
}

thanks for the help.

[Leo]

Awesome 🙂

[Author]

Posts