Create a Custom Menu for Restaurants (P2) - Use Gutenberg
Tags: wordpress
Published: 2020-09-01 01:54:43

In [the previous post](https://metabox.io/restaurant-custom-menu-p1-elementor/), we have created **a custom menu that allows restaurant owners to easily change the menu dishes**. However, this is the way for websites that use the Elementor page builder only. In case you don't want to spend money to buy this plugin, you can **use Gutenberg** instead. It's free, but you need to use a few lines of code. Let's read detailed instructions in this article.

### Preparation

In this post, instead of using a theme for Restaurant as in the previous one, I switch to another theme that strongly supports Gutenberg, [eStar](https://gretathemes.com/wordpress-themes/estar/), to be able to customize the appearance more flexibly. This theme is completely free so you can try it too.

In addition, I still use WooCommerce to create food as a product as in the previous post.

### Step 1: Create Dishes

First, create dishes as products using WooCommerce as in [part 1](https://metabox.io/restaurant-custom-menu-p1-elementor/). Here, I still have the same list of dishes.

![Create restaurant's dishes as products using WooCommerce](https://cdn-images-1.medium.com/max/600/0*40Y7560qfiKhYTBU.png)

### Step 2: Create the Menu Page

Just as simple as creating a normal page, go to **Pages** > **Add New** and fill in the page's information.

With the [Gutenberg editor](https://deluxeblogtips.com/beginners-guide-wordpress-gutenberg-editor/), we will be supported to create blocks right in the page editor. Here, I chose the **Columns** block and set it in two columns for the menu layout.

![Create blocks right in the page editor with Gutenberg.](https://cdn-images-1.medium.com/max/600/0*CN8EU_0nxv6T7NEY.png)

Chose the Columns block

![Set the Gutenberg blog into 2 columns.](https://cdn-images-1.medium.com/max/600/0*km1Tn5dZmBokz2OQ.png)

Set it in two columns for the menu layout.

To add dishes to the menu page, choose to add the **Hand-picked Products** block as below.

![Add the Hand-picked Products block for adding dishes to the menu page.](https://cdn-images-1.medium.com/max/600/0*i0DSwoFzHB5e5DgK.png)

This block allows you to choose any dish from the "Products" list you create in step 1. Note that in this block, I set it in one column for a beautiful display.

![This Gutenberg block allows you to choose any dish from the "Products" list.](https://cdn-images-1.medium.com/max/600/0*7mVfuO0rwVAvz2BX.png)

Finally, click **Done** to save the menu.

Now, you'll see the appearance of your menu page with the dishes displayed as follows:

![The appearance of the restaurant menu page with the dishes displayed.](https://cdn-images-1.medium.com/max/600/0*9Maeoq7GJVUlaeqP.png)

However, I think you should customize a little bit to get the nicest look. You should use the CSS as in the next step to do this.

### Step 3: Customize the Menu Page's Appearance with CSS

Since I'm using Gutenberg, I need to add the following CSS code to both `style.css` and `style-editor.css` files. Specifically:

-   Adding code to the `style.css` file helps edit the display in the frontend;
-   Adding code to the `style-editor.css` file helps edit the display in the backend (page editor).

<pre>.wc-block-handpicked-products .wc-block-grid__product-image,

.wc-block-handpicked-products .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-onsale {

display: none;

}

.wc-block-handpicked-products .wc-block-grid__product {

display: flex;

justify-content: space-between;

}

.wc-block-handpicked-products .wc-block-grid__product .wc-block-grid__product-link {

flex: 1;

text-align: left;

}

.wc-block-handpicked-products .wc-block-grid__product-title {

font-size: 24px;

Color: #fff;

}

.wc-block-handpicked-products .wc-block-grid__products {

background-color: # 000;

border-radius: 25px;

padding: 20px;

}

.handpicked-products__title {

margin-bottom: 10px;

}</pre>

After that, go back to the menu page, you'll see the list of dishes displayed as the following:

![A list of dishes is displayed on the restaurant menu.](https://cdn-images-1.medium.com/max/600/0*eT_evm0A7ciCgkSN.png)

Here is the result of menu page's appearance:

![The appearance of the restaurant menu page after configuration.](https://cdn-images-1.medium.com/max/600/0*yii-VwR69i8S0nID.png)

Now, to change the list of dishes, the restaurant owner just goes to the Menu page editor and follows the actions here:

![Go to the Menu page editor and change the list of dishes.](https://cdn-images-1.medium.com/max/600/0*J1PmZNHZWO9m9lqP.gif)

### Wrap Up

As you can see, creating a custom menu is quite easy. In case you use Gutenberg, you just need some lines of CSS code to customize your Menu to get a beautiful look. You can also create your own layout by adding any other Gutenberg blocks to make the menu more vivid and creative.

Hopefully, with these two tutorials on creating custom menus using Elementor and Gutenberg, you have already chosen for yourself the proper way. If you have any other ideas, do not hesitate to share with us in the comment section below.

 --- --- --- 

The publication at [Meta Box](https://metabox.io/custom-menu-restaurant-p2-gutenberg/).