Three Twig Tag Types in Craft CMS

Tem­plat­ing in Craft using Twig can, at first, be a lit­tle con­fus­ing. If you, like me, come from oth­er sys­tems that have a pro­pri­etary tem­plate tag sys­tem, then it might take a lit­tle time to wrap your head around how Craft and Twig work. 

But once we learn about the dif­fer­ent types of tags things will be clear­er and you’ll dis­cov­er the pow­er of using Twig in Craft. This tuto­r­i­al will give you the direc­tion and guid­ance you need to get started.

Let’s jump right in.

There are three tag types in Twig and Craft:

• Statement/​Logic Tags
• Out­put Tags
• Com­ment Tags

You will always use the first two in your Craft tem­plates. The third, com­ment tags, are option­al but a handy way of doc­u­ment­ing any­thing that isn’t obvi­ous by read­ing the code.

Statement/​Logic Tags

State­ment or log­ic tags use the curly brace plus per­cent sign delim­iter. In Twig and Craft they can come in mul­ti­ple forms. 

Some are just a sin­gle tag, like this Craft-spe­cif­ic Twig tag:

{% requireLogin %}

which you would put at the top of a tem­plate in Craft to require a logged-in state. If a vis­i­tor is not logged in than Craft will auto­mat­i­cal­ly redi­rect them to the log-in page.

Oth­er log­ic tags take para­me­ters, like the redirect tag in Craft:

{% redirect "about/tos" %}

The redirect tag takes one para­me­ter, which is the URL or path to where you want to redi­rect the vis­i­tor. This is a tag spe­cif­ic to Craft but there are some Twig tags you should know, too.

Anoth­er type of tag is one that has an open­ing and clos­ing tag, like the for tag in Craft.

{% for %}
{% endfor %}

The tag pairs have an open­ing tag and a clos­ing tag. The clos­ing tag will typ­i­cal­ly have an ​“end” pre­fix, like endfor, endpaginate, and endblock.

Even the set tag we use to set a vari­able can be used as a tag pair. The sim­ple ver­sion looks like this:

{% set author = "Ryan Irelan" %}

But using a tag pair for set, you can assign a block of text to a vari­able. Here we’re set­ting the vari­able socialLinks to an unordered list of social net­work links:

{% set socialLinks %}
<ul class="social">
	<li class="twitter"><a href="">Twitter</a></li>
	<li class="facebook"><a href="">Facebook</a></li>
	<li class="googleplus"><a href="">Google+</a></li>
</ul>
{% endset %}

Anoth­er exam­ple of a tag pair — and by far your most used tag while writ­ing Twig tem­plate code for Craft — is the for-loop. It’s how you will loop through and dis­play sec­tion entries in your tem­plates and out­put oth­er lists, like categories.

This is a for-loop to dis­play con­tent from an array of blog posts:

{% for entry in craft.entries.section('blog') %}
	{{ entry.body }}
{% endfor %}

It uses the curly brace plus per­cent sign delim­iter for both the open­ing and clos­ing tags of the for-loop. This delim­iter tells Twig that what’s between needs to be exe­cut­ed as a state­ment (in this case a for-loop).

Out­put Tags

The code with the dou­ble curly braces are out­put tags. They print vari­able con­tents to the screen (i.e. out­put con­tent in your template).

{{ author }}

The author vari­able would out­put my name (because we set it in the pre­vi­ous example).

If you want to use an out­put tag to pass in data to anoth­er tag, like when we set a vari­able in Twig, then you don’t need to use the dou­ble curly braces.

{% set name = author %}

If we print­ed out the val­ue of the name vari­able we just set than it would render:

Ryan Irelan

But out­put tags can gen­er­ate the out­put on the fly and then print it to the screen. How about a lit­tle math?

{{ 4 * 4 }}

This out­put tag will do the mul­ti­pli­ca­tion of 4 and 4 and print out the prod­uct. I’m unsure how prac­ti­cal it is to do math like this in the tem­plate but there you have it.

The Twig doc­u­men­ta­tion calls out that the curly braces are not part of the vari­able itself but instead an indi­ca­tor that the val­ue of the vari­able con­tained with­in should print­ed to the screen.

Com­ment Tags

This tag type is straight-for­ward but per­fect for adding com­ments to your tem­plates but not have those com­ments ren­der in the page source like HTML com­ments would.

{# Begin logic for sidebar #}

Using a sin­gle open­ing curly brace paired with a pound sign, we can cre­ate the un-ren­dered com­ments. They’ll always be avail­able in your tem­plate file but nev­er ren­dered by Twig.

Any code that is inside the com­ment tag will not be exe­cut­ed by Twig.

{# removing this for now to debug
	{% for entry in entries %}
		{{ entry.body }}
	{% endfor %}
#}

There’s a lot more to tem­plat­ing with Twig in Craft but this intro­duc­tion to three dif­fer­ent tags will get you set off in the right direction.