Using ACPT with Bricks for Creating Custom Posts

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.