How to Create a Simple Listing - P6 - Using MB Views

Continuing our series on how to create simple listing, where we've explored the way to build custom post listings using various page builders, this sixth part introduces a new approach only with Meta Box. It’s using MB Views.

This is my example with a list of restaurants:

Video Version

Before Getting Started

We will divide the page into 2 sections: one to display the products along with their information, and one for filters.

Each product (restaurant) will be saved in a post of a custom post type. The product’s name and image are the title and feature images of the post. Other information, such as status, address, and logo, will be saved in separate custom fields.

For the filters, it’s based on the voucher information that is created with custom taxonomy. Each one is a term of that taxonomy. When you click on a voucher, the corresponding restaurants will be shown.

So, we highly recommend you install Meta Box AIO to have a framework for creating a custom post type, custom taxonomy, and custom fields. As well as, it provides all of the extensions from Meta Box, which help you to have advanced features:

• MB Custom Post Types and Custom Taxonomies: to create a custom post type and custom taxonomies for products.
• MB Builder: to have a UI on the backend to create the custom field visually and efficiently. You can test the new interface of MB Builder here.
• MB Views: to create a template for displaying product information and creating a filter.

Let’s go step-by-step.

Create a Custom Post Type

Right on the Meta Box dashboard, click on the Create post type button.

After publishing, there will be a new menu here. It’s your post type.

Create a Custom Taxonomy

As I said, we’ll have a filter on the page based on a taxonomy. I will divide the vouchers into some discount levels, and each one of them will be a term of the taxonomy. So let’s move on to create them.

Go to Meta Box > Taxonomies, and create a new one.

In the Advanced section, enable the Show admin column option if you want to show them as an admin column. This setting is available when you have the MB Admin Columns extension. I did not mention it at the beginning because it’s optional.

Next, in the Post Types tab, choose the post type that you’ve just created. In my case, it’s the restaurant.

Now, you can add some terms to your product’s taxonomy.

Create Custom Fields for Product Information

Besides the name and image, we need some extra information for the product. In my case, I need to store the address, logo, and the opening status.

Click on the Create custom fields button in the dashboard to create a new field group for the product.

These are some fields I created:

There’s no special setting for them. You can freely create more fields to store information for products as you want with 40+ field types provided by Meta Box.

After having all the fields you need, move to the Settings tab, choose Location as Post type, and select your post type to apply these fields to it.

Now, when you add a new product, on the post editor screen, you can see the custom fields and a box to set the taxonomy.

Just add some information for your products.

You can easily view the voucher information in this column.

Display Products on a Listing Page

We’ll show all the restaurants on a separate page. So, let’s create the page first.

Go to Pages and add a new one.

I leave it blank since the page content will be dynamically displayed with MB Views.

Now, go ahead to Meta Box > Views, and create a new view.

In the Template tab, you can use this button to insert fields or add code directly. I use both these ways.

First, add this code:

{% set args = { post_type: 'restaurant', posts_per_page: -1, orderby: 'date', order: 'DESC' } %}
{% set posts = mb.get_posts(args) %}
{% for post in posts %}

{% endfor %}

In there:

• {% set args = { post_type: 'restaurant', posts_per_page: -1, orderby: 'date', order: 'DESC' } %}: is to declare that we’ll get posts from the restaurant post type.
• mb.get_posts(): is a Meta Box function to get the posts.
• {% for post in posts %}...{% endfor %}: is a loop we use to get all the posts, since there are various restaurants.

Inside the loop, we’ll get data for each product.

First, to get the terms, add this code:

{% set vouchers = mb.get_the_terms(post.ID, 'voucher') %}
{% if vouchers %}
    {% for voucher in vouchers %}
        {{ voucher.name }} <br/>
    {% endfor %}
{% endif %}

In the above code, I use mb.get_the_terms() to get the term. We also have more than one term, so there is a nested loop to get and display the name of the term in the case that the restaurant has a voucher.

To get and display the remaining information, use the button I mentioned before to insert fields from the right panel.

When you click to insert one field, for example, the post title for the product name, a generated code will be added to the Template tab.

The list also includes Meta Box fields. MB Views allows you to choose its size or output for some special fields. Then, we have the code as the image below:

After inserting all the fields you need, scroll down to the Settings section. Set the type of the template as Singular, then select your page you created for the product listing.

Now, view the page on the frontend, you can see all the data is displayed, but it may need to be made more beautiful.

Back to the template, and add some div tags and classes, as well as modify the code a little bit.

Then, move to the CSS tab, and add code for styling.

After that, our page is more eye-catching.

Add Filters to the Page

We’ll use JavaScript to add action for the filter. However, we need to add some code to the created template first.

Specifically:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/isotope.pkgd.js"></script>

These are to declare and load the jQuery and Isocope library we’ll use for filtering and grid layout.

<div class="filter-buttons">
    <button data-filter="*" class="filter-tab active">All Restaurants</button>
    {% set terms = mb.get_terms({taxonomy: 'voucher'}) %}
    {% for term in terms %}
    <button data-filter=".{{ term.slug }}" class="filter-tab">{{ term.name }}</button>
    {% endfor %}
</div>

This part is for the button in the filter.

There will be a button for displaying all the restaurants. It has a label as All Restaurants.

The remaining buttons are terms of the voucher taxonomy along with their slug.

Next, I set the class for each term with this part:

{% set vouchers = mb.get_the_terms(post.ID, 'voucher') %}
{% set voucher_classes = '' %}
{% if vouchers is not empty %}
{% set voucher_classes = vouchers|map(v => v.slug)|join(' ') %}
{% endif %}

Then, the voucher_classes will be assigned for the slug of the term.

<div class="grid-item {{ voucher_classes }}">

You should add some CSS to style the filter.

Now, go to the JavaScript tab to add some code for the action of filtering.

jQuery(document).ready(function ($) {
    var $grid = $('.grid').isotope({
        itemSelector: '.grid-item',
        layoutMode: 'fitRows'
    });

    $('.filter-buttons button').on('click', function () {
        var filterValue = $(this).attr('data-filter');
        $grid.isotope({ filter: filterValue });
        $('.filter-buttons button').removeClass('active');
        $(this).addClass('active');
    });
});

Explanation:

• var $grid = $('.grid').isotope({: is to initialize Isotope, and each item will be specified to the grid-item class.
• layoutMode: 'fitRows': is to arrange the items in horizontal rows.
• $('.filter-buttons button').on('click', function () {: is to recognize the action when the visitor clicks on a button for filtering through the filter-buttons class.
• data-filter: is the attribute that value will be retrieved from.

That’s all.

I’ve uploaded all the code to GitHub, so you can refer to it.
Now, go to the page on the frontend, and check the filter. It works well.

The code also runs when the product has more than one voucher. That product will be shown in all the terms it has.

Last Words

With MB Views from Meta Box, you can build your own listing easily without additional plugin installation. If you use any page builder, you can find it in this series.

You can also explore the power of MB Views extensions via its applications in many real cases.

Feel free to leave your thoughts and results in the comments. Thanks for reading!

• How to Create a Simple Listing Using Meta Box and WP Grid Builder
• How to Create a Simple Listing - P2 - Using Meta Box and Bricks
• How to Create a Simple Listing - P3 - Using Meta Box and Breakdance
• How to Create a Simple Listing - P4 - Using Meta Box and Elementor
• How to Create a Simple Listing - P5 - Using Meta Box and Kadence
• How to Create a Simple Listing - P6 - Using MB Views