Skip to main content

Displaying the latest products - Meta Box + Bricks

We’ll create a section and choose the products or posts that are the latest ones to display only on the homepage.

I’ll take the restaurants as an example for products.

Example of displaying the latest products using Meta Box and Bricks

Video version


As you can see in my example, my products are restaurants which are posts of a custom post type. We’ll display the latest posts first and then the oldest ones based on the posts’ published date. The name and image of the restaurants are the post title and featured image of the post. The extra information such as address, logo, and voucher will be stored in separated custom fields.

These are the tools we need:

  • Meta Box: to have a framework for creating custom post types and custom fields.
  • MB Custom Post Types & Custom Taxonomies: to create a new custom post types named Restaurant;
  • Meta Box Builder: to create custom fields in the backend for saving restaurants’ information;
  • Bricks: to build the page. Remember to update and activate the latest version of Bricks on your site.

1. Creating a new custom post type

Go to Meta Box > Post Types > New Post Type to create a new post type.

Create a New Custom Post Type

Publish and you’ll see a new menu named Restaurants in the dashboard.

a new menu display on the left sidebar

2. Creating custom fields

Go to *Meta Box > Custom Fields8 to create fields.

the custom fields that we'll create for the post type

After creating all the needed fields, move to the Settings tab, choose Location as Post Type and select Restaurant to apply these fields to it.

set location for the fields to apply them to the wanted post type

When creating a new post in the Restaurant post type, the custom fields will be there.

newly created custom fields

3. Adding a section for the latest products

Creating and configuring the section

Let’s edit a page to add the section. I’ll take the homepage and edit it with Bricks.

edit the Homepage with Bricks.

First, add a Section element to the page, then you’ll see a Container element inside to cover all the restaurants’ information.

add a Section element

Then, add a Heading element to name the section

Add a Heading element to display the title of the section

In the container, add the Posts element then you will see a list of blog posts as default with featured image, title, and short description in the preview.

add the Posts element

Since we need to show the posts saved in Restaurant post type instead of blog post, go to the Query section of the Posts element, choose Post Type as Restaurant.

change the post type in the query section

Since we’ll display the latest posts first and then the oldest ones, set the order post by Published date and then choose the Descending option.

change the order by as you wanted

But, it will display all the posts in the chosen post type. So, enter a number to the Posts per page box to limit the number of posts. I set 6 here, so only the 6 latest posts will display in the section.

Enter the number to the Post per page box

Next, if you want to change the page’s layout or the display of the featured image, go to the Layout and the Image section to change the settings as you want.

change the layout options

change the image options

Displaying products information into the section

Now, let’s add data from custom fields to the section to show extra information about the restaurants. Still in the Content section of the Posts element, go to the Fields and add some fields. You also can remove the field you don’t want to show here, e.g I’ll remove the post excerpt.

add fields which you created in the cusom fields

To display the data in your wanted fields, click Add Field > Dynamic Data then find the corresponding fields. The data of each post will immediately display in the preview.

data of each post will display corresponding to the fields you set

Repeat these actions to get all the fields. And, pay attention that when you select to get data from the logo field, it will display text as a default. For that reason, to display images, add an attribute as below:

adjust the logo field to show as picture instead of text


You should use the HTML tag for each element for easier styling in the next step.

You should use the HTML tag for each element for easier styling in the next step

Now, all the data saved in custom fields has been obtained and displayed on the frontend.

all the data saved in custom fields has been obtained and displayed on the frontend

4. Styling the section

In the Bricks visual editor, you can easily style the section as you want. For further styling, you can also add some CSS code.

add CSS class for the Posts elements

add CSS code

Here is the result after styling.

result after all steps