How To Use ACF Repeater Fields With Breakdance

What is the tutorial about?

This is a hands-on guide on how to use Advanced Custom Fields/ACF Repeater Fields with Breakdance, the web design platform. The focus is on creating a dynamic ‘rooms’ field for property listings on a WordPress website. This field allows you to add an unlimited number of rooms to each listing, each with its unique name and image. The tutorial also covers designing a visually appealing front-end template for this repeater field using Breakdance.

Tutorial Steps

1. Set Up Your Environment:
   Ensure you have a WordPress website with Advanced Custom Fields and Breakdance installed. You should also have a basic understanding of ACF and how to create field groups and custom post types.
2. Create a ‘Rooms’ Repeater Field:
   Navigate to Advanced Custom Fields > Field Groups > Listings Field Group. Add a new field, choose ‘Repeater’ as the field type, and name it ‘rooms’. Inside this repeater field, create two subfields: ‘name’ (text field) and ‘image’ (image field).
3. Add Rooms to a Listing:
   Go to your property listings and select a listing. In the ‘rooms’ field, add a row for each room you want to include. For each room, provide a name and select an image.
4. Create a Global Block in Breakdance:
   Go to Breakdance > Global Blocks and create a new block named ‘rooms repeater part’. In this block, design a two-column layout with the room’s name in the left column and the room’s image in the right column. Make sure to set the text and image dynamically from the ‘rooms’ repeater field.
5. Display the Repeater Field on the Front End:
   Go back to your listing template in Breakdance. Add a new section with a heading named ‘rooms’. Below the heading, add a ‘repeater field’ element. Choose ‘rooms repeater part’ as the global block and ‘rooms’ as the repeater field. Save your changes.
6. Review Your Work:
   Visit the front end of your website to see the ‘rooms’ repeater field in action. Each room you added to the listing should be displayed in a list with its name and image.

Use Cases for this Tutorial

• Real Estate Websites:
  This tutorial is particularly useful for real estate websites where property listings need to display a variable number of rooms.
• E-commerce Websites:
  For e-commerce websites, this tutorial can help display a variable number of product features or specifications.
• Event Websites:
  For event websites, this tutorial can be used to display a variable number of event details or schedules.