[Support request] Assign custom color to (entry meta) category links bg & add avatar to byline

[Goran Dragutinovic]

Hello, I am looking to assign custom colors to my entry meta category links, so:

– Category 1: Blue
– Category 2: Yellow
– Category 3: Red
– etc.

I am also looking to add a custom avatar image before the author byline.

All help is appreciated.

[Elvin]

Hi,

Can you link us to the page you’re working on?

You can provide the site details on the private information textfield. Thank you.

[Goran Dragutinovic]

Sure things, here it is.

[Elvin]

Hello, I am looking to assign custom colors to my entry meta category links, so:

For this, you can do CSS styling using its element’s attribute.

Example: for “Shows” category.

span.cat-links a[href*="/shows"] {
    background-color: blue;
}

Simply add more of this for each category you want to style.

More examples:

Example: for “Movies” category.

span.cat-links a[href*="/movies"] {
    background-color: green;
}

I am also looking to add a custom avatar image before the author byline.

You can check this brief documentation on how to add avatar image before the author byline.
https://docs.generatepress.com/article/entry-meta-style/#example-1

[Goran Dragutinovic]

Ugh can’t believe I didn’t think of that! Thanks Elvin, that did it.

Do you have the link on how to remove the commas between the category links by chance?

I saw it somewhere on here but I can’t find it now.

[Elvin]

You’ll have to use the generate_term_separator for that.

Example:

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

But this will apply for the tag links as well. If you want to change it for the category links only, you’ll have to changes its output with generate_category_list_output filter.

[Elvin]

You’ll have to use the generate_term_separator for that.

Example:

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

But this will apply for the tag links as well. If you want to change it for the category links only, you’ll have to changes its output with generate_category_list_output filter.

[Goran Dragutinovic]

Thanks Elvin, yeah so the:

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

does the trick for the tag links, but not for removing the comma between category links on the homepage.

This:

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

did not seem to work in removing the comma from the homepage either.

I’ll await your reply, as of right now I just changed the functions.php line where the comma is being inserted and left it as a space instead.

Thanks for your help.

[Elvin]

does the trick for the tag links, but not for removing the comma between category links on the homepage.

Strange, that’s suppose to work for both.

Try this for the category separator:

add_filter( 'generate_category_list_output', function() {
    return sprintf(
		'<span class="cat-links">%3$s<span class="screen-reader-text">%1$s </span>%2$s</span> ',
		esc_html_x( 'Categories', 'Used before category names.', 'generatepress' ),
		get_the_category_list( ' ' ),
		apply_filters( 'generate_inside_post_meta_item_output', '', 'categories' )
	);
} );

get_the_category_list( ' ' ) means its using space as a separator. get_the_category_list( '|' ) means its using | as a separator. Feel free to adjust it to your preferred separator or just keep it as is if you only want spaces.

[Author]

Posts