• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Different Color For Each Category Link In Genesis Post Meta

This solution enables you to style each category link in the post meta with a different color using CSS.

Here’s a very simple example:

entry-categories

You can also use this code to style ordered and unordered list items differently.

Here’s the code:

Register for full access

Related Tutorials

  • Different Full Width Entry Header Background For Posts In Each Category

Entry Meta

Reader Interactions

Comments

  1. j d says

    February 26, 2019 at 12:32 am

    Great tutorial, any idea how I can style category widget with the same code? Tackle the sidebar widget to show the same colors.

    Thank you.

    Log in to Reply
    • Brad Dalton says

      February 26, 2019 at 4:39 am

      You can do that using pure CSS. No need for PHP.

      Log in to Reply
  2. Tatiana says

    October 21, 2016 at 10:41 am

    1. Yes.

    2. I realize that this is probably a simple CSS ‘Google and find it yourself’ question, but would you please provide an example so that I know where to start?

    Log in to Reply
    • Brad Dalton says

      October 21, 2016 at 11:29 am

      1. Try the post_terms shortcode.
      2. The code which generates the links for post_terms doesn’t generate a unique class for each link so you would need to filter or rewrite the code for the post_terms shortcode with a modification to do so. I suggest using the $term->slug for each class.

      Several hours to do this in my opinion because of the limitations with the get_the_term_list function. Also see genesis > lib > shortcodes > post.php line 553.

      Another option is to use the term_links filter

      Log in to Reply
  3. Tatiana says

    October 19, 2016 at 10:14 pm

    Would this be possible to modify to show custom taxonomy instead (i.e. genres, titles, etc)? Also, I vaguely remember reading somewhere being able to use css to reference specific categories by name instead of using :nth-child . Am I delirious from *finally* finding a solution to this should-be-simple issue, or is that possible as well?

    I’m interested in modifying this for use on a fiction site and styling the different genres and child categories by color (i.e. main category ‘fantasy’ as teal, as well as the specific titles underneath it. Category ‘romance’ in red, etc.) It would be easier to target the specific categories by name, rather than the first link being red, second orange, etc.

    Thanks!

    Log in to Reply
    • Brad Dalton says

      October 21, 2016 at 6:41 am

      1. You mean replace tags with links to taxonomy archives?

      2. Yes

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.