Display The Latest Products Section - P2 - Using Meta Box and Elementor
Tags: metabox, latest, elementor, tutorail
Published: 2022-01-11 04:15:30

In the previous part of the series “<strong>How to display the Latest Products section in different ways</strong>”, we learned how to do it with Meta Box and Gutenberg. As promised, we’re showing you another method that uses Meta Box and a page builder. Today, I choose <strong>Elementor</strong>.

<!--more-->

I’m also going to create this section with the posts in time order: the latest products first, then the older ones. It will look like this:

<img class="aligncenter" src="https://i.imgur.com/VEXm8da.gif" alt="The example of creating the latest products section" width="1200" height="675" />

Now, let’s start!
<h2>Before Getting Started</h2>
To do it, we need <a href="https://elementor.com/">Elementor</a> first. Here I use Elementor Pro which has integration with <a href="https://metabox.io/">Meta Box</a>. You also need other tools as follows:
<ul>
 	<li><a href="https://wordpress.org/plugins/ele-custom-skin/">Elementor Custom Skin</a>: It provides the Loop template to display the listing of posts.</li>
 	<li><a href="https://wordpress.org/plugins/meta-box/">Meta Box core plugin</a>: This is the framework to create custom fields and custom post types. It’s free on<a href="https://wordpress.org/"> wordpress.org</a>, so you can download it directly.</li>
 	<li><a href="https://metabox.io/plugins/custom-post-type/">MB Custom Post Type &amp; Custom Taxonomies</a>: This is a useful extension of Meta Box. It helps you to create new custom post types. You also can download it free on <a href="https://wordpress.org/plugins/mb-custom-post-type/">wordpress.org</a>.</li>
 	<li><a href="https://metabox.io/plugins/meta-box-builder/">Meta Box Builder</a>: This premium extension of Meta Box provides a UI in the back end to create and configure custom fields without using code.</li>
 	<li><a href="https://metabox.io/plugins/mb-elementor-integrator/">Meta Box - Elementor integrator</a>. This extension allows you to get data from custom fields created by the Meta Box plugin in the templates of Elementor.</li>
</ul>
FYI, here I use Ocean WP theme which is compatible with Elementor. Otherwise, you can choose any other ones which are compatible with Elementor as well.
<h2>Video Version</h2>
https://youtu.be/KvYfEO-X4OA
<h2>Step 1: Create a New Custom Post Type</h2>
Go to <strong>Meta Box</strong> &gt; <strong>Post Types</strong> &gt; <strong>New Post Type</strong>.

<img class="aligncenter" src="https://i.imgur.com/RTmhpTr.png" alt="Create a new post type for the latest products." width="1200" height="490" />

After publishing it, a new menu appears.

<img class="aligncenter" src="https://i.imgur.com/PJd0O8m.png" alt="A new menu named Restaurant appears." width="1200" height="610" />
<h2>Step 2: Create Custom Fields for The Custom Post Type</h2>
Go to <strong>Meta Box</strong> &gt; <strong>Custom Fields</strong> &gt; <strong>Add New</strong>. Meta Box Builder provides a UI in the back end to create custom fields without using code. But you also can code by yourself or use code generated by <a href="https://metabox.io/online-generator/">Online Generator</a>.

<img class="aligncenter" src="https://i.imgur.com/QeLavqJ.png" alt="Create custom fields for the lastest products." width="1200" height="593" />

I just need to fill in the Label and ID for fields. It is quite easy, but you should choose a simple ID to remember easily. Because you will need them in the next steps.

Meta Box supports over 50 field types, so you can choose any type of them for your own case. Here are the fields that I chose.
<table style="height: 278px;" width="487">
<tbody>
<tr>
<td><b>Field Type</b></td>
<td><b>Name </b></td>
<td><b>ID</b></td>
</tr>
<tr>
<td><span style="font-weight: 400;">Text</span></td>
<td><span style="font-weight: 400;">Address</span></td>
<td><span style="font-weight: 400;">address</span></td>
</tr>
<tr>
<td><span style="font-weight: 400;">Single Image</span></td>
<td><span style="font-weight: 400;">Logo</span></td>
<td><span style="font-weight: 400;">logo</span></td>
</tr>
<tr>
<td><span style="font-weight: 400;">Select</span></td>
<td><span style="font-weight: 400;">Status</span></td>
<td><span style="font-weight: 400;">status</span></td>
</tr>
<tr>
<td><span style="font-weight: 400;">Checkbox List</span></td>
<td><span style="font-weight: 400;">Voucher</span></td>
<td><span style="font-weight: 400;">voucher</span></td>
</tr>
</tbody>
</table>
For the <strong>Status</strong> and <strong>Voucher</strong> fields, I added the options in the <strong>Choices</strong> section like this:

<img src="https://i.imgur.com/HzRqVhT.png" alt="Add options to the Status field" width="1200" height="636" /> Add options to the Status field

<img src="https://i.imgur.com/55Iegp6.png" alt="Add options to the Voucher field" width="1200" height="620" /> Add options to the Voucher field

After creating all the fields, move to the <strong>Settings</strong> tab. In the <strong>Location</strong> section, choose the <strong>Post Types</strong> as <strong>Restaurant</strong> to apply these fields to it.

<img class="aligncenter" src="https://i.imgur.com/zq6P0Rd.png" alt="Choose the post type as Restaurant in Location section." width="1200" height="589" />

Now, go to the post editor in <strong>Restaurant</strong> post type, you will see the fields and can enter information into them.

<img class="aligncenter" src="https://i.imgur.com/C9dnqBm.png" alt="Enter the information into fields." width="1200" height="631" />
<h2>Step 3: Create a New Template</h2>
Go to<strong> Templates</strong> &gt; <strong>Theme Builder</strong>.

<img class="aligncenter" src="https://i.imgur.com/apXb8zq.png" alt="Create a new template" width="1200" height="605" />

We will have a list of products, so we should choose the template as a loop. This option is available when you have <a href="https://wordpress.org/plugins/ele-custom-skin/">Elementor Custom Skin</a>.

<img class="aligncenter" src="https://i.imgur.com/1nf0Eb4.png" alt="Choose the template as a Loop." width="1200" height="607" />

To have the live preview, you can choose any post of the post type that you want in the <strong>Settings</strong> tab.

<img class="aligncenter" src="https://i.imgur.com/Nh2MwW1.png" alt="Choose any post of the post type in the Settings tab." width="1200" height="631" />

Firstly, I add an <strong>Inner Section</strong> to group some elements that I want to style at once as the featured image, logo, and voucher.

<img class="aligncenter" src="https://i.imgur.com/GnXSeY0.png" alt="Add an Inner Section to group some elements" width="1200" height="636" />

It has 2 columns inside so I’ll remove one.

<img class="aligncenter" src="https://i.imgur.com/BHQxYx7.png" alt="Remove 1 columns in Inner Section." width="1200" height="618" />

Next, I add the <strong>Featured Image</strong> widget into the <strong>Inner Section</strong>.

<img class="aligncenter" src="https://i.imgur.com/5ovncDo.png" alt="add the Featured Image widget into the Inner Section" width="1200" height="636" />

Then, to get the value of the <strong>Voucher</strong> field, add a <strong>Text Editor</strong> element and link it to the field following what I’m doing in the below picture.

<img src="https://i.imgur.com/WCFub8o.gif" alt="Click on the Dynamic Tags icon &gt; choose Meta Box Field option in the Post section &gt; choose the field you want." width="1200" height="675" /> Click on the Dynamic Tags icon &gt; choose Meta Box Field option in the Post section &gt; choose the field you want.

And then, the value that you input to the corresponding field will display in the preview.

For the <strong>Logo</strong>, just add an<strong> Image</strong> widget, and choose the source from a <strong>Meta Box field</strong> as well.

<img class="aligncenter" src="https://i.imgur.com/AawmpLh.gif" alt="Setting for Logo field." width="1200" height="675" />

Here I set the logo size as<strong> Thumbnail</strong> to scale down the image.

<img class="aligncenter" src="https://i.imgur.com/I6ei5aX.png" alt="set the logo size as Thumbnail to scale down the image." width="1200" height="615" />

Moving on, out of the <strong>Inner Section</strong>, I add a <strong>Post Title</strong> widget and link it to the <strong>Post URL</strong>.

<img class="aligncenter" src="https://i.imgur.com/gxL0VPL.gif" alt="add a Post Title widget and link it to the Post URL." width="1200" height="675" />

The <strong>Address</strong> of the restaurant also will be got from the value of the custom fields in the same way with the <strong>Voucher</strong>. So, add a <strong>Text Editor</strong> and link it to the <strong>Address</strong> field.

<img class="aligncenter" src="https://i.imgur.com/Xl7NGjU.gif" alt="Settings for Address field." width="1200" height="675" />

When users hover over the featured image of the restaurant, I want a text as <strong>View Detail</strong> display, so I add a <strong>Heading</strong> widget here. I also rename the <strong>Title</strong> to <strong>View Detail</strong> and link it to the <strong>Post URL</strong>.

<img class="aligncenter" src="https://i.imgur.com/OP3PKpt.gif" alt="Setting for View Detail field." width="1200" height="675" />

The last one, the <strong>Status</strong> is the same as the <strong>Voucher</strong>, so do likewise and link it to the <strong>Status </strong>field.

<img class="aligncenter" src="https://i.imgur.com/b1cEOCS.gif" alt="Setting for Status field." width="1200" height="675" />
<h2>Step 4: Add a Section for the Latest Products on the Homepage</h2>
Now, I will add the list of the latest restaurants to this position on the homepage. It is a list of posts, so I drag the<strong> Post</strong> widget to here.

<img class="aligncenter" src="https://i.imgur.com/Zj84qai.png" alt="add the list of the latest products to the position on the homepage" width="1200" height="636" />

Because I have the Elementor Custom Skin plugin, I have an option to set the skin as <strong>Custom</strong>.

<img class="aligncenter" src="https://i.imgur.com/449SISu.png" alt="Choose Custom in Skin tab." width="1200" height="632" />

Then, select the <strong>Default Template</strong> as the template which we have just created.

Next, in the <strong>Query</strong> section, choose the source as the post type of your products.

<img class="aligncenter" src="https://i.imgur.com/EFloDyY.png" alt="In the Query section, choose the source as the post type of your products." width="1200" height="633" />

Now, the preview shows the posts with exactly the information we want. <span style="font-weight: 400;">And the products are in the time order: the latest post first, then the older one without any further configuration.</span>

<img class="aligncenter" src="https://i.imgur.com/tQ1Jwkb.png" alt="The result of displaying the latest products section before styling." width="1200" height="898" />

We will style this section in the next step.
<h2>Step 5: Set CSS Classes for the Elements</h2>
Before styling my latest restaurants section on the homepage, I set CSS classes for each element in the <strong>Advanced</strong> tab.

<img class="aligncenter" src="https://i.imgur.com/0ogiCt6.gif" alt="In the Advanced tab, set CSS classes to prepare styling for the latest products section." width="1200" height="675" />

This step is so easy, but it will help in the next steps.
<h2>Step 6: Create Slider for The Latest Products Section</h2>
As you’ve seen at the beginning, my latest restaurant section is in a slider. To have it, I use some JS and CSS. But instead of adding them directly to the theme, I’m using the <strong>My Custom Functionality</strong> plugin, so when I change the theme, the slider won’t be affected. You can download this plugin from <a href="https://github.com/srikat/my-custom-functionality">GitHub</a> and install it on your website.
<h3>Download the JS and CSS Library</h3>
For the JS and CSS, I use the Slick library. It is also available on <a href="https://github.com/kenwheeler/slick/tree/master/slick">GitHub</a>. It includes several files as you can see here. But, we just need three of them.

<img class="aligncenter" src="https://i.imgur.com/xognr8K.png" alt="use 3 files CSS and JS in Slick library." width="1200" height="604" />

Go to the folder of the My Custom Functionality plugin, and upload them into the corresponding JS and CSS folders.

<img class="aligncenter" src="https://i.imgur.com/n9P9tyZ.png" alt="pload the slick-theme.css file into the css folder of My Custom Functionality plugin" width="1200" height="512" />
<h3>Set Up The Slider Effect</h3>
Next, to set up the slider effect of Slick Slider, I’ll create a <code>custom.js</code> file in the JS folder, and add this code to it.

<img class="aligncenter" src="https://i.imgur.com/vz9ydhu.png" alt="create a custom.js file in the JS folder, and add code to it" width="1200" height="1016" />
<pre><i><span style="font-weight: 400;">jQuery(document).ready(function ($) {
    jQuery(".list-restaurant .ecs-posts").slick({
        infinite: false,
        dots: false,
        autoplay: false,
        speed: 800,
        autoplaySpeed: 4000,
        slidesToShow: 3,
        slidesToScroll: 3,
        nextArrow: '&lt;button class="next-btn"&gt;Next&lt;/button&gt;',
        prevArrow: '&lt;button class="prev-btn"&gt;Previous&lt;/button&gt;'
    });
    jQuery('.status-res .elementor-text-editor').each(function () {
        if (jQuery.trim(jQuery(this).html()) == 'Open') {
            jQuery(this).parents('.status-res').addClass('open');
        } else {
            jQuery(this).parents('.status-res').addClass('close');
        }
    });
})
</span></i></pre>
<strong>Explanation</strong>:
<ul>
 	<li><code>jQuery(".list-restaurant .ecs-posts").slick({})</code>: We use it to create a slider with the Slick Slider’s style for the elements in the <code>.list-restaurant .ecs-posts</code> class;</li>
 	<li><code>jQuery('.status-res .elementor-text-editor').each(function () {})</code>: It will create a dynamic class depending on the returned values of the restaurant’s status in the section that I put in the <code>status-res</code> class. If the returned value is <code>open</code>, the class will be <code>open</code>. In return, the value is <code>close</code>, the class will be <code>close</code>.</li>
</ul>
<h3>Declare the JS and CSS Files</h3>
Go to the <code>plugin.php</code> file and add this code into the <code>custom_enqueue_files()</code> function:
<pre>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']);</pre>
Now, go to the homepage, my latest restaurants section has already turned into a slider.

<img class="aligncenter" src="https://i.imgur.com/KWb4pV5.gif" alt="the latest products section is displayed as a slider" width="1160" height="933" />

But it hasn’t looked good yet. So, it’s time to add some additional CSS.
<h2>Step 7: Add CSS to Style The Latest Products Section</h2>
Back to the Template we’ve just created. In the <strong>Navigator</strong>, choose the <strong>Section</strong> element that includes all the elements of the posts we show on the Latest Products section. And move to the <strong>Advanced</strong> tab &gt; <strong>Custom CSS</strong> and add code to the box.

<img class="aligncenter" src="https://i.imgur.com/jpPOnVj.png" alt="Add CSS to style the latest products section" width="1200" height="616" />

I uploaded the code to <a href="https://github.com/wpmetabox/tutorials/blob/master/display-latest-posts-with-Elementor/custom.css">GitHub</a>, so you can try it.

Now, back to the homepage, the slider turned to a beautiful one.

<img class="aligncenter" src="https://i.imgur.com/WNgDpaf.png" alt="The final result of is display the latest products section" width="1200" height="402" />
<h2>Last Words</h2>
As you see, displaying the <strong>Latest Products</strong> section on the front end <strong>in time order</strong> with <strong>Meta Box and Elementor is so intuitive</strong>. You just need to drag and drop without much coding and can preview the page easily.

Besides, if you want to try other plugins or compare which way is better, don’t forget to read other articles in this series.