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:

Configure the home page template using MB Views
Display setting for MB Views

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() }}
Fix the URL problem
Fix the URL problem

Then copy the CSS and paste to CSS tab

Copy Template to the View
Add CSS to Views

Step 4: Create Custom Field for the Homepage

Analyze the fields in slide
Analyze the fields in slide

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.

Create a cloneable group field
Create a cloneable group field

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

Set up the display of these fields
Set up the display of these fields

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

The result of the 4th step
The result of the 4th 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.

Render Custom Field
Render Custom Field

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.

1 thought on “Configure Homepage Using MB Views

  1. Hello. how are they? I want to congratulate them for such an extraordinary plugin and so valuable and useful for those who want to make our ideas - I have a concern or question that arises because of the need I have to create landing pages that can be customized by users as long as users as long as They are given a predesigned template. And if I can, as you explain in this article, not just create a Home page, but many pages and that these can be shown as landing pages of different reasons, at the same time? I was telling your article how to create the landing page in the https://metabox.io/create-lating-pages-in-wordpress/ but I see that here it is only limited to be able to perform a single landing page. I would like to know, if possible, in which part or parts of the code should be taken into account to create several pages of landings with different templates of different reasons following this same tutorial? that is to say or clarify: When you take an HTML template and develop the process, the idea is to take one to one other templates and do the same procedure for each HTML template and achieve several functional pays, but and here is where my question goes , how to do so that all of them can coexist without affecting each other, especially the part where it is necessary to add code to the ttheme in the php files? Is this possible or by this method only serves customize a single landing page?
    My project is aimed at a multisitarian wordpress that allows users to have and customize different rangepoints of landing pages, for example, one of each nutritional product, with their personal data, for example, but that is not one. is this possible? They could make a blog article as a continuation of this same article https://metabox.io/create-Leing-Pages-in-Wordpress/ But where they explain, if possible, make several landing pages for this same method, and that Do not affect one of another? I would greatly appreciate the help about this solution.
    Or if they have another possible solution, be able to share it by some means?
    It occurs to me that it could be done with the elementor plugin or another pages constructor, and somehow be able to insert the custom fields created with Metabox in them, but I have not seen tutorials for this. I would like to know if they have one for it. Stay tuned to your comments. Atte. Rodolfo Seales http://sistemaspa.com and http://sistemaspa.co

Leave a Reply