Twig: The Basics

Video loading...

  • 0:16
    Twig Templating Twig: The Basics
  • 0:24
    with Leanna Pelham
  • 0:28
    Welcome to the wonderful world of Twig.
  • 0:30
    Twig is a templating language for PHP, which
  • 0:33
    is a boring way of saying that it's a tool used
  • 0:35
    to output variables inside HTML.
  • 0:38
    If a project you're working on uses Twig, then you're in luck.
  • 0:41
    It's easy to learn, powerful, and a joy to work with.
  • 0:46
    To make this interesting, let's build something
  • 0:48
    useful with Twig, like a penguin clothing store.
  • 0:51
    Actually I've already got us started.
  • 0:53
    I have a small website set up under my server's document root
  • 0:57
    and a test page called test.php.
  • 1:00
    Right now this file prepares some page title and products variables
  • 1:03
    and then includes another file.
  • 1:05
    The homepage.php file is the actual template.
  • 1:09
    It has all the HTML and we use for each to loop through them
  • 1:13
    and then echo to print out some variables.
  • 1:16
    Instead of using PHP, let's spread our templates using Twig.
  • 1:20
    The goal of the template is still the same, to print out variables.
  • 1:24
    The only thing that will change is the syntax.
  • 1:27
    In a separate file I've set up all the behind the scenes work
  • 1:29
    to use Twig.
  • 1:31
    Let's start by rendering a homepage.twig file, and once again,
  • 1:34
    passing it page, title, and products variables.
  • 1:37
    If you're a front end developer, then you
  • 1:39
    don't need to worry about this step.
  • 1:41
    All you need to know is where a Twig template is located,
  • 1:44
    and what variables you have access to.
  • 1:46
    In our project, Twig is looking for the template files
  • 1:49
    in a templates directory.
  • 1:51
    So let's create our homepage.twig there.
  • 1:55
    Just like in PHP, you write anything,
  • 1:57
    and it'll just be displayed as HTML on the page.
  • 2:04
    To see this amazing message, go to the
  • 2:06
    index.php file in your browser.
  • 2:10
    This works because we made the index.php file
  • 2:13
    render the homepage.twig template.
  • 2:15
    Whenever you're creating or editing a page,
  • 2:17
    you'll need to figure out which Twig template
  • 2:20
    is being used for that page.
  • 2:22
    There's no exact science to this, and it
  • 2:24
    depends on how your application is built.
  • 2:27
    Remember that we're passing a page title variable to our template.
  • 2:36
    To render it, write two open curly braces.
  • 2:39
    The name of the variable without a dollar sign,
  • 2:41
    then two closing curly braces.
  • 2:44
    When we refresh the page, it works.
  • 2:47
    We've just written our first line of Twig.
  • 2:50
    Whenever you want to print something,
  • 2:51
    just open Twig with two curly braces.
  • 2:54
    Write the variable name, then close Twig.
  • 2:56
    We'll get fancier in a little while with some things
  • 2:59
    called functions and filters,
  • 3:01
    but this is the most fundamental syntax in Twig.
  • 3:04
    Next, the products variable is an array that we need loop through.
  • 3:08
    Twig comes with the for tag that is able to loop
  • 3:11
    through items just like PHP's foreach.
  • 3:14
    Remember that anything we type here will be printed out raw on the page
  • 3:17
    until we open up Twig.
  • 3:19
    This time, open Twig by typing curly brace percent.
  • 3:23
    Now that we're in Twig, use the for tag to loop over products.
  • 3:28
    Product will be the variable name we use for each item as we loop.
  • 3:32
    Close Twig by adding an identical percent curly brace.
  • 3:36
    Unlike when we echoed the page title variable, the for tag needs an endfor.
  • 3:41
    Twig will loop over each item in products
  • 3:43
    and execute each line between for and endfor.
  • 3:46
    Each item and product is just a string, so let's print it out.
  • 3:50
    This works exactly like before.
  • 3:53
    We have a product variable, so we can print it by placing it
  • 3:56
    inside two open curly braces and two closing curly braces.
  • 4:05
    And when we refresh, another Twig success.
  • 4:08
    Before long we'll have these penguins looking fly.
  • 4:11
    So we've seen how to print a variable
  • 4:13
    and how to loop over a variable that's an array or collection.
  • 4:16
    This may not seem like much, but you've already seen
  • 4:19
    pretty much all of Twig's syntaxes.
  • 4:22
    To start writing Twig code in your HTML,
  • 4:24
    there are only two different syntaxes.
  • 4:27
    The double curly brace is always used to print something.
  • 4:30
    If whatever you need to do will result in something being printed
  • 4:33
    to the screen, then you'll use this syntax.
  • 4:36
    I call this the "say something" tag.
  • 4:38
    You know, because it's how you speak in Twig.
  • 4:42
    The curly percent is the other syntax,
  • 4:44
    which I call the "do something" syntax.
  • 4:47
    It's used for things like if and for tags,
  • 4:49
    as well as other things that do something.
  • 4:51
    The curly brace percent is really easy because there are only
  • 4:54
    a handful of things that can be used inside of it.
  • 4:58
    If you go to Twig's website, click documentation and scroll down.
  • 5:04
    You can see a full list of everything in Twig.
  • 5:07
    The text header shows you everything that can be used inside of a
  • 5:10
    do something tag with more details about how each of these works.
  • 5:15
    The only ones you need to worry about now are if and for.
  • 5:18
    We'll talk about a bunch more of these later.
  • 5:21
    And that's it.
  • 5:22
    We use the double curly brace say something syntax to print,
  • 5:25
    and the curly brace percent do something
  • 5:27
    when you want to do one of the things on this list.
  • 5:30
    These are the only two Twig syntaxes,
  • 5:32
    and we'll learn more tools that can be used inside of each of these.
  • 5:37
    Actually, I may have just lied a little.
  • 5:39
    There is a third syntax used for comments, curly brace pound.
  • 5:44
    Just like with the say something and do something syntaxes,
  • 5:47
    write the opening curly brace pound and also the closing pound
  • 5:51
    curly brace at the end of your comments.
  • 5:57
    Inside Twig white space doesn't matter.
  • 5:59
    This means that we can add or remove white spaces whenever we want.
  • 6:12
    Of course, this looks a bit uglier so we usually
  • 6:15
    just keep one space between everything.
  • 6:21
    Outside of Twig, all the white space is kept just like it appears.
  • 6:26
    There are ways to make Twig control the white space
  • 6:28
    of your file, which we'll talk about later.

Twig Templating

Loading ...

Twig: The Basics

Loading...
6 minutes 43 seconds // HDCC //

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.

Downloads: 
Log in or sign up to download companion files.
Additional resources: 

Twig website

Share