Posts Grouped by ACF or Meta Box Select Field Value as Tabs in Bricks

Updated on 9 Mar 2023: Added Meta Box specific instructions.

This Pro tutorial provides the steps to show labels of an Advanced Custom Fields' Select-type of field as the tab titles and a list of all posts that have the corresponding meta value as the tab content when using Bricks' Tabs (Nestable) element.

Whilst it is possible to manually set the tab titles and multiple query loops in each tab content, the benefit of this method is that it is dynamic and needs no maintenance. The site admin or client can at any time simply change the choices of the select field, the order of the choices and the tabs will automatically reflect these changes.

In this example we are going to be dealing with a task custom post type that has a task_status custom field.

We shall

• add a new "Task Status" type control to query loop options - in the dropdown.
• create a function that should run when the above query type is selected in which we
  • get the ID of the latest task post
  • get all the task statuses for any post of the task post type
  • create and return an array having key and label named keys
• create another function for returning the label or the key for the current task status being looped through for use with Bricks dynamic data tags.
• apply our custom query to Tab menu > Div and call the second function that returns the choices' labels for the tab titles.
• apply our custom query to Content > Pane and inside that, a Block with a Posts query to pull all the entries of the task CPT where task_status meta equals the choice key.

Step 1

Create your custom field group having a Select type of field with choices having value : label pairs and attach it to your post type.

Make sure that Return Format is set to Both (Array).

Step 2

Create/edit your post/CPT items and populate the custom field for each.

Step 3

Add the following in child theme's functions.php (w/o the opening PHP tag) or a code snippets plugin: