In this next part of this series, we're going to figure out how to have a section for the latest products using Meta Box and another website builder, Oxygen. This section will be the same as the last ones we created in the previous posts.

The example of creating the latest products section

Are you ready to start?

Before Getting Started

We’ll display some extra information about the products in the latest product section. Most of them will be in custom fields, so we need Meta Box plugin to have a framework to create custom fields. It’s free on wordpress.org.

Finally, Oxygen Builder, and remember to use the 3.9 version or upper to have the native integration with Meta Box.

Video Version

Step 1: Create a New Custom Post Type

In the Admin Dashboard, go to Meta Box > Post Types > New Post Type to create a new post type for products.

After publishing, you will see a new menu in your dashboard.

A new menu appears after creating a new post type for the products.

Step 2: Create Custom Fields for the Post Type

In the Admin Dashboard, go to Meta Box > Custom Fields > Add New. You will see an UI to create custom fields if you have Meta Box Builder already.

Meta Box has more than 50 field types, so you can choose any type of field to input any data you want. We already have a video about all Meta Box field types and each field’s features so you can learn about each one.

Just choose one from the drop-down list to have your wanted field as in the below picture.

Create custom fields for the products.

When configuring the fields, you should choose the easy-to-remember labels and IDs because you will need to use them in the next step.

Here are the custom fields I created. They’re simple so I don’t need to configure much.

Field Type Label  ID
Text Address address
Single Image Logo logo
Select Status status
Checkbox List Voucher voucher

As for the Restaurant Status and Voucher field, they’re selection fields so we’ll have the Choice box to add options like this.

Add options for the Restaurant Status field
Add options for the Restaurant Status field
Add options for the Voucher field
Add options for the Voucher field

After creating all the fields, move to the Settings tab. Remember to choose the Location as Post Type and select your product’s post type to apply these fields to it.

Choose the Location as Post Type of the product.

Now, when creating a new post in my Restaurant post type, the custom fields will be here.

The custom fields are already in the post.

Let's move to the next step to display the Latest Products section on the frontend.

Step 3: Add a Section for the Latest Products on Homepage

You can create a new page or choose an existing page you want to add the section, and then edit it with Oxygen. I’m going to put it on my homepage.

Choose the wanted page to add the latest product section, and edit it with Oxygen.

The latest products section is a list of posts, so we’ll choose the Repeater component first.

In this component settings, choose Query > Custom > Post Type, then search for the post type you want to get posts.

Choose Query > Custom > Post Type, then search for the post type you want to get posts.

Because we haven’t chosen any kind of information about the product to show yet, it’s still blank here.

Repeater is still blank when we haven't chosen any kind of product information yet.

Now, add some components to display them such as name, featured image, status, and so on.

First, to display featured images of the post. Add a Featured Image component.

Add a Featured Image component to display featured image for the post.

Then, you will see all the featured images of the posts.

The featured images of the posts are displayed.

To display the name of the restaurant means the post title, choose the Text component. Then, we need to connect this component to the post title to get dynamic data. Click the Insert Data button and go to the Post section, choose Title.

Choose Text component to display the restaurant's name and connect it to the post title to get dynamic data.

Now, all the names of restaurants are shown here.

All the restaurant's name are shown

For the address, choose the Text component as well. However, you need to connect it to a Meta Box field to get data. Following the actions as I did in the below gif.

Settings for Address field.

Then, the addresses corresponding to each restaurant will be shown.

The addresses corresponding to each restaurant will be shown

For other information such as restaurant status and voucher, do likewise.

The Restaurant Status is a select field and it has options as I set when creating it as I show in this pic. Each option always has 2 elements that are value and label.

The options of Restaurant Status field

So, when inserting data from this kind of field, you’ll see a setting: Return value or label? to choose the kind of output data.

Choose the kind of output data in a setting - Return value or label?

For the logo, it’s a single image field, so I choose the Code Block component and set it as PHP & HTML.

Choose the Code Block component to display the logo

Add this below code to the box.

<?php
    $image = rwmb_meta( 'logo', array( 'size' => 'origin' ) );
    echo '<img src="', $image['url'], '">';

?>

Add code to Code Block to display the logo

In this code:

  • $image = rwmb_meta( 'logo', array( 'size' => 'origin' ) ); is used to get the data from the Logo field;
  • echo '<img src="', $image['url'], '">'; is used to display the image.

Save the changes for this page and go to it in the front end to see how the latest products section is displayed.

The latest products section is displayed after editing with Oxygen.

It doesn't look as good as I want. So I will style it in the next steps.

Step 4: Restructure Components and Set CSS Classes for Elements

Restructure Components

Before styling my latest products section, I will add several additional components, including Div tag to rearrange all the components into a better structure.

Add additional components to have a better structure before styling.

Add Div tag to rearrange all the components into a better structure

As you see the latest products section at the beginning of this post, when users hover over a featured image of a restaurant, a View Detail button will appear. So I’ll add a Text Link component and rename it.

Setting for View Detail.

I also want to link the View Detail button to the post URL so that people can click it to see the post, so I inserted data from Permalink to it.

Insert data from Permalink to link the View Detail button to the post URL .

Add Classes for Elements

Here are my classes for each element. They will be used in the next steps for styling so I list them here for your better following.

Element Class
Restaurant list-restaurant
Repeater slider-res
Div contain-restaurant
Div cover-image-res
Image image-res
Voucher voucher-res
Logo logo
Name name-res
Address address-res
Status status-res

Step 5: Create Slider for the Latest Products Section

To display the latest products section as a slider, we have to add CSS and JS. However, instead of adding directly to the theme file, I installed an additional plugin called My Custom Functionality. So when I change the theme, it won’t be affected. You can download this plugin here and install it on your WordPress website as well.

Download JS and CSS library

I will use the Slick Slider library for my JS and CSS. Download it here.

You will see many files there, but we just need to use these 3 files: slick.css, slick-theme.css, and slick-min.js.

Go to the folder of My Custom Functionality plugin and upload them into the corresponding js and css folders.

Set Up the Slider Effect

To set up the slider effect of Slick Slider, I’ll create a new custom.js file in the js folder and add this code.

Add code to the custom.js file.

jQuery(document).ready(function ($) {
    jQuery(".list-restaurant .slider-res").slick({
        infinite: false,
        dots: false,
        autoplay: false,
        speed: 800,
        autoplaySpeed: 4000,
        slidesToShow: 3,
        slidesToScroll: 3,
        nextArrow: '<button class="next-btn">Next</button>',
        prevArrow: '<button class="prev-btn">Previous</button>'
    });
    jQuery('.status-res span').each(function () {
        if (jQuery(this).html() == 'Open') {
            jQuery(this).parent().addClass('open');
        } else {
            jQuery(this).parent().addClass('close');
        }
    });
})

In the code:

  • jQuery(".list-restaurant .slider-res").slick({: to create a slider for the elements in the slider-res class. And the slider will have the style of the Slick Slider library;
  • jQuery('.status-res span').each(function () {: to create a dynamic class based on the returned values of the status in the section that I put in the status-res class. If the returned value is open, the class will be open. If the returned value is close, the class will be close. Depending on the created class, I will have two different styles for the two statuses of the restaurant.

Declare the JS and CSS files

We need to declare the JS and CSS files that we have just uploaded. Do it by adding this code to the custom_enqueue_files() function in the plugin.php file of the My Custom Functionality plugin.

wp_enqueue_style('slick', plugin_dir_url( __FILE__ ).'/assets/css/slick.css');
wp_enqueue_style('slick-theme', plugin_dir_url( __FILE__ ).'/assets/css/slick-theme.css');
wp_enqueue_script('custom', plugin_dir_url( __FILE__ ).'/assets/js/custom.js', ['jquery']);
wp_enqueue_script('slick-min', plugin_dir_url( __FILE__ ).'/assets/js/slick.min.js', ['jquery']);

Add code to the plugin.php file

Now, go to the homepage, the latest products section has already turned into a slider like this.

The latest products section has already turned into a slider

But it hasn’t looked good yet. So, it’s time to add some additional CSS.

Step 6: Add CSS to Style the Latest Products Section

In the Oxygen preview, choose Manage > Stylesheet and Add Stylesheet. Then, add some CSS.

Choose Manage > Stylesheet and Add Stylesheet and add some CSS.

This is the CSS that I used:

https://github.com/wpmetabox/tutorials/blob/master/display-latest-posts-with-Oxygen/custom.css

Let’s see how the latest products section displays on the Homepage. It’s much more beautiful, isn’t it?

The latest products section turned to the beautiful look

To refer to all the code and the library that I used, you can visit here:

https://github.com/wpmetabox/tutorials/tree/master/display-latest-posts-with-Oxygen

Last Words

We’ve gone through all the steps to display the latest products section using Meta Box plugin and Oxygen Builder. Try it out and share the results in the comment section. In the event that you have projects using another page builder, refer to the other posts in this series. Or if you want to suggest any tutorials, feel free to leave a comment. Thank you for reading. Good luck!

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. Create a Filter to Find Hotels by Location
  3. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  4. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  5. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  6. Create Dynamic Favicon in WordPress using Meta Box plugin
  7. Create Posts Series in WordPress Using Meta Box
  8. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  9. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  10. How to Add Custom Fields for WooCommerce - P2 - Using MB Views
  11. How to Add Custom Fields to Display Banners using Meta Box Plugin
  12. How to Add Guest Authors and Guest Posts - Using Meta Box
  13. How to Add Related Posts - Using Custom Fields
  14. How to Build a Hotel Booking Website Using Meta Box - P1
  15. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  16. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  17. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  18. How to Create a Classified Ads Website using Meta Box
  19. How to create a FAQs page - P5 - Using Meta Box and Breakdance
  20. How to Create a Product Page - P2 - Using Meta Box and Oxygen
  21. How to Create a Product Page - P3 - Using Meta Box and Bricks
  22. How to Create a Product Page - P4 - Using Meta Box and Elementor
  23. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  24. How to Create a Product Page - P6 -Using Meta Box and Breakdance
  25. How to Create a Product Page - P7 - Using Meta Box + Kadence
  26. How to Create a Product Page - P8 - Using Meta Box and Brizy
  27. How to Create a Product Page - P9 - Using Meta Box and Divi
  28. How to Create a Product Page using Meta Box Plugin
  29. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  30. How to Create a Recipe - P3 - Using Meta Box and Elementor
  31. How to Create a Recipe - P4 - Using Meta Box and Bricks
  32. How to Create a Recipe - P5 - Using Meta Box and Zion
  33. How to Create a Recipe - P6 - Using Meta Box and Brizy
  34. How to Create a Recipe - P7 - Using Meta Box and Breakdance
  35. How to Create a Recipe - P8 - Using Meta Box and Kadence
  36. How to Create a Recipe - P9 - Using Meta Box and Divi
  37. How to Create a Recipe with Meta Box Plugin
  38. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  39. How to Create a Simple Listing - P3 - Using Meta Box and Breakdance
  40. How to Create a Simple Listing - P4 - Using Meta Box and Elementor
  41. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  42. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  43. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  44. How to Create a Team Members Page - P4 - Just Meta Box
  45. How to Create a Team Members Page - P6 - using Meta Box and Breakdance
  46. How to Create a Team Members Page - P7 - Using Meta Box and Kadence
  47. How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
  48. How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
  49. How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
  50. How to Create a Video Gallery Page - P5 - Using MB Views
  51. How to Create a Video Gallery Page - P6 - Using Meta Box and Zion
  52. How to Create a Video Gallery Page Using Meta Box + Oxygen
  53. How to Create ACF Flexible Content Field with Meta Box
  54. How to Create an Auto-Updated Cheat Sheet in WordPress
  55. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  56. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  57. How to create an FAQs page - P4 - Using Meta Box and Bricks
  58. How to Create an FAQs Page - P6 - Using MB Views
  59. How to Create an FAQs Page - P7 - Using Meta Box and Divi
  60. How to Create an FAQs Page - P8 - Using Meta Box and Kadence
  61. How to Create an FAQs Page -P3- Using Meta Box
  62. How to Create Buttons with Dynamic Link using Custom Fields
  63. How to Create Category Thumbnails & Featured Images Using Custom Fields
  64. How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
  65. How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
  66. How to Create Download and Preview Buttons - P3 - Using MB Views
  67. How to Create Download Buttons in WordPress - Using Custom Fields
  68. How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
  69. How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
  70. How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
  71. How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
  72. How to Create Notification Using Custom HTML Field
  73. How to Create Online Admission Form for School or University
  74. How to Create Online Reservation Form for Restaurants using Meta Box
  75. How to Create Relationships - P1 - Using Meta Box and Oxygen
  76. How to Create Relationships - P2 - Using Meta Box and Bricks
  77. How to Create Relationships - P3 - Using MB Views
  78. How to Create Relationships - P4 - Using Meta Box and Breakdance
  79. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  80. How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
  81. How to Create Taxonomy Thumbnails & Featured Images - P4 - Using MB Views
  82. How to Create YouTube Video Timestamps on WordPress Website - P1 - Using MB Views
  83. How To Display All Listings On A Map With Meta Box
  84. How to Display Author Bio in WordPress - P1 - Using Meta Box and Bricks
  85. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  86. How to Display Images from Cloneable Fields - P2 - Using Meta Box and Oxygen
  87. How to Display Images from Cloneable Fields - P3 - with Elementor
  88. How to Display Images from Cloneable Fields - P4 - with Bricks
  89. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  90. How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
  91. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  92. How to Display Product Variations - P2 - Using Meta Box and Oxygen
  93. How to Display Product Variations - P3 - Using Meta Box and Bricks
  94. How to Display the Dynamic Banners - P2 - Using Meta Box and Bricks
  95. How to Display The Latest Products - P5 - Using Meta Box and Bricks
  96. How to Display the Latest Products - P6 - using Meta Box and Breakdance
  97. How to Display the Latest Products - P7 - Using Meta Box + Kadence
  98. How to Display the Latest Products Section - P4 - Using Meta Box + Zion
  99. How to Display the Most Viewed Posts - P1 - using MB Views

Leave a Reply

Your email address will not be published. Required fields are marked *