Term Specific Colors in Bricks

This Pro tutorial provides the steps to add a class or a data-<taxonomy> attribute to terms of the current post for the given taxonomy so they can be styled differently for different terms in Bricks.

Sample use case: On the Blog page set a specific background color for all “Nature” category archive labels/links and a different background color for “Flowers” category archive labels/links in the posts grid.

We will cover both static and dynamic cases wherein category-specific colors can either be set in CSS (static) or pulled from a Color-type of custom field for the categories (dynamic).

Sample HTML markups:

Static classes:

Static data-attributes:

Dynamic data-attributes:

Usage

To display the linked terms with our custom HTML markup, we can use this dynamic tag as one of the Fields of the Posts element or in a Query Loop:

Categories: {echo:bl_get_linked_terms}

This outputs the categories for the current post in the loop separated by a comma.

The function is going to be set to take 2 parameters: taxonomy (category is the default) and separator (, is the default).

In this example, let’s use this instead so there is no separator:

{echo:bl_get_linked_terms(category,'')}

Step 1

Let’s define a custom function that takes in the taxonomy and separator as its arguments and returns the term names linking to their archives with the taxonomy slugs as the value of the class attribute.

Add the following in child theme’s functions.php or a code snippets plugin:

<?php 

// Function to return linked terms for a given taxonomy for the current post with term slugs as classes/data-attributes for the term links
function bl_get_linked_terms( $taxonomy = 'category', $sep = ', ' ) {
	// get the plural taxonomy name
	$taxonomy_name = get_taxonomy( $taxonomy )->labels->name;

	// convert the taxonomy name to lowercase
	$taxonomy_name = strtolower( $taxonomy_name );

	// get the current post's terms for the taxonomy
	$terms = get_the_terms( get_the_ID(), $taxonomy );

	if ( ! empty( $terms ) && ! is_wp_error( $terms ) ) {
		$links = [];

		foreach ( $terms as $term ) {
			// classes
			$links[] = '<a href="' . get_term_link( $term->slug, $taxonomy ) . '" class="' . $term->slug . '">' . $term->name . '</a>';
		}

		return '<div class="data-' . $taxonomy_name . '">' . join( $sep, $links ) . '</div>';
	}
}

Step 2

Now that each category has the corresponding slug as a class on the frontend, you could write custom CSS to style them as needed.

To switch from classes to the static data-attributes method:

Replace

// classes
$links[] = '<a href="' . get_term_link( $term->slug, $taxonomy ) . '" class="' . $term->slug . '">' . $term->name . '</a>';

with

// data attributes
$links[] = '<a href="' . get_term_link( $term->slug, $taxonomy ) . '" data-' . $taxonomy . '="' . $term->slug . '">' . $term->name . '</a>';

Add this CSS either in your template or in Bricks settings or in child theme’s style.css:

.data-categories {
  display: flex;
  gap: 0.6em;
  flex-wrap: wrap;
}

[data-category] {
  padding: 0.3em 1.2em;
  border-radius: 16px;
  background-color: #475569;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1.1rem;
  font-weight: 600;
}

[data-category]:hover {
  filter: saturate(1.5);
}

[data-category="mountains"] {
  background-color: #854d0e;
}

[data-category="nature"] {
  background-color: #164e63;
}

[data-category="flowers"] {
  background-color: #a21caf;
}

Replace the category slugs and the background-color values as needed.

Note: If you are using the dynamic data tag in a field of Posts element, you’d need to set the links’ color in Typography control.

Next, see the Usage section near the top of this tutorial.

Step 3

If you are ok with manually setting the background colors of your categories/terms as detailed above, you need not follow this step.

Let’s set up a custom field to associate a color with each category. This can be done using a plugin like ACF or Meta Box that has a Color Picker type of field.

Edit your categories and set color for each.

Replace

// data attributes
$links[] = '<a href="' . get_term_link( $term->slug, $taxonomy ) . '" data-' . $taxonomy . '="' . $term->slug . '">' . $term->name . '</a>';

with

// dynamic data attributes
$category_color = get_term_meta( $term->term_id, 'category_color', true );
$category_color_html = $category_color ? ' style="background-color: ' . $category_color . '"' : '';

$links[] = '<a' . $category_color_html . ' href="' . get_term_link( $term->slug, $taxonomy ) . '" data-' . $taxonomy . '="' . $term->slug . '">' . $term->name . '</a>';

Now that we are setting the background colors of the category links to be dynamic, they can be removed/commented out from CSS.

References

https://wordpress.stackexchange.com/a/313117/14380

https://developer.wordpress.org/reference/functions/get_the_terms/

https://developer.wordpress.org/reference/functions/get_term_meta/