May 29, 2023

How To Use ACF Repeater Fields With Breakdance

Play Video

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.

Required Resources

Credit to Breakdance
The Breakdance YouTube channel serves as a practical resource for users of their WordPress website builder. It features in-depth tutorials, where they demonstrate the process of creating a website from the ground up. The channel emphasizes hands-on learning, making it an essential tool for both beginners and experienced users aiming to maximize the capabilities of the Breakdance platform.
How To Use ACF Repeater Fields With Breakdance
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.