Tags

Twig tags are control structures that control the flow of the templates. They consist of conditionals (i.e. if/elseif/else), for loops, as well as blocks. Tags appear inside a pair of {%  %} blocks. The closing {%  %} block is "end" followed by the tag name.

As an example, to loop through an array of values you would use the for tag.

<h1>Blog Posts</h1>
{% for post in posts %}
    <p><a href="{{ post.url }}">{{ post.postTitle }}</a></p>
{% endfor %}

You could also use the if tag to test an expression.

{% if posts|length > 1000 %}
    <p>You have a lot of posts</p>
{% endif %}

List of available tags

bodyEndCode

Sets some code to be outputted before the closing </body> tag.

{% bodyEndCode %}
<script>
const stuff = 'Some code here';
</script>
{% endBodyEndCode %}

Learn more about the bodyEndCode tag

bodyStartCode

Sets some code to be outputted before the opening <body> tag.

{% bodyStartCode %}
<script>
const stuff = 'Some code here';
</script>
{% endBodyStartode %}

Learn more about the bodyStartCode tag

for

Loops over items in a sequence (array or hash).

{% for post in posts %}
    <h2>{{ post.postTitle }}</h2>
{% endfor %}

Learn more about the for tag

if

Used to test and see if an expression evaluates to a desired value. 

{% if test %}
{% endif %}

Learn more about the if tag

ifcontent

Allows you to test and see if a content area has content and if so output it along with any other HTML code necessary or output some fallback content.

{% ifcontent 'contentAreaName' %}
<div class="Content">{{ content }}</div>
{% else %}
<div class="ContentAlt">Some alternate content here</div>
{% endifcontent %}

Learn more about the ifcontent tag

import

Used to import macros into a template.

{% import 'macros/forms' as forms %}

Learn more about the import tag

include

The include tag will include another template within your theme folder and returns the rendered content from that template file into the current template and namespace.

NOTE - It's best to use it as a function because future versions of the Twig templating engine will require it to be a function instead of a tag.

{% include ('snippets/header') %}

Learn more about the include tag

macro

Macros are similar to functions within regular programing languages. They are often used to output reusable HTML code.

{% macro specialHeading(text) %}
<h2 class="specialHeading">{{ text }}</h2>
{% endmacro %}

{% import '_self' as headings %}

{{ headings.specialHeading('Hey there!') %}

Learn more about the macro tag

switch

Allows you to compare a variable with different values and execute some code or output content depending on what the value is.

The switch statement is an alternate option to using if/elseif/else statements.

{% set value = 'value2' %}
{% switch value %}
{% case 'value1' %}
<p>value is "value1"</p>
{% case 'value2' %}
<p>value is "value2"</p>
{% case 'value3' %}
{% case 'value4' %}
<p>value is "value3" or "value4"</p>
{% default %}
<p>value is something else</p>
{% endswitch %}

Learn more about the switch tag