Working with Custom Post Types in Breakdance Builder

Ever felt stuck with the limitations of standard content structure in WordPress?

Perhaps, you’re trying to build a real estate website or an online store. And you want to add product listings, reviews, or testimonials. But building specialized content cannot be done with the standard post types.

Thankfully, Breakdance has powerful features that allow you to create custom post types. You don’t even need to have coding knowledge. All the tools you’ll need are provided to help you tailor your content to match your site’s unique needs.

This guide is exactly what you’ll need to create custom post types using Breakdance Builder. Follow the steps below. By the end, you should learn how to create and integrate them into your website.

What Are Custom Post Types?

Custom post types allow you to add functionalities to your site without using the default ‘‘posts’ or ‘pages.’ I find this WordPress feature very helpful in organizing and presenting content that is tailored to a particular business.

For example, if you’re building an online store, adding custom post types like ‘Products’ or ‘Testimonials’ will help you separate each content type. Think of them as unique content containers. They help simplify your backend management and make your frontend presentation distinct.

Custom post types can be created through custom codes or plugins. But if you’re a beginner with minimal coding experience, I highly recommend using plugins. This is exactly what we’re going to do in this tutorial.

Here's an older video we made describing them:

How to Create Custom Post Types in Breakdance

In this guide, let’s try to build a custom post type for a real-estate website. Here are the steps you can follow.

Install CPT UI and Advanced Custom Fields

Go to Plugins > Add New. Install and activate CPTUI and Advanced Custom Fields, as shown.

Add a Post Type

Once the plugins are activated, go ahead and add a post type. Navigate to CPT UI on the left side of your dashboard. Enter post type slug, plural label, singular label. Then, click ‘Add Post type.’

Add Custom Field Groups

For custom fields, navigate to ACF > Add New. Provide field group title, field type, field label, and field name. Click ‘Close Field.’ 

To add another field group, hit ‘+ Add Field.’ Adjust the order by dragging. 

In settings, set a rule: Post type equals House. Finish by clicking ‘Save Changes.’ 

Create a Sample Post Type

Navigate to Houses > Add New. Provide a title. Choose edit in Breakdance. Input a title and required details. Finish with ‘Publish.’

Integrate Custom Post Types Within Breakdance

Create a New Custom Template in Breakdance

Head over to Breakdance > Templates. Click ‘Add Template’ and choose ‘Add Custom Template.’

Enter the template title and set the location to Single/ Houses. Click ‘Add Template.’

Style The Breakdance Template

Time to style the template. Click edit in Breakdance. 

Let’s start with a new section. Then, add an image, a header, and some text. These elements will be used for the house photo, address, pricing, and all the other info we entered on our custom post type. 

Make Your Photos and Texts Dynamic

For the photo, click the ‘dynamic’ icon. Under the ACF field, click the photo which you added to your custom type field. 

In this example, we named it ‘House-photo.’ 

For the heading, go ahead and click the ‘dynamic’ icon. 

Here, I choose the address because I want it to be displayed as the heading. Then, do the same for the other texts.

Edit the Layout

Modify the size and spacing of your elements. You can also change the background colors as desired.

Optional: How to Use Custom Post Types on a List

Add a Global Block

Navigate to Breakdance > Global Blocks. 

Click ‘Add Global Block’ and enter a block title.

Add Your Global Block in any Breakdance Page

Here, you can create a custom layout or just copy the Breakdance template you’ve previously created. Save the changes.

Then, create a new page where you want to display your list. Add a title and edit in Breakdance.

Add a Post Loop Builder

Let's add a ‘Post Loop Builder’ in our page. From the ‘Global Block’ dropdown menu, choose the global block you’ve just created. In this guide, our global block is ‘Individual-House.’

Edit Query to Your Custom Post Type

On the side menu, go to Query > Custom > Edit Query. Set your ‘Source’ to ‘Post Types’ and ‘Include’ to the name of your custom post type. 

In this example, we picked ‘House.’Edit the other fields as desired. Then, finish with ‘Apply Query.’

Style Your Post Listing

Tweak the layout or add background colors. For instance, to show 3 houses per row, use the Style tab. Pick ‘grid’ from the Layout menu. For Items Per Row, type 3. Save when satisfied. 

Here’s the final view of our House Listing page:

Wrapping It Up

Great job - you’ve just created your first custom post type using Breakdance!

Your next step is to learn how to refine your site to be super dynamic and adaptable.

For instance, you can enhance your headers or footer to make navigation simpler for visitors. Or, create Breakdance forms and integrate them with third-party apps like Slack.

The more dynamic and responsive you make your site, the more value it's worth. Whether you're trying to become a professional Breakdance Builder designer or have your own business that you're trying to take to the next level, dynamic WordPress is extremely powerful.