Displaying featured posts with WP Grid Builder

We'll create a section to display the featured posts on the homepage which is built with Elementor. To choose which product is featured and displayed, we'll use a custom field and use a condition based on this field's value. The condition will be created with the help of WP Grid Builder.

Video

Preparation

The section is shown as a slider on the homepage. It is provided by WP Grid Builder in the Grid type. In the grid, there are cards, and each one displays information about a restaurant.

The restaurant's information will be saved in a custom post type named Restaurants. Their names and images are the titles and featured images of the posts. And other information, such as address, voucher, and logo also will be saved in custom fields.

So, here are the tools we need for this practice:

• Meta Box: to have a framework to create custom post type and custom fields;
• MB Custom Post Types: to create custom post types for the restaurants;
• Meta Box Builder: to have a UI on the back end to create custom fields to save the extra information of the restaurants;
• Elementor: to build the page. I use the Elementor Pro;
• WP Grid Builder: to create a condition to choose which restaurants will be displayed.
• Integrations between WP Grid Builder and Meta Box, and between WP Grid Builder and Elementor: you can activate them in the Add-ons section of WP Grid Builder.

1. Creating restaurant post type

Go to Meta Box > Post Types to create a new post type for the restaurants.

2. Creating custom fields for restaurants

Go to Meta Box > Custom Fields, then create fields as you want.

To select and display which restaurant is featured on the frontend, I’ll create an extra custom field as the Switch type.

After creating all the needed fields, go to the Settings tab > Location > choose Post Type as the Restaurant post type that we’ve just created to apply the custom fields to it.

In the post editor, you will see all of the newly created custom fields.

Look at the field which we use to clarify which restaurant is featured, it is in the button style with two statuses. One is the Off status will indicate that you do not want to recommend the restaurant. Otherwise, the On status will let us know that you want to feature the restaurant.

Now, let’s fill in the information for the restaurant into the fields.

3. Creating a card view

Go to Gridbuilder > All Cards > Create a Card. This is the one to stipulate which information about the products (in this case is the restaurants) will be displayed.

You can change all the settings of the cards as you want in the General section.

To add content to the card, move to the Blocks section. First, choose the Title block to get the restaurant’s name and drag it to any place where you want to display it.

To style the title, go to the Appearance tab in the Edit Block popup, and change the settings.

For the information that is saved in custom fields created by Meta Box, I’ll add a Custom Field block.

You can add a class name for the block in the Class Name section for styling later.

Also in this popup, the Source Type is Custom Field by default. To get the data from the field in which we want to display the information, choose the name of the field in the Custom Field section.

We do this to display the voucher and address information as well.

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. Add the following code to the functions.php 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;
} );

info

Just replace the custom_field_name by the ID of the custom field that you want to get the image.

These lines of code are provided by WP Grid Builder. I put it on Github, so you can refer to it.

Now, go back to the card editor, a new block named Custom Image Block will appear. Just add it to the card.

There is no need to change any options for this block.

That’s all for the card.

4. Creating a grid and condition

Creating a grid to display restaurants

Go to Gridbuilder > All Grids > Create a Grid. This is where to display all the products we want to feature.

To get the posts that you want to display in the grid, go to the Content Query section, and choose the content type as Post Types. Then, choose the post type that we’ve just created for the restaurant so that the grid can get all the posts from that post type.

Setting the condition

Pay attention to the Custom Fields section - an important part. This is where you set the condition to display the restaurants.

We’ll display the restaurants which have the Switch field in the On mode only. So, fill in the ID of the Switch field in the Key Field section.

In the Fields Type section, choose Numeric since this Switch field has two options On or Off with the corresponding value as 1 and 0. They are the numeric type.

Next, just enter 1 into the Value Field box to show the restaurants that have the Switch field set in the On mode.

Setting style for the grid

For the layout of the grid, you can set this section to be a slider by choosing the Carousel option in the Grid Carousel section.

Next, go to the Grid Builder section, and set the navigation of the slider.

To stipulate which information displays in the grid, move to the Card Style section. Then, set both the Default Card and Post Type Cards as the Featured Restaurants Card which we’ve just created.

5. Displaying the grid on the frontend

Let’s edit the homepage with Elementor.

Add a section to a place you want to display it on the homepage. Add a Heading, name it, and style it as you want.

Then, search for the Grid element and drag it into the section. In the Content box, we need to choose the grid that we have just created.

Then, you’ll see the featured restaurants displayed on the homepage.

6. Styling

In the editor for the created grid of WP Grid Builder, go to the Customization section and add CSS code.

I also put this code on Github, so you can refer to it.

Now, go to the frontend, you will see a new look of the section. That’s done!