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

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.

Instant access to 390+ Bricks code tutorials with BricksLabs Pro

Leave the first comment