Category (Taxonomy Term) Colors

Total theme includes the ability to assign colors to your categories, tags and custom taxonomy terms. Assigning colors to your terms is used on certain default card styles and can be useful for creating unique dynamic templates and custom cards.

Enable The Functionality

By default this functionality is enabled but it’s a good idea to check first and make sure it’s enabled in the Theme Panel.

Total theme panel enable category colors

Assign Your Colors

To assign your colors simply edit a category and select your color via the theme settings metabox.

Total theme assign color to term taxonomy

Showing Colors on the Front-end

There are various ways of making use of the category/term colors and they will primarily be used when creating dynamic templates or custom cards. To display the term color simply click on the global icon in the theme’s color picker and select the Term Color option.

Total theme color picker global icon
Total theme term color global setting

How does the Term Color Global Setting Work?

When you choose this setting 2 things will happen:

  • When viewing a category/term archive it will display the color associated with that term.
  • When viewing a post it will display the color associated with that post’s primary color.
Displaying term colors in posts

When you select the “Term Color” option and you are currently viewing a post and not the term itself (or term card) the theme will display the color associated with the “primary term” for the post being shown. The primary term is either the first term assigned to the post (returned by the WordPress get_terms() function) or the primary term as defined via the Yoast SEO plugin.

Utility Classes

You can also use the theme’s utility classes to apply colors and background to elements:

  • has-term-{CATEGORY_ID}-background-color
  • has-term-{CATEGORY_ID}-color

Set The Background of a Row to the Primary Term Color

Using the utility classes above you can do some cool things such as set the background of a row to the primary post term color by using dynamic variables.

Total theme term color utility classes

Enable the Category Colors for Custom Taxonomies?

By default the Category colors functionality is only for standard categories, but you can enable it for custom taxonomies.

If you are using the Post Types Unlimited plugin you will find the option built-in so you don’t need to use any custom code.

If you need to enable the functionality for taxonomies not added with the Post Types Unlimited plugin, have a look at this snippet.

  • Last updated on
Back To Top