Color tags

[kevin]

Hey there,

I’d like to color article tags on my blog feed in different colors, like on https://coywolf.pro/ (screenshot: https://ibb.co/smtmVRq). Say, a tag like “SEO” would have a different font color (or font background) than a tag like “content marketing”.

Appreciate your help!
Kevin

[David]

Hi there,

it would require CSS that targets the category link based upon some unique string in the links href eg.

.cat-links a[href*='unique-string'] {
    color: red;
}

Simply write a rule for each category

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

[kevin]

Got it! And the unique string would be the tag URL?

Thanks, David.

[David]

Yeah for example

mysite.com/red-hats

you could use .cat-links a[href*='hats']

But more specifically wold be ‘red-hats’

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

[kevin]

Thanks, David!

Unfortunately, it didn’t work.

I added

.cat-links a[href*='technical-seo'] {
    color: #ef0175;
}

to

https://www.kevin-indig.com/internal-linking-the-full-guide-to-internal-link-axioms/

but the tag link below the headline is still white :).

[David]

aah – that code only works on cat-links that are output in the entry meta.
For those in the Hero you would do this:

.page-hero a[href*='technical-seo'] {
    color: #ef0175;
}

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

[kevin]

Thaaaaat is what I’m looking for. You’re the man, David.

I’m curious: if I wanted to display tags in my blog feed on the homepage (https://www.kevin-indig.com) with that some color coding, how would the code change?

Thanks again.

[David]

Thats using a block plugin does it support displaying categories and tags ?

We recommend using the WP Show Posts plugin – its not Block based but its far more powerful and provides terms etc. And thats something we can help style:

https://en-gb.wordpress.org/plugins/wp-show-posts/

NOTE: Having more than one Post list with paging navigation creates issues. You’ll notice your current lists – both of them change pages when changing page number. You should only have one list with paging at the most.

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

[kevin]

Thank you, David. Such a great help!

[David]

You’re welcome.
Let us know if you want help with WP Show Posts – its one of Tom’s plugins – super light and powerful 🙂

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

[kevin]

Thanks, David. I think it’s a good fit for my custom tag pages.

I tried it out on the homepage but what I actually need is to display posts by category with their tags under the title. Hope that makes sense :).

[Tom]

Right now WPSP displays the terms from the queried taxonomy, so that would be tough, unfortunately.

However, you can query by category and then manually add the tags like this: https://wpshowposts.com/support/topic/show-data-below-post-title/#post-18009

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts