Twig Templating

Twig is a templating language for PHP, which is a boring way of saying that it’s a tool used to output variables inside HTML. In this series we'll show you how to use Twig from the ground up, clearly pointing out its syntax, and then graduating to some really neat and advanced tricks. We'll start with a look at Twig syntaxes, functions and filters. Then we'll get into the world of debugging with the dump() function. With the basics under control, we'll move to handling arrays and objects. template inheritance, tests, looping tricks, and macros (Twig functions).

To make this interesting, we're going to build something useful with Twig, like a penguin clothing store! We're starting out with a small website set up under your web server’s document root and a test page called test.php, which you can find in the series demo site download. In this lesson, you will create your first Twig template, render a variable, and learn the basic Twig syntax you'll need to know.

Additional resources

Twig website

Just like PHP or JavaScript, Twig has functions that can be used once we’re inside either a Twig delimiter. To see the built-in functions, check out the bottom of the Twig documentation page. In your application, especially if you’re using Twig inside something like Symfony or Drupal, you may have even more functions available to you. Fortunately, the syntax to use a function is always the same: just check out your project’s documentation to see what other goodies you have. In this tutorial, you will start using Twig functions and filters to get the length of a collection in our demo site. We'll also play around with the dump function to see how we can go about debugging Twig.

Additional resources

Twig documentation

Until now, we’ve been working with simple values like pageTitle or products, which is an array that contains simple values where we loop over and print each out. In this tutorial, you will work with more complicated arrays, using keys, and figure out how to get at object data as well.

If we view the HTML source of our project so far, we’ll see just the HTML tags and printed variables from our homepage.twig file. So far, there’s no HTML layout, head or body tags, but since our project has been ugly long enough, in this tutorial we'll add these. Instead of just putting these in our homepage file, we're going to make this more flexible by using template inheritance, so we can reuse these pieces in other template files as we grow our site. We'll be diving into the world of Twig extends and blocks, and talking about how to avoid common mistakes.

Additional resources

Twig extends documentation

Using a base layout is very common, and we’ve implemented that in the previous tutorial. Sometimes you also need to include some other templates on only select pages. In this tutorial you are going to add a sales banner to the pages using the include function, and working with the variables we can pass there.

Additional resources

Be sure to check the documentation for the version of Twig in your codebase for the correct syntax and usage.

• Documentation for include function: 1.x | 2.x | 3.x

In our last tutorial we have things set up to include a new template, but we are currently getting an error, due to not passing the correct variable. In this tutorial we'll see how to fix this problem by adding a "defined" test to our code, which will check to see if the variable is defined in the _banner.twig template, and default to "lightblue" if it is not.

Additional resources

Twig defined test documentation

Our products are printing out a bit weird right now because they’re floating, but not breaking correctly. To fix this, we need to wrap every three products in their very own row. In this tutorial, you will use a "divisibleby" test to see if the item number we’re on is divisible by three, and then loop through them. We'll also clean up our if statement for our background color, by implementing an inline if syntax.

In this tutorial we're going to purposely make some common Twig mistakes, debug them, and figure out how to fix them. We'll also look at a way to make parts of your Twig code easily reusable, using macros.

In this tutorial we're going to play with some extra nice things you can do with Twig. We're going to get expert control of our blocks with the block function, work with concatenating strings, controlling our whitespace, and using undefined variables with the default filter. We'll wrap things up with a look at escaping HTML. Whenever you render content that may have been filled in by the user, you need to escape it. This prevents people from writing HTML tags that you don’t want or, worse, JavaScript code that could be used for cross-site scripting attacks.