Building Complex Repeaters with ACF and Custom Code

Advanced Custom Fields (ACF) is a WordPress powerhouse for creating dynamic, customizable sites. But when it comes to managing complex repeaters with nested fields, things can get a little tricky. In this guide, we’ll walk through how to leverage ACF and custom code to build and display intricate repeaters seamlessly

What Are Repeaters in ACF?

The ACF Repeater Field allows you to create rows of data that you can repeat as needed. Each row can contain subfields such as text, images, or even other repeaters. This makes it ideal for:

• Multi-level FAQs
• Team member directories
• Portfolio projects with multiple attributes

Setting Up Your Repeater Field

1. Install and Activate ACF Pro:
   Repeaters are a Pro feature, so make sure you’re using the correct version.
2. Create a New Field Group:
   • Go to ACF → Field Groups.
   • Add a Repeater field.
   • Configure subfields such as title, description, or even nested repeaters.
3. Assign the Field Group:
   Attach your field group to the desired post, page, or custom post type.

Customizing with PHP

To display your repeater data on the front end, you’ll need some custom PHP code. Let’s say we’re working with a Portfolio repeater that has a nested Project Details repeater.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<!--php if (have_rows('portfolio')):      while (have_rows('portfolio')): the_row();          $portfolio_title = get_sub_field('title');          $portfolio_description = get_sub_field('description');            echo '<h2-->' . esc_html($portfolio_title) . '';          echo '<p>' . esc_html($portfolio_description) . '</p>';            if (have_rows('project_details')):              echo '<ul>';              while (have_rows('project_details')): the_row();                  $project_name = get_sub_field('project_name');                  $project_status = get_sub_field('status');                    echo '<li>' . esc_html($project_name) . ' - ' . esc_html($project_status) . '</li>';              endwhile;              echo '</ul>';          endif;      endwhile;  endif;  ?>

Styling Your Repeaters

Use CSS to create a clean, visually appealing structure. For example:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

.portfolio-title {   font-size: 24px;   font-weight: bold;   margin-top: 20px; }   .project-details ul {   list-style-type: disc;   padding-left: 20px; }   .project-details li {   margin-bottom: 5px; }

Tips for Optimization

• Use Caching: For large datasets, implement caching to reduce database queries.
• Lazy Loading: If your repeater includes images, load them lazily for better performance.
• Conditional Logic: Only load repeaters when necessary to improve speed.

Conclusion

By combining ACF’s repeater fields with custom PHP and styling, you can build powerful, dynamic content structures. Whether you're crafting nested FAQs or detailed portfolios, the possibilities are endless with a little creativity and coding know-how.

Have you worked with complex repeaters before? Share your tips in the comments below!