---
title: Twig templates
description: The menu and selection templates of WXP Restaurant Menu, the values they receive and how to make your own template in your child theme.
url: "https://wxpplugins.com/docs/wxp-restaurant-menu-twig/"
updated: "2026-10-30"
category: WXP Restaurant Menu / For developers
---

# Twig templates

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.twig` in `wxp-restaurant-menu/` in your child theme and use `[wxp_menu template="my-menu"]`. A selection template is called `selection-my-name.html.twig` and used with `template="my-name"`.
- The header lines in the comment are optional: `Template Name` is the name in the template list of the widget, and `Image Size` is 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 with `wxp-menu__section` and the attributes `data-category` and `data-depth`, and each item in an element with `wxp-menu__item` and the `data-groups` and `data-tags` attributes (the macro `item_data` prints them). The visitor filters depend on this. For a selection, print one list with the class `wxp-selection__items` of `li` elements with the class `wxp-selection__item`.
- Only the fields that end in `_html` are 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`.