How to Create a Simple Listing - P1 - Using Meta Box and WP Grid Builder
Tags: metabox, tutorial, customfields, listing
Published: 2022-04-05 02:23:14

Listing your post or product on a page is a common task when building a website. There are so many ways to do it, but if you want to show not only the default information about the post but also some further things from custom fields, let’s dig into this tutorial. I’m going to <strong>create an archive page for restaurants using WP Grid Builder</strong>, and also <strong>get info from custom fields created by Meta Box</strong>. The filters also are available as you can see in the below picture.

<img class="aligncenter" src="https://i.imgur.com/qK10425.png" alt="The structure of a simple listing page using WP Grid Builder + Meta Box." width="1003" height="733" />
<h2>Video Version</h2>
https://www.youtube.com/watch?v=YP7sMXHdf_Q
<h2>Before Getting Started</h2>
Prior to beginning this practice, I’d to clarify some terms.

We’ll need a <strong>custom post type</strong> for restaurants and information about each restaurant will be saved in a <strong>post</strong>. The restaurant’s name and image are the default title and featured image of the post. And other information such as status, address, voucher, and logo will be saved in different <strong>custom fields</strong>.

On the page, we’ll have <strong>Card</strong>, <strong>Grid</strong>, and <strong>Facet</strong> as the following:

<img class="aligncenter" src="https://i.imgur.com/vsYIhRa.png" alt="The illustration of Card, Grid, Facet on the listing page" width="1001" height="830" />
<ul>
 	<li><strong>Card</strong>: it’s a box to show up the restaurant information.</li>
 	<li><strong>Grid</strong>: is an area to list all the restaurants.</li>
 	<li><strong>Facet</strong>: is the filter and sort.</li>
</ul>
We will create them one by one in the upcoming execution.

To do it, we need the <a href="https://wordpress.org/plugins/meta-box/">Meta Box core plugin</a> to have a framework that allows you to create custom fields to input restaurant information. It’s free and available on <a href="https://wordpress.org/plugins/meta-box/">wordpress.org</a>, so you can download it directly. The next one is <strong>Meta Box AIO</strong>, which contains all of the Meta Box extensions for advanced features. Or instead, you can install individually the two following extensions:
<ul>
 	<li><a href="https://metabox.io/plugins/custom-post-type/">MB Custom Post Type</a>: to create custom post types for the restaurant.</li>
 	<li><a href="https://metabox.io/plugins/meta-box-builder/">Meta Box Builder</a>: to have a UI in the back end to create custom fields easily.</li>
</ul>
And the last one, we need <a href="https://wpgridbuilder.com/">WP Grid Builder</a>. It is an extensive and easy-to-use solution to query, layout, and filter content.

In addition, make sure that you installed the <strong>integration</strong> between <a href="https://wpgridbuilder.com/">WP Grid Builder</a> and <a href="https://metabox.io/">Meta Box</a> by installing and activating it in the <strong>Add-ons</strong> section of WP Grid Builder. This aims to support all the fields created by Meta Box and filter the content from custom fields easily.
<h2>Step 1: Create a New Custom Post Type and Custom Fields</h2>
Go to <strong>Meta Box</strong> &gt; <strong>Post Types</strong> to create a new post type for your restaurant.

<img class="aligncenter" src="https://i.imgur.com/6KH6CwD.png" alt="Create a new post type for your restaurant." width="1000" height="552" />

To create custom fields, go to <strong>Meta Box</strong> &gt; <strong>Custom Fields</strong>, then create ones as you want.

<img class="aligncenter" src="https://i.imgur.com/nun5Rt6.png" alt="Create custom fields for the custom post type." width="1000" height="643" />

You can refer to <a href="https://www.youtube.com/playlist?list=PLIWLX0sDr8lT6XHPqwiPlK1lgONQEOKpQ">this series of tutorials</a> to know how to create them, or follow up the series “<a href="https://metabox.io/series/latest-products/">Display the latest products</a>” for more details.
<h2>Step 2: Create a Card</h2>
Go to <strong>Gridbuilder</strong> &gt; <strong>All Cards</strong> &gt; <strong>Create a Card</strong>.

<img class="aligncenter" src="https://i.imgur.com/4qQ1rSm.png" alt="Go to Gridbuilder &gt; All Cards &gt; Create a Card." width="1002" height="707" />
Name the card then scroll down to see the settings. I keep the default in the <strong>Card Layout</strong> and <strong>Card Sizing</strong> settings. You can customize all these settings as you want.

<img class="aligncenter" src="https://i.imgur.com/vKsZ39W.png" alt="Keep the default in the Card Layout and Card Sizing settings." width="1004" height="773" />

Pay attention to the <strong>Card Type</strong> options. The option you choose, the one appointed to the grid layout.

In the <strong>Card Layers</strong> section, I turned off the <strong>Media Overlay</strong> and <strong>Card Footer</strong>. I keep the <strong>Card Media</strong> only to display images then.

To add content to the card, move to the <strong>Blocks</strong> tab then search the wanted blocks. Choose the <strong>Title</strong> block to get the restaurant’s name and drag it to any place where you want to display the name.

<img class="aligncenter" src="https://i.imgur.com/DAGUocx.png" alt="Choose the Title block to get the restaurant’s name." width="1002" height="669" />

The address is in a custom field created by Meta Box, so choose the <strong>Custom Field</strong> block to get it. In the <strong>Edit Block</strong> popup, name the class (we’ll use it for styling in the next step) and search the label or ID of the corresponding custom field. Choose the field then you’ll get the information in place.

<img class="aligncenter" src="https://i.imgur.com/hdayvjL.png" alt="Choose Custom Field to get the restaurant's address and setting in the Edit Block popup." width="1000" height="680" />

Do likewise with the voucher and status information.

The logo of the restaurant is a special one. There’s no pre-built block that supports calling out the image from custom fields, so I’ll create a new custom block.

Move to the <strong>Theme File Editor</strong> in the <strong>Appearance</strong> menu and add the following code to the <strong>functions.php</strong> file.

```
add_filter(
	'wp_grid_builder/blocks', function( $blocks ) {

		// 'custom_image_block' corresponds to the block slug.
		$blocks['custom_image_block'] = [
			'name'            => __( 'Custom image block', 'text-domain' ),
			'render_callback' => function() {

				// Get current post, term, or user object.
				$post  = wpgb_get_post();
				$image = get_post_meta( $post->ID, 'custom_field_name', true );

				if ( empty( $image ) ) {
					return;
				}

				$source = wp_get_attachment_image_src( $image );

				if ( empty( $source ) ) {
					return;
				}

				printf(
					'<img src="%s" width="%s" height="%s">',
					esc_url( $source[0] ),
					esc_attr( $source[1] ),
					esc_attr( $source[2] )
				);

			},
		];

		return $blocks;

	}
);

```
This code is officially provided by WP Grid Builder. I put it on <a href="https://github.com/wpmetabox/tutorials/blob/master/create-a-simple-listing-using-Meta-Box-and-WP-Grid-Builder/functions.php">Github</a> so you can refer to it. Your work is just inserting the ID of the custom field that you want to get the image.

<img class="aligncenter" src="https://i.imgur.com/4aNaVUj.png" alt="Create a new custom block to get the image." width="1003" height="745" />

Go back to edit the card, you will see a new block named <strong>Custom Image Block</strong>, then add it to the card.

<img class="aligncenter" src="https://i.imgur.com/vFOZdyv.png" alt="Choose Custom Image Block to get the restaurant's logo." width="1000" height="675" />

We’ve done all the settings for the card.
<h2>Step 3: Create a Grid</h2>
Open<strong> Gridbuilder</strong> &gt; <strong>All Grids</strong> &gt; <strong>Create a Grid</strong>.

<img class="aligncenter" src="https://i.imgur.com/ApxTo14.png" alt="Gridbuilder &gt; All Grids &gt; Create a Grid." width="1002" height="695" />

To get the content from the post type that you want to display in the grid, go to the <strong>Content Query</strong> section and choose the post type that we’ve just created.

<img class="aligncenter" src="https://i.imgur.com/e6g5zRH.png" alt="In the Content Query section and choose the post type that we’ve just created." width="1000" height="837" />

For the layout of the grid, it is automatically chosen as the option the same as the <strong>Card Type</strong> of the Card you set before. You cannot choose different options. For example, it is Masonry here since I set the <strong>Card Type</strong> as Masonry.

<img class="aligncenter" src="https://i.imgur.com/1S1pt57.png" alt="Grid Layout settings" width="1002" height="873" />

Then, go down to the <strong>Grid Responsivity</strong> section, adjust the number of columns and spacing of the display on different device screens.

Next, in the Card Styles section, set both the <strong>Default Card</strong> and <strong>Post Type Cards</strong> as the <strong>Restaurant Card</strong> which we’ve just created.

<img class="aligncenter" src="https://i.imgur.com/GUDFPce.png" alt="In the Card Styles section, set both the Default Card and Post Type Cards as the Restaurant Card which we’ve just created." width="1000" height="498" />

Let’s move to the next step!
<h2>Step 4: Create a Facet</h2>
To create a facet, go to <strong>Gridbuilder</strong> &gt; <strong>All Facets</strong>.

There’re a lot of pre-made facets that you can use instantly. In my case, I choose the <strong>Selection</strong> facet for my filter and the <strong>Sort</strong> facet to arrange content in order. Then, just import data to these ones instead of creating a new facet.

<img class="aligncenter" src="https://i.imgur.com/BJwTwGk.png" alt="Choose the facet types and import data to these ones instead of creating a new facet." width="1000" height="667" />

First, let’s change some settings of the <strong>Selection</strong>. In the <strong>Behaviour</strong> section, you can see that this facet is set as a filter already.

<img class="aligncenter" src="https://i.imgur.com/yRdBRxu.png" alt="Change some settings of the Selection" width="1000" height="701" />

For the filter’s type, I set it as a dropdown. So, the options will be on a dropdown list like this:

<img class="aligncenter" src="https://i.imgur.com/Y0lqD99.png" alt="The example of a dropdown list." width="999" height="517" />

Next, scroll down then you will see the <strong>Filter By</strong> section. It’s the most important setting for the facet. There are 3 options of <strong>Data Source</strong> that you can choose from.

<img class="aligncenter" src="https://i.imgur.com/NDMavni.png" alt="The settings in Filter By section" width="1000" height="915" />

In this practice, I want to filter restaurants by voucher so that users can see which ones have 30% or 50% discount for example. This kind of information is saved in the custom fields which we’ve just created by Meta Box. So, choose <strong>Custom Field</strong> and choose the field you want.

For other settings, I keep them as default.

With the <strong>Sort</strong> facet, I also keep it as the default settings. You can remove or add more options for sorting in this section.

<img class="aligncenter" src="https://i.imgur.com/omLPAvH.png" alt="The settings of Sort Facet" width="1000" height="868" />
<h2>Step 5: Create a New Page</h2>
Go to <strong>Page</strong> &gt; <strong>Add New</strong>.

As you know, the page that I showed at the beginning is divided into 2 sections. One for the facets with 2 columns, and one for the restaurant's information.

For the first section, I add columns and choose <strong>50/50</strong>. In each column, add a <strong>Facet</strong> block inside then choose the corresponding one. For example, I add the filter name Selection then choose the grid named Restaurant Grid. It allows you to filter content from that grid. Then, the second column will be set as the sort. I also choose the grid named for the sort Restaurant Grid.

<img class="aligncenter" src="https://i.imgur.com/2ZpWmDe.gif" alt="Create filter section in an listing page." width="1000" height="550" />

For the second section, it is the content about the restaurant. I’ve already created a grid for it. Thus, add a <strong>Grid</strong> block and choose your created one.

<img class="aligncenter" src="https://i.imgur.com/1n7wLdA.gif" alt="Create a grid section to get the restaurant information in the listing page." width="1000" height="600" />

Now, all of the restaurant’s information is displayed. And you can see that the filter and sort work well.

<img class="aligncenter" src="https://i.imgur.com/t1kxMYs.gif" alt="In the listing page, the filter and sort work well." width="1000" height="725" />

However, there are some things like logos and statuses that look not good, so we need to style them a little bit.
<h2>Step 6: Style the Page</h2>
I just want to style the content in the grid only since the page template and the facets section look good enough. Instead of adding code to the theme file, we’ll go to the <strong>Customization</strong> in the grid settings.

Go to the grid and edit it, then go to the <strong>Customization</strong> section. Then add CSS and JS code to the corresponding box.

<img src="https://i.imgur.com/HfdIdgM.png" alt="Add code to the Custom CSS box in Customization section." width="1000" height="791" />

<img src="https://i.imgur.com/j69PI6l.png" alt="Add code to the JavaScript box" width="780" height="336" />

I put all the code on <a href="https://github.com/wpmetabox/tutorials/blob/master/create-a-simple-listing-using-Meta-Box-and-WP-Grid-Builder/custom.css">Github</a>, so you can refer to it for more details.

I’d like to clarify the JS code a little bit.

```
jQuery('.status').each(function () {
        if (jQuery(this).html() == 'Open') {
            jQuery(this).addClass('open');
        } else {
            jQuery(this).addClass('close');
        }
    });

```
<code>jQuery('.status').each(function () {})</code> is to create a dynamic class for the status of the restaurant. The classes will be autogenerated based on the value of the status field which returns on the card. If it’s open, the class will be generated as <code>open</code>. Otherwise, the class will be <code>close</code>. Depending on the name of the generated class, I will have two different styles for the two statuses of the restaurant.

<img class="aligncenter" src="https://i.imgur.com/FSNO33g.png" alt="2 statuses of the restaurant" width="1000" height="805" />

Back to the page, all of the information is displayed more beautifully, especially restaurants’ status and logos.

<img class="aligncenter" src="https://i.imgur.com/A2NLv5h.png" alt="The restaurants’s status and logos are displayed beautifully in the listing page." width="1000" height="738" />

So we’ve done a simple listing page (archive page) created by WP Grid Builder with content from custom fields created by Meta Box.
<h2>Last Words</h2>
As you see, you can <strong>create a simple listing page easily with just drag and drop using WP Grid Builder</strong>. Hope that this practice makes sense to you all. For other ways, we may have some upcoming tutorials, just keep track of our blog.

If you want to watch more tutorials on other topics, don’t hesitate to leave a comment.