Create unique websites with Advanced Custom Fields (ACF) and Breakdance

When creating a new website project, you often reach the limits of WordPress' standard options. It would be very useful to be able to integrate user-defined fields to save the information required for a post. The plugin Advanced Custom Fields (ACF) offers everything your heart desires. With this plugin you can create different types of fields such as texts, images, URLs or even complex repeating fields.

You can integrate your custom fields anywhere in your Breakdance template. Breakdance offers a unique way of dealing with custom fields. In this tutorial, I will show you step by step how to use Advanced Custom Fields (ACF) in the Breakdance Builder and how to make the necessary settings.

Advanced Custom Fields (ACF) settings

1. install the Advanced Custom Fields (ACF) plugin

To install the Advanced Custom Fields (ACF) plugin, click on "Plugins" > "Add new plugin" and search for "ACF". The plugin appears in the results, which you can install and activate.

2. add field group

Field groups are collections of content fields which can be assigned to a post type or a page, for example. These fields are subsequently displayed in the edit mode of the post. To create a new field group, navigate to "Advanced Custom Fields" > "Field groups" and click on "Add new".

3. set up field group

Give your new field a title under "Field group title". Among the "Settings" for the "Rules for this position" choose "Content type" in our example "Contribution".

In our example, we create event information for blog posts. Each blog post should contain information about the event at the end of the content.

4. add fields

Now you can go to "Fields" add your desired custom fields. Click on "Add field" and select the "Field type" in our case text. Under "Field labeling" you write the name as a title that you want to use as a label in the backend, in our case it is Event Title. The "Field name" is created automatically, if you want to rename it, you can do that too, we leave it as it was generated, "event_title„.

5. save field group

We have the following fields in our field group Event Info added:

• Event Title as text;
• Event Location as text;
• Event Contact as a WYSIWYG editor (WordPress text area);
• Event picture as a picture;

Once you have added all the required fields, simply click on "Save changes".

Create template with ACFs

6. add information to the post

Once you have set up the fields in the Advanced Custom Fields (ACF) plugin, you can now add the information to your newly created custom fields. Under "Event Info" I have the following information in the "Demo Post 1" Contribution added:

7. create new template

Now you go breakdancing "Templates"in order to "Single Post"-template, because we want to edit our custom fields created with Advanced Custom Fields (ACF) in the "Single Post"-template at the bottom of the content of each post.

8. inserting elements into breakdance

I created a DIV element for this and added my user-defined fields in two columns. In one column I added the Event Titlethe Event Location and the Event Contact placed. In the other column I have placed the Event picture added.

Next, we need to select the dynamic data from the Advanced Custom Fields (ACF) for each element. To do this, simply click on the element, for example on the "Event title"then go to the left area of Breakdance via the "Text" and click on the database icon that appears. This will open a pop-up with dynamic data.

9. select dynamic data

From the open popup with the dynamic data, select under "ACF" to select the field you need. In our case it is the "Event title". Do the same for the remaining user-defined fields and then save the template.

10. result preview

Congratulations! Your data is now dynamically pulled from the custom fields you just created with Advanced Custom Fields (ACF). The Design looks exactly as we have specified. Of course, you can design it however you like.

Display content depending on conditions

11. activate conditions

There is a very practical function in the Breakdance Builder that allows you to display elements only under certain conditions that you define. We use this option directly: Let's say you have posts in which you don't want the custom field element we created to be displayed.

In other words, it should only appear if content has been added to these user-defined fields, otherwise it should not be displayed. This is exactly what we will do now.

First, go to your DIV element, as this is our element that contains the custom fields, and on the left side in the breakdance, select the "Settings icon" > "Conditions" > "Edit Conditions".

12. add new condition

A pop-up will now open in which you can click on the "Add Condition" click.

13. select Dynamic Data

Now select "Dynamic Data" .

14. select Advanced Custom Fields (ACF)

Under Advanced Custom Fields (ACF) select "Event Contact" as dynamic data.

14. select value

In the drop-down menu, select the option "is not empty" .

This means that the DIV element is only displayed if "Event contact" is not empty. So if we have entered something in this field, the element will be visible. However, if we have not entered anything in this field, the element will not be displayed.

15. apply all conditions

As we have several user-defined fields, we need to repeat the setting for all other fields. This way we can ensure that the element is only displayed if at least one of the fields is filled with information.

When you have finished setting the conditions, simply click on "Apply Conditions".

15. result preview

Done! We have the "Demo Post 6"-post as an example and left the custom fields empty to show how it looks with our conditions. Our DIV element with the event information does not appear. Well done!

Conclusion

The combination of Advanced Custom Fields (ACF) and Breakdance offers web designers a powerful tool to create customized websites. With custom fields, content can be flexibly adapted and tailored to the needs of users.

By integrating ACF, we can not only optimize the design, but also improve the user experience by presenting relevant information in a targeted way and making it easier to interact with the website. Overall, using ACF in Breakdance allows us to design websites that are both aesthetically pleasing and functional.