Using ACPT with Bricks for Creating Custom Posts
This tutorial shows you how to create a real estate website using Bricks builder and ACPT entirely from scratch.
Set up Bricks
From Bricks menu, go to Settings, then to the Builder tab.

Turn on Dynamic Data
Scroll down and turn on all the settings you find under ‘Dynamic Data’.

ACPT: Register new post type
Go to ACPT – Custom Post Types.
Click the button ‘Register new Post Type’ on top right.

Fill up the Custom Post Type Form
Create the new post type by filling in the fields.
In this example, I have chosen to create a custom post type ‘Property’.

Save the Custom Post Type
Save the custom post type. The defaults setting are okay for most cases.

Bricks: Associate the custom post type
Once you have created the new custom post type, you will see it appearing in the WordPress dashboard menu on the left.
When you see the menu for the new post type ‘Property’ is there,
Go to Bricks settings.
Go to the ‘General’ tab, and turn the toggle on and register the new custom post type ‘Property’.

Bricks: Turn on Gutenberg Data options
Also at this time turn on both options related to ‘Gutenberg data’. This will increase flexibility in your workflow.
Always save changes.

Create a Metabox in custom post type ‘Property’
Go to ACPT – Custom Post Types
Click ‘Create’ under the Meta boxes column of the custom post type ‘Property’.
We will be creating only one meta box for the purpose of this example.
The process is the same for any number of meta boxes for a custom post type.

Add Meta Box
The Property Metaboxes page will open up.
On the upper right click ‘Add Meta Box’.

Name the Meta Box
First, click the box name label and add the name you want in the meta box to identify it.
In this case, I will use ‘basic_info’, and ‘Save’ from the upper right of the page.

Create custom fields in the meta box
Now that we have created and added the name of our meta box, we start adding custom fields so we can easily submit information.

Add Custom Fields
Add all custom fields you want for the ‘basic_info’ meta box.
Save, and go and create our first custom post.

Create your first custom post
Go to the menu bar and from the menu for the custom post type ‘Property’ go to the sub menu ‘Add Property’ and click.
The new custom post backend (editor) will open up with all your custom fields.

Add the title of the custom post
First, add the title.
We can add the title and other blocks normally in the post as earlier we had turned on the ‘Gutenberg data’ related options in the ‘General’ tab of Bricks settings.
Here, I add the title Skyline View Condo.

Fill in the custom fields and click Edit with Bricks
Fill in all the required data for this property listing in the custom fields under the ‘basic_info’ meta box.
Now, publish the post, then click Edit with Bricks, and try to view the post from the front-end or in the Bricks editor.

Uh, oh! Can’t see my post!
It is very common to find that the first time you try to view a new custom post, all you get is a message ‘invalid post type’.
This is something we have been tackling with all kinds of custom post plugins since custom posts began to be used in WordPress.
Don’t panic.

Go to WordPress Settings – Permalinks

Select ‘Plain’ as your permalink structure
Select Plain as permalink structure and then Save.

Now, select the permalink structure you want
Select the permalink structure that you have or want to use.
Then Save.
Here we selected ‘Post Name.’

Update your custom post
Now go back to your newly added custom post, update, and view from front-end.

Now, click Edit with Bricks
Click Edit with Bricks to view it in the Bricks editor.
Your custom post will be there.

Displaying the custom post matter in Bricks – The Title
First, we add a section.

Drag Post Title pin to top Section
Drag the Post Title pin from the left pane into the Section.

Title appears
Your post title appears, but currently it is left aligned.

Center align the Post Title
Now, the post title can be seen left-aligned.
Center it by clicking on the post title and going to Style on the left pane, Flex.

Displaying the custom post matter in Bricks – Add a new section
Now, add a Section from the Layout Tab on the left-hand pane by dragging it to the right-hand pane, or directly on the the editing area.
It is easier to drag and position elements from the left-hand pane to the right-hand pane for proper positioning, rather than trying to place directly in the editor area.

Displaying the custom post matter in Bricks – Adding an image field
Add a Container to the new Section.
Drag the Image pin from the left-hand pane into the Container.

Click on the blank image icon
Now you’ll see a blank image icon in the Container saying ‘No image selected.’
Click on the icon of blank image.
The ‘Image’ pane will open up on your left.

Add the custom field to pull image data
At this point you can select the image either directly from the media library through ‘Select Image’.
Or, you can pull the image through two other options, through ‘dynamic data’ using the lightning icon, or from an external url using the option for that.
Here, I had already created a custom image field when creating the meta box, and added the property image when filling in the data on the custom post.
So, I click the lightning icon for dynamic data.
Then select the property image field.

Image displayed and aligned
The image now appears in the editor area, but left aligned.
I center it from the Style tab.
Now, I have the Title and the Image of the property in the editor area.

Displaying the custom post matter in Bricks – Adding text above the image
I want to add a short description of the property above the image and after the title.
So, I drag a Rich Text pin from the left-hand pane into the top container above the image and place the Rich Text under the post title in the same container.

Adding dynamic data through Rich Text
You can put in almost all custom field data through the Rich Text (RT) pin, except for images and videos.
Once the RT pin is placed in position, click it and on the left-hand pane you’d see it open up.

Click the lightning icon to find and select custom field
Remove the placeholder text under the Content – Add media – Visual tab.
Click the ‘lightning’ dynamic content icon.

Select your custom field for the text you want
Scroll down to ACPT and select the field you want.
In this case I had created the ‘short description’ field in the ‘basic_info’ meta box, and I select that.

Align field and check Bricks render
I align the field to the center, press the ‘b’ icon on the left top corner and check how it’s rendering.

Displaying the custom post matter in Bricks – Displaying more custom field data
In Bricks, adding custom field text data from ACPT custom post is almost the same in every case.
You first add a new Section.

Add a container and a block
You add a container or a block in a Section.

Create columns inside the block
Select the block on your right-hand pane, then select the column layout you want.
I chose the 4-column layout here.

Drag RT pins where you want to place them
It is easy to place them under corresponding columns in the right-hand pane.

Place RT pins in all columns
Now that I have filled in RT pins in all the columns, I’ll pull the custom field data in respective areas.

Check display on the frontend
On the frontend now you’ll see placeholder text in all the columns where custom field data will come in.

Add the custom field data in the columns
First remove the placeholder text.

Select the custom field
Select the appropriate field to display from the ‘lightning’ dynamic data icon of the RT in the left pane. Save.
Style everything with Bricks. Save and publish.
Repeat until you have text in every column.

Do the same for all RT pins
Place custom fields in each column with the same process.

And here’s the frontend of the Custom Post in Bricks
All information I put in the Meta box is correctly rendering on the frontend.
