Display images from cloneable fields is a common task for those who are building a website. For example, you may want to display a series of brand logos of typical clients or partners, even a testimonial section with an avatar along with the clients’ name and quote. In this series, we will take a ride to do it with a simple case study, brand logos.

If you are using Gutenberg, this part is for you. For other page builders, please wait for the upcoming tutorials.

Before Getting Started

We’ll need Meta Box and some of its extensions for this practice:

• MB Settings Page: it helps you to create settings pages, we’ll need a settings page to place the custom fields into;
• Meta Box Builder: it provides a UI to create custom fields easily;
• Meta Box Group: this extension helps to organize custom fields into cloneable groups, where we input images today;
• MB Views: it helps you to create templates as well as get and display fields’ values without touching the theme’s files.

You can install these extensions individually or use Meta Box AIO.

Video Version

https://www.youtube.com/watch?v=nteLH6DDKSI

Step 1: Create a Settings Page

Normally, we’ll create a Custom Post Type to create multiple posts for brands then each post is for a brand. But, today, I do a more convenient and simple way — creating a Settings Page. The information about all the brands will be input to that page. It means that all of them will be in one place only.

Now, go to Meta Box > Settings Page > Add New. In this case, the Settings Page is quite simple to contain the image of each brand, so just change the option name.

Now, a new menu named Brands appears. It’s my new Settings Page.

Step 2: Create Custom Fields for the Settings Page

In the Admin Dashboard, go to Meta Box > Custom Fields > Add New.

This is a group with three sub-fields inside. This group is set to be cloneable to have more spaces to add different brands information.

As you can see in the structure, I added 2 fields which are Single Image and Url. One allows you to upload images and save them in the library, and one allows you to input a link of an image from anywhere.

After having all the needed fields, go to the Settings tab and choose the Location as the Settings Page that we’ve just created to apply the custom fields to it.

Back to the Settings Page, you’ll see all of the created custom fields. You can click Add more to add another brand’s information.

Now, let’s fill the information into the fields and move to the next step.

Step 3: Display Brands Information

To display the brand information, you normally must go to the theme’s files to add code or use a page builder. However, you have another way with Meta Box. We have the MB Views extension to create templates without touching the theme’s files.

Instead of typing code into the box in the Template tab, you can insert fields to get their data. And, in the previous tutorial, we used to create custom fields for posts, so we choose one from the Post tab. But, in this practice, we created custom fields for the Settings Page, so we go to the Site tab then find the custom fields that I created.

Because this group is cloneable so whenever you open the group here to find any field, it will auto-generate a Loop.

When inserting the fields, I also edit the code a little bit to create a rule for displaying images.

The first part is to set a rule that if there is no URL input to the URL field, the value from the Single Image field will be obtained and displayed.

When you insert the logo from the Single Image field, you can choose to size to output. Here I set it to be the thumbnail.

In the event that there is no input data in the Brand Logo Upload field, the image from the link in the URL field will be displayed.

If there is data in both the Image Upload and URL field, I set priority to display the image of the Brand Logo Upload field.

If you have any further information for the brand, such as the Brand Name I have in this case, remember to insert them in the next lines.

If you want to style this section, add some div tags. I also did it and here is all the code.

<div class="brand-group">
{% for clone in site.brands.brand_group %}
    <div class="brand-img">
    {% if clone.brand_logo_url|trim is empty %}
        <img src="{{ clone.brand_logo_upload.thumbnail.url }}" width="{{ clone.brand_logo_upload.thumbnail.width }}" height="{{ clone.brand_logo_upload.thumbnail.height }}" alt="{{ clone.brand_logo_upload.thumbnail.alt }}">
    {% elseif clone.brand_logo_upload.thumbnail.ID|trim is empty %}
        <img src="{{ clone.brand_logo_url }}">
    {% else %}
        <img src="{{ clone.brand_logo_upload.thumbnail.url }}" width="{{ clone.brand_logo_upload.thumbnail.width }}" height="{{ clone.brand_logo_upload.thumbnail.height }}" alt="{{ clone.brand_logo_upload.thumbnail.alt }}">
    {% endif %}
    <p class="name">
        {{ clone.brand_name }}
    </p>
    </div>
{% endfor %}
</div>

To finish, move to the Settings section, choose the type of view as Shortcode.

After publishing this view, a shortcode will be generated automatically. You can copy and paste it to any page you want to display the template.

So, you can see all of the brand logos along with their names displayed already. But this section hasn’t looked good yet. Thus, we’ll need some JS and CSS to make it look better.

Step 4: Create Slider for the Brand Logos

As you see in the first image I put at the beginning of this post, the logos are in a slider, and brand names are displayed correspondingly. To have it, I’ll use some JS and CSS.

However, I’m using the My Custom Functionality plugin instead of adding them directly to the theme. Thanks to that, the slider won’t be affected when I change the theme. You can download this plugin from GitHub and install it on your website.

Download the JS and CSS Library

For the JS and CSS, I use the Slick library. It’s also available on Github. It includes several files, but we just need three of them.

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

Create Custom JS for Slider and Rules

Create a custom.js file in the JS folder, and add code.

jQuery(document).ready(function ($) {
    jQuery(".brand-group").slick({
        infinite: false,
        dots: false,
        autoplay: false,
        speed: 800,
        autoplaySpeed: 4000,
        slidesToShow: 7,
        slidesToScroll: 7,
        nextArrow: '<button class="next-btn">Next</button>',
        prevArrow: '<button class="prev-btn">Previous</button>'
    });
})

jQuery(".brand-group").slick({ }) is used to create a slider for the elements which have .brand-group class.

Declare the JS and CSS Files

We need to declare all the JS and CSS files that we have just uploaded and created. I add this code inside the custom_enqueue_files() function in the plugin.php file.

wp_enqueue_style('slick', plugin_dir_url(https://medium.com/__FILE__).'/assets/css/slick.css');
wp_enqueue_style('slick-theme', plugin_dir_url(https://medium.com/__FILE__).'/assets/css/slick-theme.css');

wp_enqueue_script('custom', plugin_dir_url(https://medium.com/__FILE__).'/assets/js/custom.js', ['jquery']);
wp_enqueue_script('slick-min', plugin_dir_url(https://medium.com/__FILE__).'/assets/js/slick.min.js', ['jquery']);

Now, the brand images have already turned into a slider.

We still need to add some CSS to make it look better.

Step 5: Style the Slider using CSS

Traditionally, you have to add CSS to the Customizer or the theme’s files. But, with MB Views, you have a CSS tab for it.

All the CSS code is uploaded to Github, you can refer to it.

After adding CSS, my brand section turned into a new look.

Last Words

You see that displaying images from cloneable fields using Meta Box is not a difficult task. In my opinion, it’s very practical in some cases. We hope that this tutorial will help you to do it easier.

Remember to keep track of our channel for more upcoming tuts and feel free to leave a comment if you have any ideas or concerns.

— — —

The publication at Meta Box.

How to Display Images from Cloneable Fields — P1 — with Gutenberg was originally published in Meta Box on Medium, where people are continuing the conversation by highlighting and responding to this story.

Each restaurant or business will have different opening hours. To have that information and display them for each on a website, there might be some techniques including using custom fields. We’re going to add an Opening Hours section into the single restaurant page in this tutorial as this example:

Before Getting Started

For having extra information such as time slots for each day, we’ll use custom fields. So, we need the Meta Box plugin to have a framework to create them. It’s free and available on wordpress.org. Furthermore, we also need some advanced features from Meta Box that are available in the following extensions:

• MB Views: a premium extension of Meta Box. It helps you create templates and display the custom fields’ value on the frontend without touching the theme’s files;
• Meta Box Builder: this premium extension of Meta Box provides an intuitive UI in the back end to create and configure custom fields without using code;
• MB Group: this extension helps to arrange fields into groups;
• MB Conditional Logic: this premium extension allows you to create rules to control the display of the fields.

After installing and activating all these plugins, let’s move to the how-to parts right now.

Video Tutorial

https://youtu.be/8nZwyBbAWXU

Step 1: Create Custom Fields

Normally, we will create a new custom post type for the restaurants first. I skipped that step since I already had it on my website. If you haven’t had it yet, create it first then go to this step.

Go to Meta Box > Custom Fields > Add New to create a new field group. Then, add custom fields.

The first field is a select field and there are 3 options that I filled in the Choice box as below.

These 3 options will be used to set the display rule of other group fields.

To set conditions to groups, for example, with the All days have the same opening hours group. Go to the Advanced tab, and then set the rule in the Conditional Logic section like this:

This rule means this group will be displayed when the Choose an Option field is selected as All days have the same opening hours option which has the value is all_days_are_the_same.

Similarly, if the Choose an Option field is chosen as the Difference between weekdays and weekend options, all the subfields of the Weekdays and Weekend group will be displayed. Or if the Choose an Option field is selected as the Custom option, the group fields for every day in a week will be shown up. That’s the concept of how to create fields.

In each group field, I also have subfields with the same structure.

The Type of Opening Hours field is the select field. I have 4 options in the Choice box:

• Open All day;
• Close All day;
• By Appointment Only;
• Enter Hours.

If the restaurant has different opening hours, you can choose Enter Hours to display Start Time and End Time field in the Choose Time Slots group. So, I will set the rule for this group like this:

In case the restaurant opens in multiple time slots, we’ll need this group to be cloneable. So, I tick this box as below:

After creating all the fields, go to the Settings tab of the field group, choose Location as Post Type, and select Restaurant to apply these fields to this post type.

Publish this field group and go to the post editor in Restaurant, you will see the custom fields here.

They work exactly like the rule we set.

Step 2: Display the Fields’ Value on the Frontend

In this step, we’ll get the input data from those custom fields to display into the Restaurant single page. To do it, we’ll use MB Views in order not to touch the theme’s file.

If you’ve had a template created by MB Views for the Restaurant single page already, just go to it and edit. If not, create one. Then, add code to the view.

The code is quite long, so I put it in my Github here. You can refer to it for more details. The code is divided into several parts to get corresponding group data. Because of the same concept in all parts, I’ll explain a typical part to be more clear about the logic.

<div class="opening-hours">
<h2>
    Opening Hours
</h2>
<div class="detail-schedule">
    {% set options = post.choose_an_options.value %}
    {% if (options == "all_days_are_the_same") %}
        {% set same_days = post.all_days_have_the_same_opening_hours.type_of_opening_hours.value %}
        {% if ( same_days == "enter_hours") %}
        <div class="date-time">
            <div class="date">
                Mon - Sun
            </div>
            <div class="hour">
            {% for clone in post.all_days_have_the_same_opening_hours.choose_time_slots %}
            <div class="time-slot">
                <p class="starting-hour">
                    {{ clone.start_time | date( 'h:i A' ) }}
                </p>
                <p class="ending-hour">
                    {{ clone.end_time | date( 'h:i A' ) }}
                </p>
            </div>
            {% endfor %}
            </div>
        </div>
    {% else %}
    <div class="date-time">
        <div class="date">
            Mon - Sun
        </div>
        <div class="hour">
            {{ post.all_days_have_the_same_opening_hours.type_of_opening_hours.label }}
        </div>
    </div>
    {% endif %}

Here I created a variable named options to admit the value from the Choose an Option field. Then I set a rule based on its value to display values from the subfield in the corresponding group. It’s quite the same with the rules we created when configuring the fields.

First, if its value is all_day_are_the_same, the values of fields in the All days have the same opening hours group will be displayed.

I set a variable named same_days to admit the value from the Type of Opening Hours field. If it is enter_hours, the Choose Time Slots group will be obtained and displayed the data. As we set before, this group is cloneable, so there is a loop here.

After adding code, depending on if the view is new or not, choose the right Type and Location for the view in the Settings section.

Go to the single Restaurant page and see how the opening hours section displays.

All the time slots are shown exactly as I input in the backend. But this section doesn’t look as good as I want. So, I will add some CSS to style this section in the next step.

Step 3: Style the Opening Hours Section

Still, in the view of the single Restaurant page, go to the CSS tab.

And then, add the code below.

.container.detail-restaurant .opening-hours {
    max-width: 300px;
    margin: 0 auto;
    width: 100%;
}

.container.detail-restaurant .opening-hours h2 {
    margin: 0 0 10px;
        text-align: center;
        border: 4px solid rgba(231,57,72,.85);
    border-right: 0;
    border-left: 0;
}

.container.detail-restaurant .detail-schedule .date-time {
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
        align-items: baseline;
}

.container.detail-restaurant .detail-schedule .date-time .hour .starting-hour:after{
    content: '-';
    margin: 0 5px;
}

.container.detail-restaurant .detail-schedule .date-time .hour .time-slot {
    display: flex;
}

.container.detail-restaurant .detail-schedule .date-time .date {
    font-weight: 700;
    font-size: 15px;
}

.container.detail-restaurant .detail-schedule {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
        border-bottom: 4px solid rgba(231,57,72,.85);
    padding-bottom: 10px;
}

Now, go back to the single restaurant page, you’ll see the Opening Hours section looks much more beautiful.

Last Words

If you’re running an online food order platform or own a business that has several branches with different time zones, this tutorial may make sense to you. Try it out and share the results in the comment section. For other page builders, we’ll have some upcoming tutorials. By the way, if you have any idea about any other tutorials, feel free to leave a comment. Thank you for reading. Good luck!

— — —

The publication at Meta Box.

How to Display Opening Hours for Restaurants — P1 — Using Meta Box + Gutenberg was originally published in Meta Box on Medium, where people are continuing the conversation by highlighting and responding to this story.

In eCommerce, we usually see a product that has a bunch of different variations. For example, a T-shirt may have different colors along with different information such as size and price, then each one will be a variation.

Today, we are going to display them all in a clever way on the single product page. Whenever you click on a color button, all the corresponding information of that variation will be displayed, even in the image gallery.

To do that, we need some particular techniques. In this practice, we’ll use custom fields created by Meta Box. By the way, we do not use any theme, just Gutenberg here.

Before Getting Started

To add all of the extra information for variations, we need custom fields. So, the first tool on the list is Meta Box core plugin. This is the framework to create custom fields & custom post types. It’s free and available on wordpress.org. We also use some advanced features of Meta Box by using the following extensions:

• MB Custom Post Type & Custom Taxonomies: It’s a free extension of Meta Box to create custom post types.
• Meta Box Builder: This premium extension provides a UI in the back end to create custom fields easily.
• Meta Box Conditional Logic: It lets you show fields precisely as any rules you want.
• Meta Box Group: This extension helps you organize custom fields into repeatable and collapsible groups.
• MB Views: It helps you to create templates without touching the theme files as well as get the custom fields’ value and display them.

Video Tutorial

https://youtu.be/CpitJzTnWWo

Step 1: Create a New Custom Post Type

Go to Meta Box > Post Types > New Post Type. After creating a new post type, you will see a new menu appears on your dashboard. It’s your new post type.

Step 2: Create Custom Fields

Go to Meta Box > Custom Fields > Add New.

We have a tutorial on how to create custom fields, you can refer to it for more information.

As you can see here, I have a Switch field to confirm whether the product has variations or not. If your product doesn’t have any variation, it is a simple product, so the Simple Product group will be displayed for inputting data.

Then, there is some basic information that we put in that group with subfields inside.

If the product has any variations, the Variations of Product group will be displayed. This group also has subfields similar to the Simple Product group. In addition, it has an extra subfield inside to define the name of the variation which is Color Name.

To set the rule about when those groups display, we need to set rules in the Conditional Logic section in their Advanced Settings tab.

Just choose the key as the ID of the Switch field, and the value as 0 or 1. These values correspond to No and Yes options of this field.

0 is set for the Simple Product group field. So, when the Switch field is set to be No, this group will be displayed.

Do likewise, 1 is set to the Variations of Product group field.

One more thing, there is usually more than one variation. Thus, we set the Variations of Product group as cloneable to have more spaces to add variations.

After having all the custom fields, go to the Settings tab of the field group, and choose the Location as the post type of the products that we’ve just created to apply the custom fields to it.

Back to the post editor, you will see all of the created custom fields.

Now, just enter the information into the fields.

Step 3: Display the Product Variations Information on the Product Page

To display the product variations information on the product page, you normally have to go to the theme’s files to add code or use a page builder. But, in Gutenberg, you have another way with Meta Box. It has the MB Views extension to create templates without touching the theme’s files.

So, let’s create a new template using it.

Instead of typing code into the box in the Template tab, you can insert fields to get their data.

Just click the Insert Field button and choose which one you want.

It is necessary to edit the code a little bit when we insert fields. Here is mine after the modification.

{% set product_types = post.does_this_product_have_variations %}
{% if (product_types == 0) %}
    {% for item in post.simple_product.product_images %}
        <img src="{{ item.large.url }}" width="{{ item.large.width }}" height="{{ item.large.height }}" alt="{{ item.large.alt }}">
    {% endfor %}
    {% for item in post.simple_product.product_images %}
        <img src="{{ item.thumbnail.url }}" width="{{ item.thumbnail.width }}" height="{{ item.thumbnail.height }}" alt="{{ item.thumbnail.alt }}">
    {% endfor %}
    {{ post.title }}
    {{ post.content }}
    {% if post.simple_product.promotional_price|trim is empty %}
        {{ post.simple_product.original_price }}
    {% else %}
        {{ post.simple_product.promotional_price }}
        {{ post.simple_product.original_price }}
    {% endif %}
    {% for item in post.simple_product.size %}
        {{ item.label }}
    {% endfor %}
    {{ post.simple_product.status.label }}
{% else %}
    {% for clone in post.variations_of_product %}
        {% for item in clone.product_images %}
            <img src="{{ item.large.url }}" width="{{ item.large.width }}" height="{{ item.large.height }}" alt="{{ item.large.alt }}">
        {% endfor %}
        {% for item in clone.product_images %}
            <img src="{{ item.thumbnail.url }}" width="{{ item.thumbnail.width }}" height="{{ item.thumbnail.height }}" alt="{{ item.thumbnail.alt }}">
        {% endfor %}
    {% endfor %}
    {{ post.title }}
    {{ post.content }}
    {% for clone in post.variations_of_product %}
        {{ clone.color_name.label }}
    {% endfor %}
    {% for clone in post.variations_of_product %}
        {% if clone.promotional_price|trim is empty %}
            {{ clone.original_price }}
        {% else %}
            {{ clone.promotional_price }}
            {{ clone.original_price }}
        {% endif %}
    {% endfor %}
    {% for clone in post.variations_of_product %}
        {% for item in clone.size %}
            {{ item.label }}
        {% endfor %}
    {% endfor %}
    {% for clone in post.variations_of_product %}
        {{ post.simple_product.status.label }}
    {% endfor %}
{% endif %}

In there, product_types is the variable to admit the value of the Switch field. If it is 0, it means that the product has no variation. So, the next lines of code will get the value of the fields inside the Simple Product group. Otherwise, when the returned value is 1, the value of fields inside the Variations of Product group will be displayed.

Also in the code, I get the value from each Product Image field twice. One displays in the large size, and one in the thumbnail size. All of them will be used to set a slider.

These lines of code are to know when the product or variation has any promotion price and set a rule to display both of the original and promotional prices or just the original one.

Next, move to the Settings section of the view. Assign this template to the single product page. And now, go to any single product page, see the result.

It is so messy now. So, we’ll need some JS and CSS to make it more beautiful with a better layout.

Before styling, we need to edit this template a little bit more. Back to the view, then add some div tags to divide elements into sections. I put the code on our Github, you can refer to it for more clarity.

There is a notice that I added an A tag in the place where I output the color of variations. I also created a dynamic class there. It will generate different classes using the color name.

I also added an attribute named data-id for price, size, status as well as the image gallery. This attribute will admit the value of the corresponding color name.

Back to the single product page, all the elements have been just reordered.

Let’s move to the next step.

Step 4: Set Rules to Display the Variations’ Information

As you see at the beginning of this video, the images of the product variations are in a slider and the information of each variation displays only when you choose the matching color. To have it, I use some JS and CSS. However, I’m using My Custom Functionality plugin instead of adding them directly to the theme. So, when I change the theme, it won’t be affected. You can download this plugin from GitHub and install it on your website.

Download the JS and CSS Library

For the JS and CSS, I use the Slick library. It’s also available on Github. It includes several files as you can see here. But, we just need three of them.

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

Create Custom JS for Slider and Rules

Next, to set a rule that stipulates for displaying the information of each variation as well as the slider, I’ll create a custom.js file in the js folder and add the following code to it.

jQuery(document).ready(function ($) {
    $('.slider-single').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        adaptiveHeight: false,
        infinite: false,
        useTransform: true,
        speed: 400,
        cssEase: 'cubic-bezier(0.77, 0, 0.18, 1)',

    });

    $('.slider-nav')
        .on('init', function (event, slick) {
            $('.slider-nav .slick-slide.slick-current').addClass('is-active');
        })
        .slick({
            slidesToShow: 4,
            slidesToScroll: 4,
            dots: false,
            focusOnSelect: false,
            infinite: false,
            responsive: [{
                breakpoint: 1024,
                settings: {
                    slidesToShow: 5,
                    slidesToScroll: 5,
                }
            }, {
                breakpoint: 640,
                settings: {
                    slidesToShow: 4,
                    slidesToScroll: 4,
                }
            }, {
                breakpoint: 420,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                }
            }]
        });

    $('.slider-single').on('afterChange', function (event, slick, currentSlide) {
        $('.slider-nav').slick('slickGoTo', currentSlide);
        var currrentNavSlideElem = '.slider-nav .slick-slide[data-slick-index="' + currentSlide + '"]';
        $('.slider-nav .slick-slide.is-active').removeClass('is-active');
        $(currrentNavSlideElem).addClass('is-active');
    });

    $('.slider-nav').on('click', '.slick-slide', function (event) {
        event.preventDefault();
        var goToSingleSlide = $(this).data('slick-index');

        $('.slider-single').slick('slickGoTo', goToSingleSlide);
    });
    jQuery(".grouped-product .color-contain-group .color-group .color-name a").click(function (e) {
        jQuery(".color-contain-group .color-group .color-name").removeClass("active");
        jQuery(this).show();
        jQuery(this).parent().addClass("active");
        jQuery("div[data-id]").removeClass("active");
        jQuery("div[data-id='" + jQuery(this).attr("href").replace("#", "") + "']").addClass("active");
        jQuery('.slider-single').slick('refresh');
        jQuery('.slider-nav').slick('refresh');
        e.preventDefault();
    });

    jQuery(".size-contain-group .size-group .info .list-size a").click(function (e) {
        e.preventDefault();
    });

    jQuery('.size-contain-group .size-group .info .list-size .size-name').click(function(){
        jQuery(this).addClass('active');
        jQuery('.size-contain-group .size-group .info .list-size .size-name').not(this).removeClass('active')
    })
})

Explanation:

• $('.slider-single').slick({ }): to create a slider for the elements that have the .slider-single class. They are product images that I set to display in a large size.
• $('.slider-nav'): to create a slider as well. The elements which have the .slider-nav class are product images which I set to display in the thumbnail size.
• .on('init', function (event, slick) { }): to identify which thumbnail is in the current slide. And, that thumbnail will be added a class as “is active”.
• $('.slider-single').on('afterChange', function (event, slick, currentSlide) { }): to trigger the event that someone clicks on the large image to move to the other one, then the thumbnail slider will be changed to the corresponding thumbnail.
• $('.slider-nav').on('click', '.slick-slide', function (event) { }): to trigger that event when someone clicks on the thumbnail slider. Then, it also displays the corresponding large image in the large slider.
• jQuery(".grouped-product .color-contain-group .color-group .color-name a").click(function (e) { }): to trigger when someone clicks on a product color using the A tag we added in the view.
• jQuery(".color-contain-group .color-group .color-name").removeClass("active"); jQuery(this).show(); jQuery(this).parent().addClass("active"): to remove the active class from the unselected color and add it to the selected one.
• jQuery("div[data-id]").removeClass("active"); jQuery("div[data-id='" + jQuery(this).attr("href").replace("#", "") + "']").addClass("active"): to remove and add the active class to all the elements that have the value of the data-id attribute as the name of the color. It means that when you click on a color, all the corresponding information of that variation such as price, size, status, and image gallery will be displayed.
• jQuery('.slider-single').slick('refresh') and jQuery('.slider-nav').slick('refresh'): to refresh both sliders to load new images.

Declare the JS and CSS Files

Now, add code inside the function custom_enqueue_files() in the plugin.php file.

wp_enqueue_style('slick', plugin_dir_url(https://medium.com/__FILE__).'/assets/css/slick.css');
wp_enqueue_style('slick-theme', plugin_dir_url(https://medium.com/__FILE__).'/assets/css/slick-theme.css');

wp_enqueue_script('custom', plugin_dir_url(https://medium.com/__FILE__).'/assets/js/custom.js', ['jquery']);
wp_enqueue_script('slick-min', plugin_dir_url(https://medium.com/__FILE__).'/assets/js/slick.min.js', ['jquery']);
wp_enqueue_script('script', plugin_dir_url(https://medium.com/__FILE__).'/assets/js/script.js', ['jquery']);

Now, the product images have already turned into a slider but we cannot see all the information of each variation in the right place.

Step 5: Style the Product Page

Traditionally, you have to add CSS to the Customizer or the theme’s file. But, with MB Views, you have a CSS tab for it.

There are many classes I used in this code. You can refer to all of it on Github.

Now, back to a single product page, it turned into a new look. When you choose a color, the photo gallery will automatically change according to that color. At the same time, the sizes and prices also change correspondingly.

Last Words

As you see, displaying the product variations on the single product page with Meta Box and custom field is not something difficult. If you use another page builder, keep track of our blogs for more upcoming tutorials. If you are confused or have any ideas, let us know by leaving a comment. See you next blog!

— — —

The publication at Meta Box.

How to Display Product Variations — P1 — Using Meta Box and Gutenberg was originally published in Meta Box on Medium, where people are continuing the conversation by highlighting and responding to this story.

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.

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.

• MB Custom Post Type & Custom Taxonomies: this is a free Meta Box extension that helps create custom post types. You can also download it from wordpress.org;
• Meta Box Builder: this Meta Box premium extension provides you with an UI to create and configure custom fields in the back end. If you don’t want to use this premium extension, you can code manually or use this free Online Generator tool to generate code.

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

Video Version

https://youtu.be/2TndR67aQQk

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.

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.

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.

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

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.

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

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.

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.

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

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.

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

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.

Now, all the names of restaurants are shown here.

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.

Then, 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.

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.

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

Add this below code to the box.

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

?>

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.

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.

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.

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.

Add Classes for Elements

I add some classes for elements. They will be used in the next steps for styling.

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.

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(https://medium.com/__FILE__).'/assets/css/slick.css');
wp_enqueue_style('slick-theme', plugin_dir_url(https://medium.com/__FILE__).'/assets/css/slick-theme.css');
wp_enqueue_script('custom', plugin_dir_url(https://medium.com/__FILE__).'/assets/js/custom.js', ['jquery']);
wp_enqueue_script('slick-min', plugin_dir_url(https://medium.com/__FILE__).'/assets/js/slick.min.js', ['jquery']);

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

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.

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?

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!

— — —

The publication at Meta Box.

Display The Latest Products Section — P3 — Using Meta Box And Oxygen was originally published in Meta Box on Medium, where people are continuing the conversation by highlighting and responding to this story.

In the previous part of the series “How to display the Latest Products section in different ways”, 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 Elementor.

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:

Now, let’s start!

Before Getting Started

To do it, we need Elementor first. Here I use Elementor Pro which has integration with Meta Box. You also need other tools as follows:

• Elementor Custom Skin: It provides the Loop template to display the listing of posts.
• Meta Box core plugin: This is the framework to create custom fields and custom post types. It’s free on wordpress.org, so you can download it directly.
• MB Custom Post Type & Custom Taxonomies: This is a useful extension of Meta Box. It helps you to create new custom post types. You also can download it free on wordpress.org.
• Meta Box Builder: This premium extension of Meta Box provides a UI in the back end to create and configure custom fields without using code.
• Meta Box — Elementor integrator. This extension allows you to get data from custom fields created by the Meta Box plugin in the templates of Elementor.

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.

Video Version

https://youtu.be/KvYfEO-X4OA

Step 1: Create a New Custom Post Type

Go to Meta Box > Post Types > New Post Type.

After publishing it, a new menu appears.

Step 2: Create Custom Fields for The Custom Post Type

Go to Meta Box > Custom Fields > Add New. 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 Online Generator.

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.

For the Status and Voucher fields, I added the options in the Choices section like this:

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

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

Step 3: Create a New Template

Go to Templates > Theme Builder.

We will have a list of products, so we should choose the template as a loop. This option is available when you have Elementor Custom Skin.

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

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

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

Next, I add the Featured Image widget into the Inner Section.

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

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

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

Here I set the logo size as Thumbnail to scale down the image.

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

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

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

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

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

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 Post widget to here.

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

Then, select the Default Template as the template which we have just created.

Next, in the Query section, choose the source as the post type of your products.

Now, the preview shows the posts with exactly the information we want. And the products are in the time order: the latest post first, then the older one without any further configuration.

We will style this section in the next step.

Step 5: Set CSS Classes for the Elements

Before styling my latest restaurants section on the homepage, I set CSS classes for each element in the Advanced tab.

This step is so easy, but it will help in the next steps.

Step 6: Create Slider for The Latest Products Section

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 My Custom Functionality plugin, so when I change the theme, the slider won’t be affected. You can download this plugin from GitHub and install it on your website.

Download the JS and CSS Library

For the JS and CSS, I use the Slick library. It is also available on GitHub. It includes several files as you can see here. But, we just need three of them.

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

Set Up The Slider Effect

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

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: '<button class="next-btn">Next</button>',
        prevArrow: '<button class="prev-btn">Previous</button>'
    });
    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');
        }
    });
})

Explanation:

• jQuery(".list-restaurant .ecs-posts").slick({}): We use it to create a slider with the Slick Slider’s style for the elements in the .list-restaurant .ecs-posts class;
• jQuery('.status-res .elementor-text-editor').each(function () {}): It will create a dynamic class depending on the returned values of the restaurant’s status in the section that I put in the status-res class. If the returned value is open, the class will be open. In return, the value is close, the class will be close.

Declare the JS and CSS Files

Go to the plugin.php file and add this code into the custom_enqueue_files() function:

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

Now, go to the homepage, my latest restaurants section has already turned into a slider.

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

Step 7: Add CSS to Style The Latest Products Section

Back to the Template we’ve just created. In the Navigator, choose the Section element that includes all the elements of the posts we show on the Latest Products section. And move to the Advanced tab > Custom CSS and add code to the box.

I uploaded the code to GitHub, so you can try it.

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

Last Words

As you see, displaying the Latest Products section on the front end in time order with Meta Box and Elementor is so intuitive. 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.

— — —

The publication at Meta Box.

Display The Latest Products Section — P2 — Using Meta Box and Elementor was originally published in Meta Box on Medium, where people are continuing the conversation by highlighting and responding to this story.

Category Thumbnails may familiar with someone using a theme that supports this feature. However, for someone who loves something highly customized, you might create it yourself. So, today I bring you a simple solution to not only have this feature but also have beautiful featured images on Archive pages as well. Especially, it may be a good way to have high-quality images without slowing your website loading speed.

This is my example for the tutorial today:

Category Thumbnails (look at the Top Destinations section at the bottom)

A Category Featured Image on an Archive page

Do they worthy for you to try? Let’s go!

Video Version

https://youtu.be/pFgElK8pvn0

Before Getting Started

As the title of the post, I will use custom fields. Of course, Meta Box is on the list. Along with the core framework, which is free on wordpress.org, we also need the following extensions:

• Meta Box Builder: provides UI to create custom fields;
• MB Term Meta: allows to create custom fields for categories or taxonomies;
• MB Views: in this tutorial, we will use this extension to create a shortcode to display category thumbnails;
• MB Custom Post Types & Custom Taxonomies: (optional) you need this extension when you are creating thumbnails for custom taxonomies of a custom post type. Please be noticed that if you are looking for something for taxonomies, please wait for the next tutorial. This tut is for Category only.

These all extensions are available in the Meta Box AIO, which the Developer and Lifetime licenses included.

Create Custom Fields for Saving Image

After activating the Meta Box Builder, you will have a UI to create custom fields right from the Admin Dashboard.

Go to the Custom Fields menu then create a new field group. Here I created two fields. One is URL to save URL. And, one is Single Image which allows you to upload an image to the media library.

There is no special in settings of them. In case you haven’t been familiar with creating custom fields using Meta Box, we have a video tutorial on it.

https://youtu.be/_DaFUt92kYY

You can choose to use one of these fields or both like I did here. It doesn’t matter. The URL field allows you to put links from any website so that your site will not carry those images. Otherwise, the single image field allows you to upload images to the media library. They may have a faster loading speed. But, if you have a significant number of categories or you need high-quality images, that sounds not good for your server.

One more thing, you must pay attention to the IDs of the fields. We will use them in the next steps. So, let it be something easy to recall and distinguish.

In the Settings tab of the field group, remember to set the Location as Taxonomy and Category to assign these fields for Categories.

Then, go to a Category Editor page, you will see the fields. I filled in the URLs for all the categories instead of uploading images.

Display List of Categories with Thumbnails in the Frontend

We will need support from the MB Views for this task. Go to Views and create a new view.

In the Template tab, I used this code:

{% set args = {hide_empty: false} %}
{% set categories = mb.get_categories( args ) %}
<div class="thumbnail-images">
    {% for category in categories %}
        <div class="item">
            <div class="overlay-thumbnail-categories"></div>
            <div class="category-title"><a href="{{ mb.get_category_link( category.term_id ) }}">{{ category.name }}</a></div>
    {% set image_upload = mb.get_term_meta( category.term_id, 'thumbnail_images_category', true ) %}
    {% set image_url = mb.get_term_meta( category.term_id, 'url_images_category', true ) %}
    {% if image_upload %}
        {% set image_upload_link = mb.wp_get_attachment_image_src( image_upload, 'medium' ) %}
        <img src="{{ image_upload_link[0] }}">
    {% elseif image_url %}
        <img src="{{ image_url }}">
    {% else %}
        <img src="http://demo1.elightup.com/test-metabox/wp-content/uploads/2020/11/oriental-tiles.png">
    {% endif %}
        </div>
{% endfor %}
</div>

In there:

• get_categories( args ): to know which category is getting data;
• <a href="{{ mb.get_category_link( category.term_id ) }}">{{ category.name }}</a>: to get the link of the corresponding category by ID. At the same time, display the category name and hyperlink it;
• get_term_meta (): to get values of the fields from the corresponding category by category.term_id. 'thumbnail_images_category' and 'url_images_category' are IDs of fields;
• wp_get_attachment_image_src (): to get the link of the uploaded image of the corresponding category;
• <img src="{{ }}">: to display the image by the link assigned to the variable.

In the event that I did neither insert a link nor upload an image, the last line of code will display a default image.

This view will be set in the type of Shortcode so that it will auto-generate a shortcode. You can use this shortcode to easily display the list of the category with thumbnails everywhere you want. It seems like simplify the process a lot.

Paste the shortcode to my homepage.

Then, here are the thumbnail images and titles of the categories on the homepage.

Back to the view, add some code to the CSS tab to style this section.

Here is the code I used:

body {
    overflow-x: hidden;
}

.thumbnail-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}
.overlay-thumbnail-categories {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    border-radius: 20px;
    background-image: radial-gradient(ellipse, rgb(0 0 0 / 63%), rgb(0 0 0 / 55%), rgb(0 0 0 / 50%), rgb(0 0 0 / 42%), rgb(0 0 0 / 35%), rgb(0 0 0 / 20%));
}
.item {
    width: 31.5%;
    position: relative;
    margin: 10px;
    align-content: space-between;
}
.item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 20px;
}
.category-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    font-family: 'Dancing Script', cursive;
    font-size: 30px;
}
.category-title > a {
    text-decoration: none !important;
    color: #f0a030;
}

All the above classes are created in the code which I put into the Template tab.

After that, the Top Destinations has a new better look. You see!

Display the Featured Images for Categories on Archive Pages

This is an Archive page before adding the featured image.

We need to touch the theme file to display the images from the fields to the top of this page. Go to the archive.php file. It is the template file for the archive pages.

Add this code after the header and the first div tag.

<?php
    $categories= get_the_category();
    $background_image = get_term_meta( $categories[0]->term_id, 'thumbnail_images_category', true );
    if ($background_image) {
        $link_image = wp_get_attachment_image_src( $background_image, 'full' );
        $link_image_source = $link_image[0];
    }
    else {
        $link_image_source = get_term_meta( $categories[0]->term_id, 'url_images_category', true );
    }
?>
<div class="thumbnail-container">
    <img class="thumbnail-cat" src="<?php echo $link_image_source ?>">
    <div class="thumbnail-overlay"></div>
</div>

In there:

• get_the_category(): to know which archive page the user is;
• get_term_meta (): get the value of the field;
• 'thumbnail_images_category' and 'url_images_category' are IDs of the created custom fields;
• wp_get_attachment_image_src (): to get the link of the uploaded image;
• src="<?php echo $link_image_source ?>: to display the image from the link which is the value of the $link_image_source variable.

Then, the featured image will display as below:

Go back to the theme files, add some CSS code to style this section, including the featured image, the category title, and the description.

.thumbnail-container {
    position: relative;
}
.thumbnail-cat {
    width: 100%;
    height: 85vh;
    object-position: 100% 70%;
    object-fit: cover;
    display: block;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 80%);
}
.thumbnail-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.63) , rgba(255, 255, 255, 0));
}
.page-title.ast-archive-title {
    margin-top: -3.5em;
    font-weight: 500;
    font-family: 'Dancing Script', Cursive;
    color:#f0a030;
}
.ast-archive-description > p {
    font-size: 17px;
    font-style: italic;
}

So now, it turns to this look:

That’s all for today’s tutorial. What do you think?

Last Words

FYI, if you want to apply thumbnails or featured images for taxonomies of a custom post type, even with the different website builders, the solution is quite the same. Most cases will be easier when you have MB Views. We’re having a comprehensive tutorial on it in the upcoming post. Keep track of our blog to get its notice soon!

Furthermore, if you have any suggestions, let us know. We’re so happy to have any idea from you!

— — —

The publication at Meta Box.

How to Create Category Thumbnails & Featured Images Using Custom Fields was originally published in Meta Box on Medium, where people are continuing the conversation by highlighting and responding to this story.

When WordPress 5.0 was introduced at the end of 2018, the familiar Classic editor of WordPress was replaced by a new one called Gutenberg. This new editor is a significant change in creating content on WordPress websites by using blocks instead. But that’s just the beginning.

Do you remember the four phases of Gutenberg?

1. Easier Editing — already in Core, refinement is ongoing
2. Customization — Full Site editing, Block Patterns, Block Directory, Block based themes
3. Collaboration — A more Google Doc co-authoring;
4. Multi-lingual — Core implementation for Multi-lingual sites.

After nearly 3 years, it is likely that Gutenberg gradually completed phase 2 by releasing the most important feature — Full Site Editing in WordPress 5.8 on July 20th, 2021. In fact, it was first introduced in early 2020 via an experiment program.

What is Full Site Editing?

Full Site Editing (FSE) is a concept referring to the ability to build an entire website based on using blocks. Actually, it is a collective term for a set of new WordPress features that are under development: Block themes, Template editing, and Global styles.

With FSE, there is no need to move back and forth between Customizer, Widget, Menu, … to customize your website anymore. It provides a place named Site Editor to do all the things those sections do. It means that you can create all pages or all your website from only one place. And with FSE, website building becomes so simple, just drag and drop blocks.

In the future, sections like Customizer may also no longer exist on WordPress. Instead, blocks will be everywhere, not only in the content area as ever before.

WordPress users probably need to change their habits. No matter who you are, a developer, a designer, a theme or plugin author, or just a user, you should follow this trend.

Common concepts of Full Site Editing (FSE)

Blocks

Blocks have not been strange anymore since Gutenberg was born. They can be paragraphs, images, videos, audios, … in a post. You can drag and drop to move and arrange them in order or columns, even groups.

Now, blocks have more useful features in FSE. You can use them to create global elements such as site logo, tagline, header, footer, menu, sidebar, etc. Blocks are no longer a part of the content only but gradually become primary sections to build a complete WordPress website.

Whether Blocks for content or creating websites, they allow you to create both static and dynamic content. For dynamic content, Block will display the corresponding content to different users or in different positions, … as any rule you set. For example, this Query Loop Block displays a list of blog posts or CPT.

Block Patterns and Reusable Blocks

Block Patterns group different blocks together in a complete layout. It means that all these blocks have been created, arranged, formatted, configured, … then combined into a defined and refined sample that can be used immediately.

You can save Block Patterns for reuse later on both posts and pages. Therefore, you can create complicated sections of content for posts or pages with just a few clicks. So easy!

When applying a Block Pattern, you can edit its content or settings without affecting other sections created before from it.

Almost similar to Block Patterns are Reusable Blocks. Users can create a block with predefined content and settings, then save it to reuse. Such blocks are called Reusable Blocks. However, for this type of block, once you change it from a page, it will lead to the changes of all these blocks on the website. This is slightly different from Block Patterns.

It is recommended to combine Block Patterns and Reusable Blocks for more convenient and optimal use, not just using either.

Templates / Block Templates

As we know, a WordPress website can have various templates, and each one is a separate file. Template Hierarchy decides which template or set of templates should be used to display the page.

Templates have been in the form of PHP files so far. But now HTML is used in FSE. The content of template files now is a list of block items, so they are called Block Templates.

A template of a traditional theme would have this structure:

├── theme-name
│ ├── template-parts
│ │ ├── content.php
│ ├── templates
│ │ ├── template-cover.php
│ │ ├── template-full-width.php
│ ├── index.php
│ ├── style.css

An FSE theme would have this structure:

├── theme-name
│ ├── block-template-parts
│ │ ├── header.html
│ │ ├── footer.html
│ ├── block-templates
│ │ ├── index.html
│ ├── index.php
│ ├── style.css

User-Defined Template

Users can create their own templates from the Site Editor thanks to FSE. They can see live changes on the website when doing so. So that, they will not need to create any child theme, touch code, or hire a developer as they used to.

In particular, these user-defined templates will be saved to the database as a custom post type named wp_template. Thus, they can be exported and imported into another website for reusing. It is so convenient to use the same templates if you have a bunch of websites.

Block Themes / Block-Based Themes

“A block theme is a WordPress theme with templates entirely composed of blocks so that in addition to the post content of the different post types (pages, posts, …), the block editor can also be used to edit all areas of the site: headers, footers, sidebars, etc.” — Gutenberg Handbook.

Note: From the early days of the experiment, Block Themes were called Block-Based Themes, so you may see this name somewhere.

For instance, the TT1 Blocks theme is a Block Theme version of Twenty Twenty-One. It has the following file structure:

You can see that the core of these block themes will be block templates and block template parts. And, of course, they all are in the form of HTML files. These sections keep the same concept as in the traditional themes. But, the Block Template Parts are separated into individual modules because they will appear more than once in different templates.

Currently, there are not too many block themes, and most of them are trials. You can refer to:

• TT1 Blocks
• Twenty Twenty Blocks
• The Q theme
• Block-based Bosco

Global Styles

Global Styles has been integrated into the Site Editor. You can change the website appearance by editing every element of the entire website in Global Styles such as color, size, typo, background, etc., or choose the style by each block type without access to each page or Customizer.

That’s why it is reckoned that Customizer will be omitted in the future because Global Styles can replace it.

An interesting thing is that we will use theme.json file to create options in the Global Styles panel. It is a configuration file located in the root directory of the theme and used to create presets. If you have an intention of developing a block theme, learn more about theme.json here.

How to experience Full Site Editing (FSE)

Do you want to try FSE? It is essential to know that although WordPress 5.8 has FSE, it hasn’t included all the existing FSE features yet. You need to use the MVP version if you want to experience more.

The MVP is offered via the FSE Outreach Program. You can join it to update and early experience the new versions. To test FSE, you will need the following:

• Recommend the local install;
• WordPress, versions from 5.7.1;
• A block theme (choose one from the above list);
• The Gutenberg plugin, versions from 10.5;

After installing, you will see the Site Editor (beta) menu in your Dashboard.

Let’s start to dig into FSE.

FYI, you can also refer to the below tutorial video to see FSE in practice and experience of other developers in the community:

• Enrique Piqueras: Themes and the Full Site Editing experience for WordPress (experimental) (23/01/2020);
• Kjell Reigstad: Block-Based Theme / Full-Site Editing (26/06/2020);
• Joen Asmussen: Demo of the Site Editor at State of the Word (17/12/2020);
• Kjell Reigstad: Introduction into block-based Themes (20/01/2021).

If you want to share your experience about FSE, join the FSE Outreach Program, Github, or #fse-outreach-experiment on Slack.

Personal Thoughts About FSE

By releasing FSE, it seems that WordPress is tending to cater to a larger group of users who are non-coding. WordPress is gradually simplifying the website building process with simple drag and drop operations and no touching code so that anyone can use it.

There were quite a few barriers in customizing whether they were tiny edits on separated blocks or the website. Now, FSE helps WordPress users to create layouts in a much more flexible and convenient way.

As for website implementers, this will probably be a prominent competitive advantage of WordPress compared to other platforms on the market such as Wix, Weebly, or Squarespace.

How about designers and agencies? They will have more time creating designs with better UI/UX, more unique, more conformity with the customer requirements. Quite a lot of benefits, alright?

For those who make themes or plugins like me, FSE is likely to be a little disadvantaged. It solves most of the tasks done by theme developers. Meanwhile, plugins also may change to be compatible. However, in fact, I am not too worried about this change at all. FSE is just in the early stages. There will be more time for us to learn, adapt, and gradually change the products. So, stay tuned, keep updating further information, and reading the documents related to FSE.

Last but not least

I hope that this article will help you have a better overview of the upcoming trends in WordPress as well as understand Full Site Editing (FSE). Since this project is still under development and testing, I will regularly update news about it on this blog.

This is such an interesting topic that lots of people pay attention to, so I’ll not stop here. I’m going to have more in-depth articles on comparing and evaluating the efficiency and speed of websites when using Gutenberg, or resources related to block themes. Keep track of our blogs!

— — —

The publication at Meta Box.

Full Site Editing (FSE) — All You Need To Know — P1 — Overview was originally published in Meta Box on Medium, where people are continuing the conversation by highlighting and responding to this story.

Sometimes you may need a button that can show different links in different posts. That’s a button with dynamic link. There are different ways to create it, one of them is using custom fields. Links will be saved into custom fields then pulled out and put into the button automatically. And, that’s where the Meta Box plugin comes in handy.

For instance, I have a website about theme reviews here. Each post about a theme has buttons to their own demo and download pages. They are dynamic links.

Let’s find out how to create those buttons.

Before Getting Started

As I said, Meta Box is the first tool we put on the list.

If you love UI, Meta Box Builder is the next one for having UI on the dashboard. It’s available in the Meta Box AIO or MB Core, so if you’ve had one of them, just check to make sure that you’ve already enabled the Meta Box Builder extension.

If you are using Elementor or Beaver Builder, please activate the corresponding integration from Meta Box. For others as Oxygen or Bricks, just go ahead.

In the event that you don’t use any website builder, you may need MB Views.

I’m going to have a comprehensive tutorial for both non-using-page-builder and using page builders such as Oxygen, Beaver Builder, and Bricks as following.

Video Version

https://youtu.be/8sD-Lyy6-5c

Create Custom Fields for URLs

First, we need custom fields for saving URLs for each post. If you’ve had Meta Box Builder in your pocket, you will have a UI on the backend to create custom fields visually. Otherwise, please go to the Online Generator, create fields, generate code, then copy it to get the fields.

They are quite simple with type is URL and there are no special settings.

After having these fields, please go to post, input some links. That way you will have data to check if the buttons work.

Create Buttons Without Using any Page Builder

For someone who is not using any page builder on their site, this part may help. MB Views from Meta Box will help to create a button easier with a shortcode.

Just go to Views and create a new view with this code:

<a class="wp-block-button__link" href="{{ post.view_demo }}">
    View demo
</a>
<a class="wp-block-button__link" href="{{ post.download }}">
    Download
</a>

In there, view_demo and download are the IDs of the custom fields that we’ve created above. By the way, because I’m using the eStar theme, so I must use the wp-block-button__link class to create buttons.

The view will generate a shortcode as you see in the below image. Just copy and embed it somewhere.

For instance, I pasted it to a sidebar on the single blog post page and got these buttons.

Note that this look of the button is from the theme default.

Create Buttons with Dynamic Link using Oxygen

I’ve already pre-made a template using Oxygen. It is applied to blog posts.

I will add two buttons right under the featured image of the post. However, before creating any button, we need to set a container for them.

Now, add a button. At the end of the URL section, there is a button linked to dynamic data. Click it, then choose Meta / Custom Field in the Post section. Next, Scroll your mouse until you find out the ID of the wanted field to connect to the button.

The remaining thing to do is styling the button as you want.

I also created another one with a new style and linked it to another field. And, here they are in a post, with links.

Create Buttons with Dynamic Link using Beaver Builder

On another website, I also have a pre-made template by Beaver Builder with the same location and style as the one made by Oxygen. The buttons also will be under the featured image.

I also add columns to set the layout first, then add a button. There is also a Link section for inserting a static link in the button’s settings. But, to get the URLs from Meta Box fields, please click the plus icon.

You will see the Meta Box Field option in the drop-down list. Choose it by clicking Connect.

Then, choose the name of the field you want.

The last thing, style your button. That’s all.

To have another button, you can duplicate this one to save time, then reconnect it to another field as well as restyle it.

Now, go to a post, you will see the buttons with links.

Create Buttons with Dynamic Link using Bricks

The last website builder in this tutorial is Bricks with the same template and position for buttons. In the same way, add a container with 4 columns first then buttons.

Different from other page builders, Bricks allows you to choose the type of link on a dropdown list. To get data from custom fields of Meta Box, please choose Dynamic Data.

After that, you will see Meta Box is suggested with the name of custom fields following. Choose one as we want.

Bricks will render a corresponding link to this preview post that you can check if the data is correct.

After that, all the work is styling.

Then, I’ve got an ace button in the preview. Let’s duplicate it to have a new one. I’ll change the data’s source and restyle this new button.

Finally, here they are on a post.

Last Words

These are just small tips for creating buttons with dynamic links. By the way, we also hope that you know somewhat how to connect custom fields created by Meta Box to a page builder element. Do you find it work for you?

If you have any questions, please feel free to leave us a comment below. And, remember to keep track of our blog to have more tutorials.

— — —

The publication at Meta Box.

How to Create Buttons with Dynamic Link using Custom Fields was originally published in Meta Box on Medium, where people are continuing the conversation by highlighting and responding to this story.

Technology has been applied more and more popularly, even in education, and led to obvious changes in this special field. Notably, when the Covid-19 pandemic broke out and caused serious impacts on our lives, education institutions mostly started online teaching classes. As a result, school admission also can be done online. Students do not need to go to schools to hand in their profiles anymore. They can stay at home, and fill in their online admission forms. This can save expenses for traveling and delivery, as well as reduce risks of exposure. On the other hand, it helps the school office easily digitize the student’s data.

In this post, we are going to create an admission form for a university like that.

Please be informed that every picture or information used in this tutorial is just for the illustration purpose. It’s not about any specific individual or organization.

Before Getting Started

An admission form usually has a lot of custom fields to be filled in, so I definitely need Meta Box to make a submission form. I also need these extensions:

• MB Custom Post Types & Custom Taxonomies;
• Meta Box Builder;
• Meta Box Group;
• Meta Box Columns;
• Meta Box Geolocation;
• Meta Box Conditional Logic;
• MB Frontend Submission;
• MB Views.

All of these extensions are available in Meta Box AIO when you have Developer Bundle or Lifetime Bundle of Meta Box. We will need a lot of extensions so I suggest you get either of those bundles to save money.

Video Version

https://youtu.be/4m64-vrYW5A

Step 1: Create a New Custom Post Type

I will save the information of each student in one post of a new post type, which can be called Student Info.

To create this post type, we will need the MB Custom Post Types & Custom Taxonomies extension of Meta Box. Go to Meta Box > Post Types > Add New and enter the information for your new post type.

https://youtu.be/-oYrHGOri4w

Step 2: Add Custom Fields for the Admission Form

Content and the Type of Fields

Regularly, an admission form may have a lot of fields for students to fill in, like personal information, address, contacts, family information, choice of major, medicine information, etc. It is up to the management strategies and demands of each school or university.

Here I just add some basic fields like in the above image. Most of those fields are the Text or Number fields. In some special others, they might be a little different. If you want to know more about adding custom fields, please take a look at this:

https://youtu.be/_DaFUt92kYY

After adding all of them, you can add a new post in the Student Info post type, and you will see they look like this:

If you keep this layout for the fields, each field will be a line on the frontend as the same as you see here. I think it is not appropriate, because people will find it difficult to follow and manipulate.

Thus, I will adjust a little bit by grouping the fields and setting them into columns.

Set Custom Fields into Groups and Columns

To arrange the fields into the layout that I want, I will need Meta Box Group and Meta Box Columns extensions. Meta Box Group can help me group the fields, and Meta Box Columns helps me to divide columns.

The rule of dividing columns is: a horizontal line will be divided into 12 grids. In the settings section of each field, you can set up this size.

If you set this section as 9, it means this field will be displayed in 9 grids.

Meta Box will arrange fields into a line so that their size is not more than 12 in total.

Note: Group is also a field, so its size will be set up like those of the other fields. Besides, a line inside the group also is divided into 12 grids.

To make it clearer, I draw on the form as below:

Now, my custom fields will show up in the post editor with the new look:

Special Settings of Custom Fields

I want the student to find the admission form more professional, so I added some special custom fields. They are all available features of Meta Box or its extensions like Meta Box Geolocation, Meta Box Conditional Logic.

Let’s go to see it!

Settings of the Maps Field

In the settings section of the Maps field (Open Street Maps), you need to fill in the ID of the Address field in the Address field section. This is compulsory. If you miss it, an error alert will show up.

To make the Open Street Maps work, go to the Settings tab of the field group, scroll down to Custom Settings > Add New, enter geo as the key, and true as the value.

Please go to the documentation for more information about this field type.

Settings of the Building, Road, State, Country, Post Code Fields

I set the ID of the Building, Road, State, Country, Post Code fields as building, road, state, country, and postcode respectively.

Why? Because when you have set up the Maps field like above, if students write their information in the Address field, the data of state, country and postcode will be automatically imported to the corresponding fields. This is a feature of the Meta Box Geolocation extension.

The information has just been automatically filled in, so I set the fields as Read only, and students will not have to fill in by hand and make mistakes. It is up to you. If you do not want to do like me, that’s fine.

Settings of the Fields in the Program / Course Information Section

The list of courses is quite long and divided into many different majors as well, so I will use Meta Box Conditional Logic to set when the fields show up. This will make the form clearer and more professional.

For example:

The Program Type field has 3 options and 3 values respectively:

• undergraduate_program: Undergraduate Program
• postgraduate_program: Postgraduate Program
• phd_program: PhD Program

I will set conditions for Undergraduate Programs, Postgraduate Programs, and PhD Program fields to show up only when students choose the corresponding option in the Program Type field.

So, in the Advanced settings tab of the Undergraduate Programs field, scroll down to the Conditional logic section, choose Add Rule, and set up like this:

Here we have:

• program_type: the ID of the Program Type field
• undergraduate_program: the corresponding value of the Undergraduate Program option in the Program Type field.

Do likewise with the other two fields. You just need to change the values of the options in the Conditional logic section.

Besides, you can see the Postgraduate Programs have two small options, which have different majors. Thus, I also add a new field for each of the groups. At the same time, I set up the same kind of conditions for them.

Finally, you will see all my custom fields show up like this:

Step 3: Show the Admission Form to the Frontend

Now, we need a blank page on the frontend (I named it Admission Form), and then put the form with all of the fields we have made on this page.

Besides, I got an interesting idea. This page will look like a paper of admission form with a school logo, so it does not have the website footer or header. Thus, today we will do a new way to show the form to the frontend. It will be a little different from how we used to do it (as you may see in the How to Create an Auto-Updated Cheat Sheet).

I will use the MB Views extension of Meta Box to add content for this admission form page.

Go to Meta Box > Views > Add New.

First, scroll down to the Settings section to set up for this view. Set Admission Form is the page we want in the Location section.

In the Template section, I will add some codes:

<div class="form-header">
<!--// Put logo of the university to the header -->
    <img src="http://domain.com/wp-content/uploads/2021/05/Logo-1.png" style="width: 20%">
    <div class="form-header__right" style="text-align: right">
<!-- // Set H1 for page on the header -->
        <h1>University Admission Form</h1>
        <span>Student ID: ________ <i>(For office use only)</i></span>
    </div>
</div>
<!--// Display the field group using shortcode -->
[mb_frontend_form id='university-admission-form']

To get the shortcode of the field group, go to Meta Box > Custom Fields, you will see it. Notice that you must enable the MB Frontend Submission extension of Meta Box first. This extension will automatically generate the shortcode for you.

However, at this time, the shortcode will look like this:

[mb_frontend_form id='university-admission-form' post_fields='title,content']

I deleted the attribute post_fields='title,content' because I don’t want to show the Title and Content fields. To get to know more about the attributes of this shortcode, you can have a look at this documentation.

Now, let’s see how the field looks on the admission form page:

I think the display is not really stunning. I also want to hide both the default header and footer of the website. So, I will style it a little bit. But now, I add CSS codes into the CSS tab of the View that I have created for the Admission Form page.

body {
    background: #e6e6e6;
}
.page-template-wide .container {
    padding: 20px 12px;
    background: #fff;
}
.header, .footer {
    display: none;
}
.form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.form-header h1 {
    text-align: right;
}
.rwmb-heading-wrapper {
    background: #e6e6e6;
    text-align: center;
}
.rwmb-heading-wrapper h4 {
    border-bottom: none;
}
.select2-container--default .select2-selection--single {
    height: 42px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px !important;
}
.rwmb-image-item.attachment.estar-image-4x6 {
    width: 100%;
}
.rwmb-media-list:not(:empty) {
    padding: 0;
}
.rwmb-input-list.rwmb-inline, .rwmb-input-list {
    padding: 0;
}
[type="checkbox"], [type="radio"] {
    margin-right: .25rem;
}
.rwmb-input .description {
    margin-bottom: 0;
}
.address-group {
    opacity: 0.5;
}
.address-group input {
    pointer-events: none;
}

And this is my admission form page getting done. But, it’s not the end here!

Step 4: Set a Page for Reviewing Admission Form

I want to add something more to my admission form. Instead of saying thank you or notifying students for successful submissions, I expect they can review what they have written in the forms. For example, they can check student IDs (automatically shown and filled in the form), or even print the admission form pages out to save them or hand them in (if any).

Create a new page again, called Review Admission Form. After students fill their information in the forms, they will be redirected to this page.

To make the redirect link, I need to add some codes to the functions.php file of the theme:

add_filter( 'rwmb_frontend_redirect', function( $redirect, $config ) {
    if ( 'university-admission-form' !== $config['id'] ) {
        return $redirect;
    }
    $redirect = 'https://domain.com/review-admission-form/?student_id=' . $config['post_id'];
    return $redirect;
}, 10, 2 );

Here we have:

• 'rwmb_frontend_redirect': this hook allows you to change the URL of the page after students submit the form to another page;
• university-admission-form: the ID of the field group for the admission form we are using;
• https://domain.com/review-admission-form/?student_id=' . $config['post_id']: the structure of the redirect link we will use;

At that time, my redirect link will be in this form:

https://domain.com/review-admission-form/?student_id=12345/

For example, 12345 is the ID of the post that the student has just entered information into its custom fields.

Next, still in the functions.php file, I will add these codes:

function estar_get_method_function( $param ) {
    return isset( $_GET[$param] ) ? $_GET[$param] : '';
}

This code will get and return the value of the student_id variable from the redirect link. We will need this value right in the next move.

Then, create a new view in the Views section again. This view will be used for the new page that I will redirect to, the Review Admission Form page. It has the same content and style as the Admission Form page, so its view is the same as well, including template, settings, and CSS. The difference is the Location, which will be the Review Admission Form page at the moment.

In the Template section of this view, I’ll make a small change:

{% set pupil_id = mb.estar_get_method_function( 'student_id' ) %}
{% if pupil_id %}
    <div class="form-header">
        <img src="http://domain.com/wp-content/uploads/2021/05/Logo-1.png" style="width: 20%">
        <div class="form-header__right" style="text-align: right">
            <h1>University Admission Form</h1>
<!--        // Auto-generate the student ID -->
            <span>Student ID: {{ pupil_id }}</span>
        </div>
    </div>
<!--// Display the custom fields along with values in the corresponding post by post ID -->
    [mb_frontend_form id='university-admission-form' post_id="{{pupil_id}}"]
<!--// Add the Print button into the footer -->
    <div class="form-footer">
        <button onclick="window.print()" class="rwmb-button">Print</button>
    </div>
{% endif %}

Explanation:

As I have mentioned before, each admission form will be saved in a post of the Student Info post type. Thus, I have added the post_id attribute to the shortcode above, so that only the data from the custom fields of the corresponding post can show up.

Besides, I also created one more variable, pupil_id. This variable will recognize its value automatically thanks to the return value of the estar_get_method_function( 'student_id' ) function.

Additionally, the review page has a Print button instead of Submit, so that students can print their admission forms out. Thus, I added that button to the footer of the page, and add this CSS to hide the Submit button:

.rwmb-form-submit {
    display: none;
}

Try a test, after submitting information, the link is changed and the Student ID is generated as well:

Finally, this is my whole review page.

Last Words

I have finished my tutorial about how to create an admission form for school or university websites. What do you think? If you find some parts difficult to understand, please feel free to leave some comments for us.

More than that, I hope that this tutorial can be helpful for many people to make various kinds of admission forms like health declarations, hospital profiles, staff profiles, etc. It seems that a lot of industries will need to digitize their information and documents. Good luck to you guys!

— — —

The publication at Meta Box.

How to Create Online Admission Form for School or University was originally published in Meta Box on Medium, where people are continuing the conversation by highlighting and responding to this story.

It is now so popular that restaurants allow customers to make online reservation from their website. So, today, I am going to have a tutorial on how to create an online submission form for that. However, it allows customers to not only provide their information but also choose a set of food or private room in advance if they want to. Furthermore, even the total amount will be figured out in the form as well.

But, please note that we do not process the payment in this tutorial. Just show the number to let your customer know the amount they will be charged.

Before Getting Started

Along with the Meta Box core plugin from wordpress.org, what will we need? It’ll be these extensions or just Meta Box AIO from the Developer Bundle or the Lifetime Bundle. They are all available there, in the Meta Box AIO.

• MB Custom Post Types & Custom Taxonomies;
• Meta Box Builder;
• MB Frontend Submission;
• Meta Box Columns (optional);
• MB Admin Columns (optional).

Video Version

https://youtu.be/K6YfrQ3ZRLY

Step 1: Create a New Custom Post Type

Each reservation will be a post in this new post type. So, go to Meta Box > Post Types > New Post Type to create a new one.

We’ve had a video tutorial for post type configuring, please take a look.

https://youtu.be/-oYrHGOri4w

Step 2: Create Custom Fields for the Reservation Form

A reservation form usually includes general fields such as name, phone number, email, number of adults and children, date and time, table or room. However, as I said above, my form will have a field for choosing a set of food and show the amount.

There are some special and specific settings we should clarify here.

ID of the Full Name Field

I want the name of the customer to be the title of the post as well as the reservation, so I set this field’s ID as post_title.

The Options in the Set Lunch and Private Room Fields

These two fields are Select type, so they have the Choices section for entering the options.

You can see that on the left of the colon (:), I have the numbers. They are the price (USD) of the food set with the corresponding name on the right of the colon.

The same with the Private Room field. The price is on the left, and the name of the room is on the right.

Display Custom Fields as Columns in the Admin Screen

For management purposes, restaurant owners usually want to see all the reservation information right from the admin screen. Thus, I will display the custom fields of the form as the columns in the All Reservations screen.

When we’ve activated the MB Admin Columns extension already, there is a section available in the field’s settings that is Show as an admin column. Tick it and then some others will appear for further configuration.

Please be notified that you must choose an option in the Column position to complete the setting of the admin column.

Finally, remember to choose the Reservation post type as the Location in the Settings tab of the field group.

So now, go to the Reservations menu, you will see the columns as follow:

Step 3: Create the Reservation Page

My Reservation page will have a different look from the others on my website. So, I will create a new template for it. In the template folder of the theme, create a new file named reservation-page.php with this content:

<?php
/**
* Template Name: Reservation Page
*/
get_header();
if( have_posts() ) :
    while ( have_posts() ) :
        the_post();
        ?>
        <main id="main" class="site-main" role="main">
            <div class="col-left">
                <?php the_content(); ?>
                <div id="total1"></div>
            </div>
            <div class="col-right">
                <?php dynamic_sidebar( 'sidebar-1' );?>
            </div>
        </main>
        <?php
        endwhile;
endif;
get_footer();

In there, sidebar-1 is the ID of my pre-made sidebar.

I embed an iframe of Google Maps to pin the restaurant’s address on the map as well as add other contact information about the restaurant. It may help customers easier to find the restaurant location and contact them in some special cases.

After applying this template for the reservation page, it has this look:

Add the Reservation Form to the Page

After having the MB Frontend Submission extension activated, this shortcode will be auto-generated.

It normally is in form of this:

[mb_frontend_form id='reservation' post_fields='title,content']

I will remove the attribute post_fields to not display the Title and Content fields, and as the submit_button attribute as well. Then, paste this code to the content of the reservation page.

Now, here is the page with the form.

Prettify the Reservation Page

It’s a kind of a rough-hewn gem and needs some polish. So, try some CSS.

#reservation {
  width: 100%; }

.page-template-reservation-page .site-main {
  width: 100%;
  display: grid; }

.no-sidebar .main {
  margin: 0; }

.rwmb-label, .rwmb-input {
  width: 100% !important;
  padding-bottom: 10px; }

.rwmb-input input {
  width: 100%; }

.rwmb-input select {
  width: 100%; }

.page-template-reservation-page .site-main {
  width: 100%;
  display: grid; }

@media all and (min-width: 768px) {
  .page-template-reservation-page .site-main {
    grid-template-columns: 1fr 30%;
    grid-gap: 30px; } }

.eci-info {
  font-size: 16px; }
  .eci-info svg {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important; }

.rwmb-input-group-text {
  border: 0 !important; }

.rwmb-button {
  padding: 10px 25px;
  background: #ea0808;
  text-transform: uppercase; }

.calendar .rwmb-input, .adults .rwmb-input, .children .rwmb-input, .full-name .rwmb-input, .email .rwmb-input, .phone .rwmb-input, .book .rwmb-input, .black-tie .rwmb-input {
  position: relative;
  padding-bottom: 0; }
  .calendar .rwmb-input input, .calendar .rwmb-input select, .adults .rwmb-input input, .adults .rwmb-input select, .children .rwmb-input input, .children .rwmb-input select, .full-name .rwmb-input input, .full-name .rwmb-input select, .email .rwmb-input input, .email .rwmb-input select, .phone .rwmb-input input, .phone .rwmb-input select, .book .rwmb-input input, .book .rwmb-input select, .black-tie .rwmb-input input, .black-tie .rwmb-input select {
    padding-left: 40px; }
  .calendar .rwmb-input::before, .adults .rwmb-input::before, .children .rwmb-input::before, .full-name .rwmb-input::before, .email .rwmb-input::before, .phone .rwmb-input::before, .book .rwmb-input::before, .black-tie .rwmb-input::before {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 0px;
    bottom: 0;
    left: 0;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px; }

.calendar .rwmb-input::before {
  content: "\f073"; }

.adults .rwmb-input::before, .children .rwmb-input::before, .full-name .rwmb-input::before {
  content: "\f007"; }

.email .rwmb-input::before {
  content: "\f003"; }

.phone .rwmb-input::before {
  content: "\f095"; }

.book .rwmb-input::before {
  content: "\f02d"; }

.black-tie .rwmb-input::before {
  content: "\f27e"; }

.col-left, .col-right {
  background: #efefef; }

.col-left {
  padding: 10px; }

.col-right .eci {
  padding: 10px;
  margin-top: 0;
}

In there, reservation-page is the name of the template file. And, for styling the fields, I set classes for those fields in their advanced settings and use those classes in this code such as calendar, adults, phone, book, etc.

I’m using FontAwesome here, so I must enqueue it in the functions.php file. If you add the above CSS to the style.css file as I did, you also need to enqueue it as well.

function child_theme_scripts() {
    wp_enqueue_style('font-awesome', 'https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css', '', '4.7.0');
    wp_enqueue_style('estar-child-style', get_stylesheet_directory_uri() . '/style.css', false, '1.0', 'all');
}
add_action( 'wp_enqueue_scripts', 'child_theme_scripts' );

And now, the page turns to this look:

Step 4: Add Functions to Figure Out the Amount

The Amount field is $0 so far no matter what you change the information in the fields many times. To figure out the amount then apply the number into this field, we must use code.

Create a Formula for the Amount

In the functions.php file, I’m adding this code:

add_action( 'wp_ajax_total', 'text_domain_load_total_ajax' );
add_action( 'wp_ajax_nopriv_total', 'text_domain_load_total_ajax' );
function text_domain_load_total_ajax() {
    $adults = $_POST['adults'] ?? 1;
    $children = $_POST['children'] ?? 0;
    $set_lunch = $_POST['set_lunch'] ?? 0;
    $private_room = $_POST['private_room'] ?? 0;
    $total = ( $adults * $set_lunch ) + ( $children * $set_lunch /2 ) + $private_room;
    $total = '$' . number_format($total, 2, '.', ',');
    wp_send_json_success( $total );
    die();
}

Explanation:

• add_action (): is a hook to create an action named total;
• text_domain_load_total_ajax(): is the function to load the values of all the variables and then put them into the formula;
• $adults, $children, $set_lunch, $private_room: are the variables;
• $adults = $_POST['adults'] ?? 1: is to check if the adults variable has any value. If it has, the value will be admitted. Otherwise, this variable will be applied to the default value, in this case, it is 1. You can set the default value as you want;
• wp_send_json_success( $total ): is to return the value of the total variable in json.

Load the Values of the Variables

So far, no value has passed to any variable yet. All the variables are 0 or 1 as default value as I set in the above code.

Whenever customers change the option in the fields, the value of the options must be recognized and passed to those variables. To load those values, I need to create a script.js file in the js folder of the theme as follow:

(function($){
    $(document).ready(function(){
        $("#adults, #children, #set_lunch, #private_room").on( 'change', function(){
            var adults = $('#adults').val();
            var children = $('#children').val();
            var set_lunch = $('#set_lunch').val();
            var private_room = $('#private_room').val();
            console.log( set_lunch );
            $.ajax( {
                type: "post",
                dataType: "json",
                url : ReservationParams.ajaxURL,
                data: {
                    action: 'total',
                    adults: adults,
                    children: children,
                    set_lunch: set_lunch,
                    private_room: private_room
                },
                success: function(response) {
                    //console.log(response);
                    $('#amount').val(response.data);
                },
                error: function( jqXHR, textStatus, errorThrown ){
                    console.log( 'The following error occured: ' + textStatus, errorThrown );
                }
            } )
        } )
    })
})(jQuery)

You can see that I used ajax here to load the values. In there:

• #adults, #children, #set_lunch, #private_room: are the IDs of the custom fields in the reservation form;
• adults, children, set_lunch, private_room: are the variables using for the above formula, I’m assigning the values of the fields with the corresponding IDs to them;
• action: 'total': The values are being sent by ajax to this action with the url is url : ReservationParams.ajaxURL;
• success: function(response): if the request succeeds, this will call the value returned by the functions file then print to the custom field which has the ID as amount.

Enqueue the JS file and URL of AJAX

The formula hasn’t been run yet because we haven’t enqueued either the script.js file and the url of ajax. So now, add this code to the functions.php, inside the child_theme_scripts() function we have added before.

wp_enqueue_script( 'theme-script', get_stylesheet_directory_uri() . '/js/script.js', array( 'jquery' ), '1.0', true );
wp_localize_script( 'theme-script', 'ReservationParams', array( 'ajaxURL' => admin_url(https://medium.com/'admin-ajax.php') ) );

Note:

• 'theme-script': this name is the one you created, please pay attention that you must set it be the same in both lines;
• 'ReservationParams' and 'ajaxURL' are from url : ReservationParams'.ajaxURL, you can change them, but do it at both.

Finally, everything is done. Let’s have a test.

You also can see that my first reservation is in posts management as well.

Last Words

In fact, I have met just some cases that allow customers to order the food set and let them know the total amount in advance. I’m not sure that it is popular out there. However, it still is a good reference of operations in a submission form. I guess that you should have some variations when applying this tutorial, good luck!

— — —

The publication at Meta Box

How to Create Online Reservation Form for Restaurants using Meta Box was originally published in Meta Box on Medium, where people are continuing the conversation by highlighting and responding to this story.