How to Build a Dynamic ACF Repeater Table using Bricks Builder

If you’re working with custom post types and custom fields in BricksBuilder, you know how crucial it is to organize your data effectively. In this guide, we’ll walk you through adding a repeater field to a custom post in BricksBuilder and show you how to style the data with alternating row colors using CSS for that polished, professional look.

Why Repeater Fields?

A repeater field allows you to add multiple sets of data under the same field, much like rows in a table. For example, if you’re building a pricing table or listing work hours, a repeater field gives you the flexibility to add rows dynamically, making it a great choice for content that requires multiple entries.

Prerequisites

This guide assumes that you’ve already set up a custom post type, added custom fields, and built both the archive and single post templates in BricksBuilder. If these terms sound unfamiliar, you’ll want to check out my earlier video on the basics of custom post types before diving into this tutorial.

Step 1: Adding a Repeater Field with Advanced Custom Fields (ACF)

First, navigate to your existing custom fields group in ACF (Advanced Custom Fields). If you’re starting fresh, you’ll need to create a custom fields group first. In our case, we’re adding the repeater field to an existing group.

To add the repeater field:

1. Open your custom field group.
2. Click “Add Field.”
3. Select “Repeater” as the field type.
4. Name your repeater (e.g., Work Hours).
5. Inside the repeater, add two fields—one for the Days and another for the Hours.

Think of the repeater as the row of a table, and each field within it as the columns.

Once you’ve added the fields, save your changes and test them in the backend. When you return to your custom post, you’ll see an empty table where you can start adding rows (e.g., Monday to Friday work hours). You can also add placeholder text in the fields to guide users on the data format they should follow.

Step 2: Connecting the Repeater Field in BricksBuilder

Now, head back to BricksBuilder to connect the repeater field to your single post template. In this example, we’ll add the repeater table below the email and phone sections of our post.

1. Open the single post template in BricksBuilder.
2. Add a new block below your existing content.
3. Inside this block, add two rich text fields—one for Days and another for Hours.
4. Select the parent block and set the layout direction to “row” so that the data is displayed in neat rows.
5. Under “Query Loop,” select your repeater field (in this case, Work Fields) from the dropdown.

By now, the dynamic data from your custom post should be displaying correctly, showing the work hours you added earlier.

Step 3: Styling the Repeater Field with Alternating Row Colors

Now comes the fun part—styling! Using CSS, we’ll alternate the row colors for a professional and visually appealing look.

To do this:

1. Select the parent block containing your repeater data.
2. Apply the CSS pseudo-class nth-of-type(even) to the parent block. This tells BricksBuilder to apply a specific style to every other row.
3. Choose a background color for the even rows (you can use your theme’s primary color or any other color that matches your design).
4. Make sure to set the text color to contrast with the background (e.g., white text on a green background).

Once you’ve saved your changes, your alternating row colors should appear perfectly across your repeater field.

Step 4: Adding Headers and Final Touches

Finally, let’s add headers to our table. This step ensures the days and hours columns are clearly labeled, making the data easier to read.

1. Add a new block above the repeater field.
2. Inside this block, add two headings—one for Days and another for Hours.
3. Align them using the “space-between” option so they match the layout of your rows.
4. Set the heading size to H4 and style the headers as needed.

To wrap things up, ensure the data is left-aligned for the Days column and right-aligned for the Hours column for a cleaner, more organized look.

Conclusion

There you have it! You’ve successfully added a repeater field to a custom post in BricksBuilder and styled it with alternating row colors. This advanced configuration not only improves the functionality of your website but also makes it more user-friendly for clients who need to update their content without diving into BricksBuilder itself.

If you found this tutorial helpful, don’t forget to like and subscribe to my channel for more BricksBuilder tips and WordPress tutorials. Your support helps me create more content like this. See you in the next one!