[Resolved] Formatting CPT taxonomies

[Author]

Posts

[hansB]

Hi there

For our CPT we have also created a list of corresponding taxonomies. These are the "topics" for our sessions and videos.

Now, I'd like to have these taxonomies show up not just as normal text (which I can easily do of course) but I'd like to format them to look like buttons. Later I would then make those buttons clickable and our members can easily see all sessions and videos on the taxonomy archive page, but for now they shouldn't be clickable but just look like buttons. Is there standard CSS code I can use? We are using Uncode Undsgn theme with a customized WP Bakery page builder, in case that's relevant.

Pls advise - thanks!
Hans

[Shane]

Hi Hans,

Thank you for getting in touch.

When you say standard css code in "but for now they shouldn't be clickable but just look like buttons. Is there standard CSS code I can use?"

Are you referring to designing the buttons ?

If so then no we do not have any standard css that can be used to do this.

Thanks,
Shane

[hansB]

Thanks Shane. Let me re-phrase. I want to style how these taxonomies show up in the frond end. Now, it's just plain text. Can I change colour, add highlight colour or even make them buttons?

[Shane]

Hi Hans,

Yes you actually can, send me a link to the page where you are displaying the taxonomies and I should be able to provide you with some example css.

Thanks,
Shane

[hansB]

Thanks Shane

Here's the link hidden link
Business Design, Business Models, Commercialization and Scaling Up, Incubation, Leadership are the taxonomies, now just listed as plain text. Curious to hear what we can do.

[Shane]

Hi Hans,

Thank you for the link.

Based on what I see we will need to add some custom class to the taxonomy output in order to be able to style it.

Would you mind allowing me to have admin access so that I can assist better ?

Thanks,
Shane

[Shane]

Hi Hans,

Have a look at the page now.
hidden link

It should look like a button. What I had to do was to use a classic view to display the taxonomy terms instead of using the [wpv-post-taxonomy] shortcode as it doesn't allow me to add classes to the taxonomy being listed.

Also here is the link below for the view.
hidden link

Please let me know if this helps.
Thanks,
Shane

[hansB]

Thanks a lot Shane- now I finally understand how views work with this page builder... Quite a hassle but you made it possible.

I think we'll want to change the layout a bit (will get back with specifics) but wondering- could these buttons be clickable, opening the taxonomy archive page in a new tab for example?

[Shane]

Hi Hans,

You can reformat the link to include the taxonomy archive's url like below.

<a href="[wpv-taxonomy-url]" class='span-button'>[wpv-taxonomy-title]</a>

This should now make your taxonomy links clickable.

Thanks,
Shane

[hansB]

wow, great thanks. How can we style the buttons?

Edit - now I actually can't see the interests showing up anymore?

[Shane]

Hi Hans,

If you check the css section of the "Loop item in List Interests" section of your view, you can customize the styling from there. You will notice that i've already added some basic styling to the section.

Secondly I checked on your post and the only post that has interests is this one below.
hidden link

None of your other posts have any interests selected so nothing will be displayed for those.
Thanks,
Shane