[Resolved] Customize Category Links in Blog Posts

[trung]

Hi GeneratePress. I need support 3 things about customize Categories in Blog Posts:

1. Move Category Link above title. I used the code in this topic but it didn’t work: https://generatepress.com/forums/topic/blog-category-above-title/#post-316793. Please support my case.

2. Use different colors for different Categories. Example: I want Category A is blue, Category B is green, Category C is yellow. How can I do?

3. Uppercase the Category names. I still want the Category name in Main navigation is in normal style(Example: Toolbox), but the Category Link in Blog Posts is in uppercase style (Example: TOOLBOX). How can I do?

Thank you.

[trung]

This is an example of Category Links in Blog Posts and Single Post which I need your support

[Tom]

Hi there,

1. Is this code active on your site right now? It looks like it should work.

2. Posts are given a class based on their category. For example, if you have a category named “Food”, you can do this:

.category-food .cat-links a {
    color: red;
}

3. This should do it:

.cat-links {
    text-transform: uppercase;
}

[trung]

Hi Tom.

1. I reuse the code and it works on Blog Posts page, but it doesn’t work on Single Post. Can you support me the code to move Category Links above title in Single Post.

2 and 3. It works well.

Thank you, Tom.

[Tom]

Try this as your function:

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

add_action( 'generate_before_entry_title', function() {
    $categories_list = get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'generatepress' ) );

    if ( $categories_list ) {
        printf( '<span class="entry-meta cat-links"><span class="screen-reader-text">%1$s </span>%2$s</span>',
            _x( 'Categories', 'Used before category names.', 'generatepress' ),
            $categories_list
        );
    }
} );

Let me know 🙂

[trung]

Hi Tom.

Your latter code works well.
But it appears one thing: when I use Customize to uncheck Display post date and Display post author, stil keep checking Display post categories => the Category Links in Blog Posts and Single Post are disappear.
Please support me about this.

Thank you, Tom.

[Tom]

The above code will override the categories option in the Customizer. Are you saying that unchecking it removes the categories we’ve added with the function above?

[trung]

Yes. I give you 2 pictures of my website when your code is running. Your code works similarly on my Blog Posts page and Single Page.
– Picture 1 shows the Blog Posts page which I have unchecked Display post date and keep checking Display post categories
– Picture 2 shows the Single Post page which I keep checking Display post date and Display post categories

Please support me how to do if I only want to display post categories, not post date.

Thank you, Tom.

[Tom]

Try adding this CSS:

.entry-header .entry-meta.cat-links {
    display: block;
}

[trung]

Your CSS works well.
Thank you, Tom.

[Tom]

You’re welcome 🙂

[Author]

Posts