[Resolved] Change category and tags links display

[Ricardo]

Hi,

Could you please give me any hint on how to change the way categories and tags links are displayed?

I don’t know the exact terms, so I will give you a picture of what I would like to have:

https://www.poetryfoundation.org/poems/browse#page=1&sort_by=recently_added&filter_poetry_children=1

So basically I would like to remove commas and create a background color to each of the category and tag.

Thanks in advance,
Ricardo

[Leo]

Hi there,

Try this snippet to remove the comma first:

add_filter( 'generate_term_separator', function() {
    return '';
} );

Adding PHP: https://docs.generatepress.com/article/adding-php/

Then link me to the page in question and I’ll provide some CSS.

Let me know 🙂

[Ricardo]

Hi,

Thanks a lot, it’s very nice from your side to give this level of support.

This tags and categories appear in all search result, in all blog post and in all categories and tags page

Cateory page:
https://anexim.pt/category/proverbios-da-regiao-de-valpacos/

Post:
https://anexim.pt/mulher-sem-vergonha-pior-que-peconha/

King regards,
Ricardo

[Leo]

Are you using any custom functions or plugin to display the categories?

The <ul class="post-categories"> isn’t the default structure.

[Ricardo]

Hi,

I’m not sure what is the `<ul class=”post-categories”>, but I’ sure that the only thing that is affecting it is the snippet that you’ve indicated me to use:

add_filter( ‘generate_term_separator’, function() {
return ”;
} );

I’ll disable it, so that you can see if it is about it.

Thanks,
Ricardo

[Tom]

Hi there,

Any chance you can re-add it so I can take a look?

Let me know 🙂

[Ricardo]

Hi,

Sure. It’s done.

Thanks

[Leo]

Looks like we need a space in the return value.

Try this instead:

add_filter( 'generate_term_separator', function() {
    return ' ';
} );

[Ricardo]

Nice!

Now it looks better.

[Leo]

Now we just have to do something like this:

.entry-meta a {
    padding: 3px 5px;
    background-color: #444444;
}

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

[Ricardo]

Beautiful 🙂

Is there anyway to make it different for categories and for tags. I mean, is it possible to distinguish between the two of them so that I can give different colors?

Thanks!

[Leo]

Try this:

.entry-meta .cat-links a {
    padding: 3px 5px;
    background-color: #2a2;
}
.entry-meta .tags-links a {
    padding: 3px 5px;
    background-color: #000;
}

[Ricardo]

That is great Leo!

Thank you so much for your support on this topic.

If you and Tom need anything about guitar, Fado or music I’ll be glad to help you.

Best regards,
Ricardo

[Leo]

Glad we could help 🙂

[Author]

Posts