Custom Post Types in Breakdance Builder

What can you do if posts and pages are not enough post types for your WordPress website? Maybe you still need dates, press releases or something similar? This can be remedied by so-called Custom Post Types (CPT) create. This allows you to create as many post types as you like, which you can then use on your breakdance page.

There are several ways to create custom post types (CPT). You could write the CPT via a PHP script in your functions.php or use a plugin that offers this function. Good plugins for this would be e.g. Custom Post Type UI or Advanced Custom Fields (ACF). Both offer a clear interface for creating your own post types.

In this example, we use the ACF plugin, as we also use it to create user-defined fields use. We will create a CPT together and set up a template for it. As an example, we will create the post type Car to.

Custom Post Types Settings

1. create custom post types (CPT)

Go to the "Advanced Custom Fields (ACF) Plugin" > "Content types" and click on "Add new".

2. set up custom post type

Fill in the following fields:

• Plural Label: The plural name (plural) of the user-defined post type ("cars").
• Singular Label: The singular name (singular) of the user-defined post type (e.g. "Auto").
• Post Type Key: The unique key of the user-defined post type (e.g. "auto").
• Public: Select "Yes" if the post type should be public.
• Hierarchical: Select "Yes" if the post type should be hierarchical (like posts and pages).

3. advanced settings

Under "Supports" you can select the supported functions for this post type (e.g. title, author, excerpt, etc.). You can leave the other settings as they are, this works perfectly. Of course, you can go through the settings and change them according to your wishes. For example, under "URLs" also activate the archive if you want to use an archive for your custom post type, etc.

Once you have made all the settings, click on "Save changes".

4. custom post type view

That's it! You now have your new custom post type called "Cars" created. You can find the new menu entry in the WordPress side menu.

5. create user-defined fields (ACF)

We will now create some custom fields for the auto post type. To do this, we go to "Field groups" under "ACF" and click on "Add new".

We call the field group "Car Info". Below you can see the Example fields that I can see for the custom post type "Cars" have added. These serve only as examples. It is very important to find the right "Content type" for which the fields are to be displayed, in our case we select "Car".

6. create demo data

Now that we are familiar with the settings for the custom post type "Cars" are ready, we can add some Demo cars create. Go to "Cars" > "Add new car" and fill in the fields as required.

7. demo data view

Our data is now displayed in the new CPT. We have added 3 demo cars so that we can build the template for our new post type.

Custom Post Type Design

8th Demo - Create card design

Now that everything is ready, we can create our design. Here we use a Post Loop Builder Element available in the Breakdance Builder. With this element we will have all our cars on a page called Cars which we will link in the menu of our website.

First, we create a global block that we will need for the Post Loop Builder element. Go to "Breakdance" > "Global Blocks" and click on "Add Global Block". I have him "Cars - Card" called. Then click on "Edit in Breakdance"to open the Breakdance Builder Editor.

9. demo - set card

Here you can see the structure of my design and the elements used. In the left column I have placed the Featured image (Features Image), in the right column the Title and all our user-defined fieldsthat we have created for the car post type.

I added all the data dynamically, so anything we add in our custom fields will automatically appear in every autopost. You can find out how to work with Advanced Custom Fields in our Tutorial read more. This design is applied to all car entries.

10. create demo page

After you have created a page called "Cars" created, go to the Breakdance Builder to edit the page and add the "Post Loop Builder" element. Simply click on "Add" on the left-hand side, type "post loop" into the search field and then select the "Post Loop Builder"-element.

11. select global block

In the "Repeated Block" select the previously created global block "Cars - Card" from. With "Query" choose "Custom" off. It is very important here that you "Post Type“ > "Cars" select. I have selected "Posts per page" 3, you can enter your desired value here.

12. demo page preview

That's it already. In the preview you can see what our cars look like on the Cars page with all the data we have created.

Conclusion

In this tutorial, we created a custom post type "Cars" using the Advanced Custom Fields (ACF) plugin. After configuring the required fields, we created a responsive layout using the Breakdance Builder to display cars on a dedicated page. Using the Post Loop Builder element in the Breakdance Builder makes it possible to automatically display all cars on the "Cars" page.

Creating a custom post type with Breakdance Builder was an intuitive process that allowed us to get to our goal quickly and easily. With the user-friendly drag-and-drop interface, we were able to easily add, edit and customize various elements to achieve the desired layout and functionality. The ability to create and use global blocks facilitated design consistency and saved time as we didn't have to recreate elements repeatedly. Overall, Breakdance Builder provided us with an efficient tool to easily and professionally design our custom post types.