---
title: "Twig"
description: "Twig is a modern template engine for PHP which compiles templates down to plain optimized PHP code. Used in Craft CMS amongst others."
canonical_url: "https://www.codex.republic.se/languages/twig"
section: "Pages"
---

# Twig

Twig is a modern template engine for PHP which compiles templates down to plain optimized PHP code. Used in [Craft CMS](/cms/craft-cms/) amongst others.

## Tips

### <body> tag with many attributes

```twig
{% set bodyAttributes = {
    id: siteName|kebab,
    class: [
        craft.app.config.general.devMode ? "devMode",
        entry is defined ? "type-" ~ entry.type,
        entry is defined and entry.backgroundColor is defined and entry.backgroundColor|length ? entry.backgroundColor : "color-4",
        product is defined ? "type-product"
    ],
    data: {
        controller: "global " ~ stimulusPageController|default(''),
    }
} %}
<body {{ attr(bodyAttributes) }}>

```

#### How does the attr() function work? [**\#**](https://craftsnippets.com/articles/using-attr-function-to-render-html-attributes-in-craft-cms#how-does-attr-function-works)

Let's summarize what `attr()` function does with data passed to it:

- Contents of `class` array - strings representing single classes - get properly concatenated while keeping necessary whitespace between each class.
- Object `style` consisting of CSS property-value pairs is transformed into proper `style` attribute.
- Contents of `data` object are transformed into multiple data-attributes. In the case of multidimensional arrays in `data` object, an array is serialized so it can be later retrieved from single data-attribute by JavaScript.
- Objects with a single boolean value, like `hidden`, are rendered as empty HTML attributes (without a value) if the boolean value is `true`, or are not rendered at all if the boolean value is `false`.
- The rest of the objects with a string value are just rendered as corresponding HTML attributes - like `id`, for example.

### HTML tag with many attributes (simpler version)

If there are many attributes to be set on a tag, you can use Twig to achieve more readable code.

```twig
{% set buttonAttributes = {
    'class': 'menu',
    'data-mobile-navigation-target': 'button',
    'data-action': 'mobile-navigation#toggle',
    'aria-label': 'Open navigation'
} %}
<button {{ attr(buttonAttributes) }}>
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
</button>

```

### HTML tag with many classes

If there is an HTML tag with many classes, you can also use Twig.

```twig
{% set classes = [
    'block',
    'py-12 px-2',
    'border-2 border-white',
    'text-center text-white',
    'leading-none',
    'no-underline uppercase tracking-wide'
] %}
<div class="{{classes|join(' ')}}"></div>

```

### Tag

Sometimes it can be practical to create an HTML element directly from Twig.

```twig
{{ tag('p', {
    text: textVariable1 ?? textVariable2,
    class: classVariable ?? "text"
}) }}

```

### Use a variable as text

If you need to use a variable as plain text.

```twig
{% set animals = {
    dogs: ['Fido', 'Buster', 'Pluto']
} %}
{% for key in animals %}
    {% set output = include(template="animals/**#{key}**.twig") %}
{% endfor %}

```

### Variables in context

All variables that are available in the current context:

```twig
{% dd _context | keys %}

```

---

- [ Includes in Twig ](/languages/twig/includes-in-twig)