Opens in a new tab
9th Aug '23
/
2 comments

Dynamic Post-specific Templates in Bricks using Meta Box/ACF Select Field

Update on 23 Aug 2023: Added steps for ACF.

Bricks builder v1.8.4 introduced an pretty useful filter called bricks/active_templates that flew under the radar.

This enables us to programmatically apply Bricks templates to pages.

Consider a common scenario where the site has a Service Custom Post Type. You want to provide your client (or yourself) the ability to select the template that should be used when a post of service type is viewed on the front end.

We, as site admins can now use the bricks/active_templates filter in conjunction with a custom fields plugin like ACF or Meta Box and add logic to load the corresponding Bricks template based on the chosen value.

This Pro tutorial provides a step-by-step walk-through on how to set this up.

Step 1

Install and activate Meta Box and Meta Box AIO.

Create your service CPT.

Resave permalinks.

Step 2

Create a field titled called say, "Service Fields" having a Select type of field like this:

List the allowable Choices one below the other.

Set the Location to be the service post type.

Step 3

Add/edit the Service CPT items and select the desired service template from the select menu dropdown.

Step 4

Go to Bricks → Templates.

Create a Template of "Single" type for each of the Services having the titles in this format:

Service Template - <choice>

Ex.:

  • Service Template - Plumbing
  • Service Template - Carpentry
  • Service Template - Electrical
  • Service Template - Renovations

Note: Copying and pasting the titles from above might result in hyphens appearing as fancy hyphens that are wider than normal hyphens. Just to be on the safe side, you might want to delete the pasted character and type a hyphen.

Edit the templates as needed.

Also create a default/fallback template titled "Service" (of "Single" type). In its template conditions, set this to be applied to all singular items of service post type. This will be used by all Service CPT entries by default and in the context of what we are setting up here, by those that do not have a template selected or when there is no matching template present.

Next, we need to ensure that when a specific value is selected from our Meta Box custom field, the corresponding Bricks template is applied.

Ex.: "Service 1" post has "Carpentry" selected and thus when it is viewed, it should be rendered using the "Service Template - Carpentry" Bricks template.

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

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get access to all 633 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Bricks Dynamic Data Tag for Text-type Custom Field Value with Word Limit

Bricks Dynamic Data Tag for Text-type Custom Field Value with Word Limit

How to register a new dynamic tag for setting excerpt word limits and outputting an ellipsis (...) at the end.
Categories:
Pro
Nested Meta Box Query Loop Inside a CPT Query Loop in Bricks

Nested Meta Box Query Loop Inside a CPT Query Loop in Bricks

This Pro tutorial provides the steps for setting up a cloneable Meta Box group query inside a CPT query in Bricks. Scenario: CPT: course Meta…
Categories:
Meta Box Category Colors in Single Posts

Meta Box Category Colors in Single Posts

Looking to use Meta Box Color Picker fields' values in a single post Bricks template based on the post category? This tutorial shows how. Note:…
Categories:
Tags:
Pro
Meta Box Date Field Value Custom Format in Bricks

Meta Box Date Field Value Custom Format in Bricks

Updated on 3 Apr 2024 Note: A custom function is no longer needed. Use the date format filter, as mentioned in the Bricks documentation. Ex.:…
Categories:
Tags:
Pro
Conditional Single CPT Templates based on Post Hierarchy in Bricks

Conditional Single CPT Templates based on Post Hierarchy in Bricks

In the past we covered Conditional Bricks Templates Based on Product Category Hierarchy Levels in Bricks. This Pro tutorial provides the steps to programmatically apply…