Gold Penguin Logo with Text

Working with Custom Post Types in Breakdance Builder

Ever wondered how to make your Breakdance website more organized and tailored? Read this guide to learn how to create custom post types and make your site more user-friendly!
Updated August 14, 2023

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.

real estate listing using custom post types in WordPress

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.

install ACF plugin
install CPTUI

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 a 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.’ 

add custom field groups

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

custom field group reordering

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

add field group rules

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.’

add sample post type

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.’

add Breakdance template

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

add template title

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. 

add template style

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. 

make photos dynamic

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

set photos dynamic in BD

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

breakdance dynamic heading

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.

edit Breakdance page layout

Optional: How to Use Custom Post Types on a List

Add a Global Block

Navigate to Breakdance > Global Blocks. 

Breakdance global block

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

Breakdance global 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 Breakdance global block

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.’

add post loop buiilder

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.’

edit custom post type 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. 

style post listing

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

custom post type listing

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.

Want To Learn Even More?
If you enjoyed this article, subscribe to our free monthly newsletter
where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.
Written by Christy Cañete
Christy Cañete is a software engineer who's passionate about front-end web design. Not only can she code, but she writes too! She loves breaking down technical topics into super easy tutorials. If you're looking to learn without the jargon, she's your go-to.
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
Join Our Newsletter!
If you enjoyed this article, subscribe to our newsletter where we share tips & tricks on how to make use of some incredible AI tools that you can use to grow and optimize a business
magnifiercross