The layouts of WXP Restaurant Menu are Twig templates. This guide lists the templates, the values they receive and how to make your own. For an introduction to Twig and the lookup order, see General Developer Information → Twig.
Menu templates #
For the shortcode [wxp_menu], the block and the widget.
| File | Name | What it shows |
|---|---|---|
default.html.twig |
Default | Categories as headings, items as rows with a small image, the title, the price and the description. |
cards.html.twig |
Cards | Items as cards in a grid, with a large image on top. |
compact.html.twig |
Compact | A price list in columns, without images. |
elegant.html.twig |
Elegant | Centred, like a printed menu, with ornamental lines between the categories. |
side-by-side.html.twig |
Side by side | The category title on the left and the items on the right. |
Selection templates #
For the shortcode [wxp_menu_selection], the block and the widget. The file names start with selection-; in the template parameter you leave that part out, so template="cards" uses selection-cards.html.twig.
| File | Name | What it shows |
|---|---|---|
selection-default.html.twig |
Default | Each dish with a large photo on top, then the title, the description and the price. |
selection-cards.html.twig |
Cards | Each dish as a card, with the title and the price on one line. |
selection-text.html.twig |
Text only | One line per dish: the title on the left and the price on the right. |
Partials #
| File | Used for |
|---|---|
_sections.html.twig |
The category sections of a menu, or of one tab. |
_tabs.html.twig |
The tabs, when the tabs option is on. |
_category.html.twig |
The title and description of a category. |
_filters.html.twig |
The filter buttons for visitors. |
_item.html.twig, _card.html.twig |
One item as a row, or as a card. |
_meta.html.twig |
The line with the number of persons, groups and tags. |
_macros.html.twig |
Shared macros for the data attributes, colours and icons. |
You can override a partial in the same way as a template: put a file with the same name in your child theme.
Your own template #
{# Template Name: My menu
# Image Size: thumbnail #}
<div class="wxp-menu wxp-menu--mine">
{% include '_filters.html.twig' %}
{% include (tabs ? '_tabs.html.twig' : '_sections.html.twig') with { item_partial: '_item.html.twig' } %}
</div>- Save it as
my-menu.html.twiginwxp-restaurant-menu/in your child theme and use[wxp_menu template="my-menu"]. A selection template is calledselection-my-name.html.twigand used withtemplate="my-name". - The header lines in the comment are optional:
Template Nameis the name in the template list of the widget, andImage Sizeis the image size used when the shortcode asks for “automatic”. - Markup contract: keep one root element with the class
wxp-menu, each category in an element withwxp-menu__sectionand the attributesdata-categoryanddata-depth, and each item in an element withwxp-menu__itemand thedata-groupsanddata-tagsattributes (the macroitem_dataprints them). The visitor filters depend on this. For a selection, print one list with the classwxp-selection__itemsoflielements with the classwxp-selection__item. - Only the fields that end in
_htmlare safe to print with|raw. Everything else is escaped.
Values in the menu templates #
| Name | Contents |
|---|---|
sections |
A list of category (id, name, slug, description, colors), depth and items. |
tabs |
With the tabs option: one tab per top level category. Empty without tabs. |
filters |
The filter buttons: categories, groups and tags. |
options |
show_images, show_descriptions, show_groups, show_tags, show_category_titles, heading_level, image_size, show_icons, term_colors, tabs and the filter options. |
menu_id, labels, template |
A unique id of the menu on the page, translated texts and the name of the template. |
item |
id, title, secondary_title, price, price_formatted, description_html, image_html, image_url, persons, persons_label, groups, tags and acf (extra fields, see the filter wxp_restaurant_menu_item_data). |
Values in the selection templates #
| Name | Contents |
|---|---|
items |
The dishes: the fields of an item, plus category (name and slug or nothing) and link (the category on the menu page, empty without a menu page). |
options |
show_images, show_descriptions, show_prices, heading_level, image_size, mode and count. |
labels |
Translated texts. |
For the carousel and the random mode the plugin makes the element around the list; the template only prints the list. Add your own values with the filters wxp_restaurant_menu_template_context and wxp_restaurant_menu_selection_context.
