Configure Homepage Using MB Views

Configuring homepage using MB Views is quite similar to creating landing pages using Meta Box plugin or other usages in some tutorials we’ve written. Specifically, we just need these steps

1. Create a new page and set up it as a homepage
2. Use Meta Box plugin to create necessary custom fields for page
3. Call the function to render the custom fields

The first and second steps can be done by intuitive manipulations from WordPress and Meta Box plugin without using any other tools. But the third step requires you to access to the server to change the file in the theme directory. Or if you use FTP, you need one more Code Editor tool to easily edit code.

Today, I’ll introduce the latest extension of Meta Box, which is MB Views. This extension can help to configure a homepage or implement all these three steps without touching any file or accessing to server or host.

I’ll configure a homepage using a template from Bootstrap for this tutorial.

Step 1: Create and Configure a New Homepage

First, you need to have a new home page and name it as Home (go to Pages > Add New). And then, go to Settings > Reading, choose A Static Page in Your homepage displays section, and choose Home to configure it to the home page.

Step 2: Configure the home page template using MB Views

After having a new homepage, go to Meta Box > Views > Add New.

Next, to set up this View for the homepage, choose these fields in the Settings section:

The homepage’s name is Home and it’s a Page and Singular type.

Step 3: Copy Template to the View

In the template created above, you can see that there are three main parts:

• My Carousel
• Content Marketing
• Featured Section

What you need is copying the HTML of these sections to the created page in the Views section of the Meta Box plugin.

When you put the HTML to the Template tab of Views section, the images or URL won’t display properly. Therefore, you need to add this code before each URL to fix this mistake.

{{ mb.get_template_directory_uri() }}

Then copy the CSS and paste to CSS tab

Step 4: Create Custom Field for the Homepage

I’ve mentioned how to create custom fields in some previous tutorials. You can code yourself, use the Meta Box Builder extension or use the Online Generator tool. So, in this post, I’ll make it short by giving you a sample tutorial for the first section: Slide Home. Then, you can configure other sections to fit with your own template.

As I mentioned above, I will create a cloneable group field to create multiple slide item. There are the fields of the group field:

• Image
• Title
• Description
• Button link

Next, go to Custom Fields/Add New and create a group as described above.

Don’t forget to move to the Settings tab to set up the display of these fields for your homepage.

So, you have just created the necessary fields for your homepage after all. Let fill in your database and move to the next step.

Step 5: Render the field value with MB Views

Besides supporting the inclusion of a template without touching any file in the theme, MB Views can help you use Twig code to actively render the content and created custom fields as desired.

First, move to the page Home > Views and click the Insert Field button on the right side. It will help you render the fields with one click and you don’t even need to remember the ID that you set up previously.

You can find this documentation and video tutorial on how to use the Insert Field button.

Final Words

This is just one of many applications that MB Views extension brings about. In addition to configuring homepage, it’s very helpful for developers or those who want to learn to code. If you want more tutorials on how to apply MB Views, feel free to comment and suggest.