Tom Pickering
Updated on 31 Aug 2023 · 5 minute read

The Beginner's Guide to Twig in Craft CMS

Contents

Craft CMS is our content management system of choice and has been for quite some time now. As a Web Developer, I can tell you that it is an absolute beauty to work with. At the heart of Craft CMS lies Twig, a popular templating engine that makes building dynamic websites a breeze.

What is Twig and Why Use it in Craft CMS?

Twig provides a user-friendly way to translate the data that is set in Craft’s control panel into HTML, which can be viewed by the user. With Twig, you can easily manipulate data, generate HTML, and create reusable components. 💡

Craft CMS leverages Twig as its default templating language because of its simplicity, security, and performance. Whether you're a beginner or an experienced developer, understanding Twig will give you the power to get up and running with Craft CMS.

Let's dive in and explore the basics of Twig! 💪

Shape April 2022 HR 193

Jason coding in the studio

Basic Twig Syntax for Craft CMS

Twig uses double curly braces {{ }} to denote variables and expressions. These placeholders can be used to output dynamic content on your website. For example, if you want to display the title of an entry, you can use the following code:

<h1>{{ entry.title }}</h1>

In addition to variables, Twig supports control structures such as conditionals and loops. You can use if statements, for loops, and other logic to customize the display of your content based on specific conditions. Here's an example of an if statement in Twig:

{% if entry.author %}
     <p>Written by: {{ entry.author }}</p>
{% endif %}

If you want to loop through some entries that you have created in the control panel, it’s as easy as:

{% for entry in craft.entries %}
     <p>{{ entry.title }}</p>
{% endfor %}

You can also loop through a basic array of data using the same for loop structure

{% for colour in ['red', 'green', 'blue'] %}
    This colour is {{ colour }}
{% endfor %}

To make things a little tidier and ‘DRY-er’ (Don’t repeat yourself!) we can also set variables like so:

{% set colours = ['red', 'green', 'blue'] %}

Twig also provides filters and functions that allow you to modify and manipulate data. You can apply filters to variables to transform their output. For instance, you can capitalize a string using the capitalize filter:

<p>Today is {{ now | date }}</p>

To make sure you don’t forget what some parts of your code are doing, you can leave comments in Twig using the following:

{# Hey there, his is a comment! #}

Even with these basics, there's enough for you to really get going with Twig and start to bring in some dynamic functionality to your Craft CMS website.

Advanced Twig Techniques for Craft CMS

Once you’ve got your head around the basic syntax of Twig, you can start to explore some more advanced techniques. Take a look at the following examples:

Extends

Twig allows you to create reusable templates and extend them to build consistent layouts across your website. You can define a base template and then extend it in other templates using the extends keyword.

{# -- Template '/_layout/base.twig' -- #}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="{{ currentSite.language }}">
<head>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>
        {{ title ?? siteName }}
    </title>

</head>
<body>

  {% block body %}
  {% endblock %}

</body>
</html>
{# -- Template '/_pages/general.twig' -- #}

{% extends "_layouts/base.twig" %}

{% set title = 'My new page' %}

{% block body %}
    <h1>
        This is my fancy new Craft CMS website.
    </h1>
{% endblock %}

Includes

With Twig's include statement, you can break your templates into smaller, manageable chunks and include them wherever needed. This promotes code reusability and keeps your templates organised. A prime example of this is for creating product thumbnails. 

{# -- Template '/_components/cards/product.twig' -- #}

{% set product = product ?? null %}

{% if product %}

    <a href="{{ product.url }}" class="product">

        {% if product.image|length %}
            <img src="{{ product.image.one().url }}" class="product__image">
        {% endif %}

        <div class="product__title">
            {{ product.title }}
        </div>
        <div class="product__price">
            {{ product.price|commerceCurrency() }}
        </div>

    </a>

{% endif %}

{# -- Template '/products/index.twig' -- #}

{% for product in craft.products %}

    {% include '_components/cards/product' with {
        product: product
    } %}

{% endfor %}

Macros

Twig's macro functions let you define reusable snippets of code. You can create macros for common tasks and call them wherever necessary, reducing code duplication and improving maintainability.

{% macro navItem(label, path) %}
    <li class="nav-item"><a href="{{ url(path) }}">{{ label }}</a></li>
{% endmacro %}

<nav class="global-nav">
    <ul>
        {{ _self.navItem('About', 'about') }}
        {{ _self.navItem('Blog', 'blog') }}
        {{ _self.navItem('Contact', 'contact') }}
    </ul>
</nav>

Embeds

{# -- Template '/_components/drawer.twig' -- #}

{% set heading = heading ?? null %}

<div class="drawer">
    
    <div class="drawer__overlay">
    </div>

    <div class="drawer__content">

        {% block drawerContent %}    
        {% endblock %}

    </div>
</div>
{# -- Template '/_layouts/global.twig' -- #}

{% embed '_components/drawer' with {
    heading: 'My Basket'
} %}

    {% block drawerContent %}

        {% for lineItem in craft.commerce.lineItems %}

            {% include '_components/cards/product.twig' with {
                product: lineItem.purchasable.product
            } %}

        {% endfor %}

    {% endblock %}

{% endembed %}

By harnessing these advanced Twig techniques, you can create modular, maintainable, and scalable Craft CMS templates.

In conclusion, Twig is a fantastic tool that allows developers to create beautiful and dynamic websites in Craft CMS right alongside HTML, CSS and JS. What we’ve covered in this article really is just the basics of what you can do with Twig in your Craft CMS projects.

So, go ahead, give Twig a try, I dare you.

Happy coding! 🎉✨

Shape April 2022 HR 156

We love Craft CMS at MadeByShape in Manchester

Written by
Tom Pickering
I've been at Shape for around 8 years now. I bagged a couple of weeks of work experience at the end of my first year at Salford Uni and from then on, well what can I say, they couldn't get enough of me.

Related Blogs

Follow Us On Social Media

© MadeByShape Ltd 2023. Web Design Manchester
Company Reg Number 10529058. All Rights Reserved. Privacy Policy