You can easily create food menus by accessing the Food Menus area in the WordPress admin.
Food menus pages feature the same layout options of the regular pages, conveniently grouped under the "Theme options" meta box.
In the "Food" tab of the "Theme options" meta box you’ll find the controls to create and style a food menu.
The Food Menu custom post type is associated with a specific taxonomy called "Food Category". While this taxonomy can be associated to a food menu, its entries can also the associated to the food menu dishes directly (see the Dishes section in this document).
Before a food category can be associated to a dish, it must be created in the
"Food Menus > Food Category" screen in the WordPress admin.
Food menu organization
Each food menu is composed by a list of dishes, and the dishes can be subsequently grouped according, for example, to their type (e.g. Entrees).
The food menu can be displayed as a vertical list of groups and dishes, or it can be arranged in tabs, with each tab representing a particular group of dishes.
You can select which layout solution you want the food menu by selecting respectively "Regular" or "Tabs" from the "Menu display" options in the "Food" tab of the menu editing screen.
After you’ve chosed a layout for your menu, you can begin adding content to it, that is adding dishes, and organizing them by grouping them under "Dividers".
A dish divider is used to give a context to the dishes that are listed below it (e.g. Entrees, Desserts, etc.)
Dishes listed below a divider but before another divider or the end of the food menu form a group of dishes.
You can add a dish divider by clicking on the "Add divider" button in the "Food" tab of the menu editing screen.
A dish divider is composed by three different informations:
- A title (e.g Entrees)
- A subtitle
- An appearance setting that defines how the dishes listed below the divider will be displayed. The possible values for the group of dishes display are:
- Regular, with the dishes listed one after the other
- Regular with images, with the dishes listed one after the other and displaying their own image, if set (see the information available for the single dish below)
- Two columns, with the dishes being arranged in a two columns layout, one after the other
- Two columns with images, with the dishes being arranged in a two columns layout, one after the other, and displaying their own image, if set
- Carousel with 3 columns, with the dishes arranged in a carousel component
- Carousel with 5 columns, with the dishes arranged in a carousel component
You can add a dish by clicking on the "Add dish" button in the "Food" tab of the menu editing screen.
After clicking on the "Add dish" button you’ll be presented a modal window containing all the dish information. Clicking the "Ok" button at the bottom of the modal window will add the dish to the menu.
You’ll be able to open the dish editing modal window again by clicking on the dish name; also, dishes can be dragged around the menu and rearranged.
Dishes information in their editing modal window are divided into three tabs:
- Options, containing data that will be displayed directly in the food menu page:
- Dish name
- Subtitle, ingredients
- The food categories the dish belongs to (see the Food categories section of this document for more information)
- Highlight text, used to make one or more dishes stand out
- URL, to make the dish link to a specific page in the website
- Dish variants, also displayed directly in the food menu page
- A dish variant is a particular variant of the dish that dictates a price change. For example, a medium sized burger could cost 5$, while a big sized burger could cost 8$. You can add variants by clicking on the "Add" button in the "Dish variants" tab, and the insert a label and a price.
- By filling the fields in the Detail tab, the dish will feature a link that will open a modal window on frontend, to allow the dish to be better described. The title, subtitle and description fields are textual, the picture is decorative and will be shown alongside the text, and the key/value details will be shown in a table below the textual information.
Food menu builder block
After a food menu has been created, it can be also displayed in a different page using the Food menu builder block, provided by the theme.
When editing a page with the provided page builder, just select the "Food menu" block and make it reference the desired food menu in the "Select the food menu" option in the block editing modal window.