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.
Video version
Preparation
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.
Publish and you’ll see a new menu named Restaurants in the dashboard.
2. Creating custom fields
Go to *Meta Box > Custom Fields8 to create fields.
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.
When creating a new post in the Restaurant post type, the custom fields will be there.
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.
First, add a Section element to the page, then you’ll see a Container element inside to cover all the restaurants’ information.
Then, add a Heading element to name 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.
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.
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.
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.
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.
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.
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.
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:
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.
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.
Here is the result after styling.