Color Custom Field as Section Background Color on Category/Term Archives in Bricks

Updated on 15 Sep 2024

Looking to apply a color picker type of custom field’s value for categories/custom taxonomy terms as the background color of a hero section on the category/term archive pages in Bricks?

A term archive page for which a blue color is set:

Another term archive page for which no color is set (shows the default):

This tutorial shows how.

Step 1

Using a plugin like ACF or Meta Box, create a field group whose location is set to your category or custom taxonomy.

Add a field of Color Picker type.

Notice that we have set a default value of #333.

Step 2

Edit your categories or taxonomy terms and assign a color for each.

Step 3

Create a template of “archive” type for your category/term archive pages and edit it with Bricks.

Apply a template condition to ensure that it applies to the correct category/term archive pages.

Add a Section and inside its Container, a h1 Heading having:

{term_name}

Select the Section → STYLE → ATTRIBUTES.

Add a style attribute having this value:

background-color:{acf_service_category_color}

Replace acf_service_category_color with the dynamic tag of your custom field.

Update 1

If you use JetEngine the process is similar.

For the style attribute value type background-color: then position the cursor at the end and pick your custom field name.

Ex.:

background-color:{je_service-category_service_category_color}

where service-category is the taxonomy slug and service_category_color is the name/ID of the Colorpicker JetEngine field.