Tutorial Requirement
- ACPT Plugin
- Bricks Extra ( Dynamic Table Element )
Activating Dynamic Table Element
Ensure that the BricksExtra Dynamic element is activated. If it’s not, and you want to enable the Dynamic Table element in BricksExtras, navigate to Bricks > BricksExtras > Elements > Dynamic Table.
Creating Custom Post Type
In this tutorial, we will create a custom post type called ‘eBooks,’ where we will store information about our eBooks. Then, we will populate this data in the dynamic table. If you’re not familiar with creating a custom post type, be sure to read ‘How to Create a Custom Field Using ACPT’.
Creating Custom Fields
We need to create custom fields that store our data, such as the book summary, published year, and number of pages. Therefore, we have created these custom fields, and Our metabox is named ‘ebooks-metabox.’
Adding content to our eBooks custom post
We’ve added three books to our eBook custom post type.
We add content to our custom fields as needed to ensure each book has the necessary information and data for the dynamic table display.
Displaying the data on the frontend
Now that we have populated each field of our books, we need to display this data on the frontend in a table using the BricksExtra dynamic table. You can either create a page or use it within a template, depending on your use case. However, I am using a page.
To add an element, navigate to the top bar and click on the ‘+’ sign, then scroll down until you find the dynamic table.
We need to enable this feature for the dynamic row to populate correctly.
After enabling the feature to populate the rows using a query, the next step is to specify which post type you want to query. In this instance, we will be querying our eBook Custom Post Type, so make sure to select the right option.
then, it’s time to add your column and cell data. For the column heading, you can use a static value, but feel free to use a dynamic value if that suits your needs better.
The cell data will display the information for that column. Since we’ve used the WordPress native featured image of our custom post to upload the book cover, we can use the following dynamic data {feature_image} in the cell data to fetch the featured image.
We should also insert a column for the book title in our table. As we’ve used the post title as the book name, we will use {post_title} in the cell data to retrieve the book title.
In this step, we will add another column that displays the year each book was published. To do this, we will query the custom field we created earlier, which stores the publication year for each book. This field is represented as {acpt_ebooks_ebooks-metabox_year-published}
The final column is to display the page numbers of the book, which are stored in another custom field we created to record the book’s page numbers. We will use {acpt_ebooks_ebooks-metabox_pages} for this purpose. and save it then preview the page.
If you’ve correctly linked the columns to the respective cell data, the outcome will be as follows. You will see each column displaying its corresponding values accurately. This means that each column will be populated with the data we’ve specified, ensuring that all information is organized and easily accessible.