Logo
Logo

Overview

Breakdance Dynamic Data, Loop Builder, and Conditions Overview

In this tutorial, we’ll be learning about Breakdance’s powerful dynamic data features, including the Loop Builder and Conditions.

You’ll learn how to:

  • Create a website that draws its data from Advanced Custom Fields.
  • Create a Gallery based on dynamic data.
  • Fetch various other fields and data from Advanced Custom Fields in a post template.
  • Create a popup with a dynamically populated form.
  • Embed a dynamic Google map on a post.
  • And much more.

Step 1: Setup Post Type And Custom Fields

Before we get started on designing our dynamic site, you’ll need to make sure you have a post type with some dynamic data.

In this tutorial, we’ve created a Property post type using Advanced Custom Fields, and then applied several custom fields to that post type:

  • Price
  • Address
  • Bedrooms
  • Bathrooms
  • Square Feet
  • Description
  • Gallery (featuring multiple images)
  • Lot Size
  • Parking
  • Listed On

These fields will need to be populated with data so that their data can be fetched and rendered in your Breakdance template.

Breakdance integrates seamlessly with any custom post type (whether created with ACF or another plugin), as well as Advanced Custom Fields, Meta Box custom fields, and native WordPress custom fields.

Step 2: Creating The Single Post Template

To display your custom post type, you’ll need a post template that applies to all posts of that type.

  1. Go to Breakdance > Templates in the WordPress admin panel.
  2. Click “Add Template” and choose “Add Custom Template”, then click “Continue.”
  3. Name the template (in our example we use “Listing”).
  4. Choose a Location, such as “Single / Listings” if your Post Type name is Listings.
  5. Skip Conditions for now.
  6. Leave the Priority at 20.
  7. Click “Add Template.”

Now, you’ll see your newly created template in the Breakdance templates list. Hover over the name of the template and click “Edit in Breakdance” to jump into the builder and start customizing.

Step 3: Designing The Single Post Template

Now we want to create a two-column layout for our individual listings. The image and gallery will be on the left, and the listing information will be on the right side.

Adding A Dynamic Featured Image

  1. Click “Add” at the top left corner of the builder interface and search for “Columns.”
  2. Click or drag the Columns element to add it to your design. Once it’s added, click the two columns option.
  3. Back in the “Add” panel, search for Image and drag or click to add the Image element to the left column.
  4. Select the Image and, in the Properties panel on the left, hover over the Image control and click the database icon.
  5. In the Dynamic Data popup, pick “Featured Image.”
  6. Assuming you’ve set up a featured image on all of your posts, you’ll now see the appropriate featured image from your previewed post. (Hint: Check which post you’re previewing in the top bar of the builder interface, under the “Previewing” dropdown. Try swapping the post you’re previewing if you don’t see an image after this step!)

Adding A Dynamic Gallery

  1. Click “Add” again and search for “Gallery.”
  2. Click or drag to add a Gallery element to the left column, just below the image you added previously.
  3. Select the Gallery element and go to the “Images” control in the Properties Panel, click the database icon, and choose your gallery source. Assuming you’ve set up a gallery field using ACF, it will be under the “Advanced Custom Fields” category in the Dynamic Data popup.
  4. Now you should see a gallery of images from the gallery custom field setup on the post in step 1.

Next, it’s time to design the gallery:

  1. Select the Gallery and go to the Design tab in the Properties panel on the left-hand side of the builder interface.
  2. Expand the “Layout” section and choose “Masonry” as the Gallery’s type.
  3. Set the “Columns” control to 2.
  4. Set the “Gap” control to 10px.
  5. Click and drag above the Gallery or below the main image to add some top or bottom margin and space the elements apart. You can also adjust this under Design > Spacing for either element.

Step 4: Add The Dynamic Listing Data

Now we’re going to add the rest of our dynamic data in the right-hand column of our design.

Adding The Price

  1. Select the right-hand column.
  2. In the “Add” panel, search for “Heading” and click or drag to add it to the right column.
  3. In the “Text” control in the Properties Panel, click the dynamic data icon and choose your custom “Price” field.

Adding The Address

  1. Add another Heading element below the first one.
  2. In the “Text” control in the Properties Panel, click the dynamic data icon and choose your custom “Address” field.

Note: Make sure to adjust your Heading levels to make sure to maintain proper hierarchy in your document. This is important for readability, SEO, and accessibility! Pages should have one H1, and headings should not skip levels when nested .

Adding The Remaining Data As An Icon List

Next, we want to display the other property listing data such as bedrooms, bathrooms, and square footage. One easy and attractive way to do this is with the Icon List element.

  1. Click “Add” and search for “Icon List.” Click or drag to add it to the right-hand column underneath the address.
  2. Click the default first item in the Properties Panel and change the icon to a bed.
    1. Click the dynamic data icon next to the “Text” control. In the dynamic data chooser, pick the “Bedrooms” field you set up in step 1.
    2. Now you’ll see the name of the dynamic data field as a clickable “chip” in the “Text” control field’s place. Click the chip to access more controls, then click “Advanced” and add something like ” Bedrooms” to the “Append” field. This will output the dynamic data with the appended text after it.
  3. For the next item, choose a shower icon.
    1. Click the dynamic data icon next to the “Text” control. In the dynamic data chooser, pick the “Bedrooms” field you set up in step 1.
    2. Now you’ll see the name of the dynamic data field as a clickable “chip” in the “Text” control field’s place. Click the chip to access more controls, then click “Advanced” and add something like ” Bathrooms” to the “Append” field.
  4. For the last item, choose a rectangular icon.
    1. Click the dynamic data icon next to the “Text” control. In the dynamic data chooser, pick the “Square Feet” field you set up in step 1.
    2. Now you’ll see the name of the dynamic data field as a clickable “chip” in the “Text” control field’s place. Click the chip to access more controls, then click “Advanced” and add something like ” Square Feet” to the “Append” field.
  5. Go to the Design tab in the Properties panel for the Icon List, open the “Layout” section and choose “Horizontal” in the “Stack” control.
  6. Select the right column, go to the Design tab in the Properties panel, open the “Layout” section and add 20px in the “Gap” control.

Adding The Description

  1. Return to the “Add” panel and search for “Text.” Click or drag a Text element into the right column below the Icon Liste.
  2. In the “Text” control in the Properties Panel, click the dynamic data icon and choose the “Description” field you set up in step 1.

Step 5: Adding A Popup & Form To Your Listing Design

For the next step, you’ll need to create a Popup in Breakdance. In our example, we’ve created a Popup that contains a Form element. To do that, you can visit Breakdance > Popups in the WordPress admin panel and add a new Popup. Add whatever content you’d like to it and then return to your single post template to complete the design.

Note: If you’d like to learn more about creating popups, visit the Popups documentation.

  1. Open the “Add” panel and search for “Button.” Click or drag to add the button to the right-hand column underneath your post’s description.
  2. In the “Link” field in the Properties panel for the Button, click the gear icon to access the button action options.
  3. Under “Type”, choose “Action.”
  4. In the next Dropdown, choose “Popup.”
  5. In the “Popup” dropdown, choose the name of the popup that you created previously.
  6. In the “Action” dropdown, choose “Open.”
  7. In the Design tab in the Properties Panel, under the “Button” section, choose the “Custom” Style.
  8. Open the “Custom” settings and make the button “Large” under the “Size” options.
  9. While in the “Size” options, set it to full width at “Desktop” as well.

Step 6: Adding The Tabs Containing Additional Data, Google Map, And Contact Form To Your Listing Design

Next, we need the tabs element that will display some additional data, a Google Map, and a contact form.

  1. With the right-hand column selected, return to the Add panel and search for “Advanced Tabs.” Click or drag to add it to the column below the other elements you previously created.
  2. In the Properties panel for the Advanced Tabs element, rename the tabs appropriately. In our example, we need an Info tab, a Map tab, and a Contact tab. Remove any unnecessary tabs using the trash can icon next to the tab’s name.
  3. Click the Tab Content button in the Properties panel to add a new Tab Content container. This is where the content for your first tab will live.
  4. You can remove the default elements from the Tab Content element.

Adding The Additional Data Table

  1. In the first Tab Content element, add a Business Hours element from the Add panel.
  2. In the Properties panel for the Business Hours element, remove the default Days.
  3. Add a new Day and name it “Lot Size.”
  4. Click the Dynamic Data button for the Time field and choose the Lot Size field in the Dynamic Data chooser.
  5. Repeat this step for any additional data you want to display in a table.
  6. Under the Design tab in the Properties panel, open the Container section and set the Width to “100%”.

Adding The Google Map

  1. Add another Tab Content element to your Advanced Tabs element.
  2. In that Tab Content element, replace its content with a Google Map element from the Add panel.
  3. In the Properties panel for the Google Map element, click the Dynamic Data button for the Address field and choose the address field that you set up in step 1.
  4. Under the Design tab in the Properties panel, expand the Size section and set the width to “100%”.

Adding The Contact Form

  1. Add another Tab element to your Advanced Tabs element.
  2. Remove the default content and add a Form Builder element from the Add panel.
  3. To pre-fill the Message field dynamically, expand the Message field options and click Advanced. In the Value field, click the database icon and choose the Address field you set up in step 1.
  4. Click the Dynamic Data chip that is now in the Value field and open the Advanced options. Add a prepend such as “I am interested in the property at address “. This will prepend the property’s address with this text so that the message makes sense.

Now that all of your dynamic data for single listings has been set up, it’s time to design the post loop that will display all of your listings on a convenient grid.

Step 7: Creating The Post Loop

Creating custom post loops in Breakdance is incredibly easy. To begin with, you’ll need to create a Global Block with some dynamic data. This Global Block is then repeated within the loop, displayed for each post returned in the query with its respective dynamic data.

Creating A Global Block For Your Loop

  1. In The WordPress admin panel, go to Breakdance > Global Blocks and click Add Global Block.
  2. Give your Global Block a name and then edit it in Breakdance.
  3. Instead of re-doing all the work we did previously for the individual post template, we can simply copy & paste everything we need from that template into our Global Block. Note that no dynamic data will show up unless you preview a post that contains the dynamic data you set up in step 1, which you can do using the Previewing dropdown at the top of the builder interface.
  4. To speed things up, you can keep your individual post template open in another tab to copy & paste all of the dynamic data elements you need into your Global Block.
  5. Once the elements are added, adjust the design of your Global Block as desired.
  6. Save the Global Block and exit to WordPress.

Adding The Loop To A Page

  1. Create a page in WordPress where you’d like to display your custom post loop, then edit it in Breakdance.
  2. From the Add panel, add a Post Loop Builder element.
  3. In the Properties Panel for the Post Loop Builder, under the Repeated Block section, choose your newly created Global Block in the Global Block dropdown.
  4. In the Query section, choose “Custom” and click Edit Query.
  5. In the Query Builder, choose “Post Types” in the Source dropdown.
  6. Next, choose your new post type in the Include dropdown. Make sure no other posts are included!
  7. Click Apply Query.
  8. In the Design tab of the Properties panel for the Post Loop Builder, expand the List section and change the Layout to “Grid.” Next, set Items Per Row to “3.”
  9. Expand the Post section and give the individual items a white background and box shadow.

Bonus Tip: Conditional Dynamic Data

When using Dynamic Data, if there’s no data in the selected field, nothing will be shown. Sometimes this is OK, but sometimes that outcome is undesirable. In cases where you want a fallback, you can use conditional dynamic data in Breakdance to ensure a helpful value is shown at all times.

Using Fallbacks

  1. Once you’ve added some dynamic data, click its chip in the field where it was added, then access the Advanced options panel.
  2. For most field types, you’ll be able to designate a fallback value in the Fallback field that will be shown if no dynamic data is present.

Using Conditions

  1. Select the element that is displaying some dynamic data.
  2. Go to the Advanced tab in the Properties panel and expand the Conditions section.
  3. Click Edit Conditions.
  4. Click Add Condition.
  5. For the condition type, choose Dynamic Data. In the Dynamic Data chooser, choose the same field this element is displaying.
  6. In the operand dropdown, choose “is not empty.”
  7. Add a new element with a static value. This will act as the fallback in this case.
  8. Set up the same Condition for this element, targeting the custom field the previous element displays, but in the operand field choose “is empty.”

Now, the new element with a static value will be shown instead of the dynamically populated element if the chosen dynamic data is not present. Conditions remove elements entirely from the markup when a condition is not met, so this approach is very clean and allows more granular control over how your design gracefully handles missing dynamic data.

Conclusion

Breakdance’s built-in dynamic data and dynamically oriented elements make it very easy to build advanced layouts and functionality without writing any custom code at all. Using the concepts learned in this tutorial, you will be able to create a wide variety of dynamic websites where a custom post type with dynamic data needs to be displayed in a custom loop.