18th Mar '23
/
3 comments

ACF Repeater Sub Field Values as Tabs in Bricks

Bricks’ query loop supports ACF Repeaters and Meta Box Groups out of the box besides posts, users and terms.

This tutorial shows how we can output the values of sub fields of a ACF Repeater as tab titles and content in Bricks without writing a single line of code, thanks to its nestable Tabs element.

ACF Field Group:

Repeater being populated for a specific Page:

Tabs on the front end:

Create a Tabs (Nestable) element inside a Section’s Container.

Delete the second Div under the “Tab menu” element.

Delete the second Pane under the “Content” element.

Select the Div under the Tab menu and enable query loop.

Click the query icon and set the query type to your ACF Repeater.

Change the text of the Basic Text element inside to your Title sub field using the dynamic data (bolt) button.

It should look like this:

{acf_features_title}

Select the Pane under the Content and enable query loop.

Click the query icon and set the query type to your ACF Repeater.

Change the text of the Rich Text element inside to your Title sub field.

It should look like this:

{acf_features_blurb}

JSON export of the Section.

Get access to all 630 Bricks code tutorials with BricksLabs Pro

3 comments

  • Rhett Butler

    Looking through this article and similar ones for nested subfields and terms contained inside of a Repeater or Flexible Layout field, how would you pull individual Term IDs from a nested ACF taxonomy field?

    Example: •ACF Flexible field “flexible_layouts” ••ACF Layout “dynamic_section” •••ACF Taxonomy field “terms”

    Layout need: Use flexible layout with term cards contained inside based on the selected terms for that layout section.

    Bricks default behavior is to output a taxonomy field as the term name, or the term url vs. the ACF flexible taxonomy field being stored as an array of IDs.

  • Nicolas Heinen

    I've been able to do it with Bricks Condition: https://nickarce.com/products/bricks-condition-check-repeater/

  • Nicolas Heinen

    Would it be easily possible to only display the one tab where by exemple the {acf_features_title} equal to the_post_title() of the page ?

    So if the Title of my page is "Feature 1", it would only display the second tab.

    Thanks,

    Nicolas.

Leave a Reply to Nicolas Heinen (Cancel Reply)

 

Related Tutorials..

Pro
Custom Dynamic Data Tags for ACF Field Label, Prefix and Suffix in Bricks

Custom Dynamic Data Tags for ACF Field Label, Prefix and Suffix in Bricks

Bricks lacks built-in dynamic tags for ACF field labels, prefixes, and suffixes. This tutorial shows how to add them using custom dynamic tags.
Categories:
Modifying ACF Field Value Before It Is Output

Modifying ACF Field Value Before It Is Output

Consider the scenario where a Page has a "Page Fields" field group created with ACF Pro like this: Field name: scientific_coordinators (type Repeater)|__ Sub field…
Categories:
How to create parallax effects using Rellax.js in Bricks

How to create parallax effects using Rellax.js in Bricks

This tutorial provides the JS & PHP codes that can be pasted in order to create smooth parallax effects using the Rellax.js library inside Bricks…
Categories:
Pro
Programmatically populating ACF field values in WordPress

Programmatically populating ACF field values in WordPress

An example of how to set the values of a Select-type field with the names and labels of all public post types.
Categories:
Pro
How to Update Custom Fields with Default Values For Existing Posts when using ACF

How to Update Custom Fields with Default Values For Existing Posts when using ACF

Let's take a scenario where there are 10 Pages in a WordPress site. You proceed to create a Text-type of custom field called, say, "Custom…
Categories:
Tags:
Pro
Random images from ACF Options Gallery in Bricks

Random images from ACF Options Gallery in Bricks

This Pro tutorial provides the steps to output images from an ACF Gallery-type custom field in a Bricks query loop randomly with each image appearing…
Categories: