KreativePro Masterclass
Hello, {first_name}
Twig Syntax
Learn to Build Websites with Craft Cms
Oops! Something went wrong while submitting the form.
Browse Lessons

Access our premium community including bonus tutorials, project files & weekly resources.


Basic Twig Syntax

On this Craft Cms lesson you'll learn the basics of Twig Syntax. We'll cover the most important tags and explain how or when to use them.


Being the best means investing in the best, no matter what level you are at, this course will take you through the entire process you need to be able to implement an idea and turn it into a fully functional business.
Manasés Padilla
Photographer & Entrepreneur
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
Noel Hale
Founder of Slush Monkeys®
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
Mae Green
Product Designer @ Dropbox

All right guys welcome back.
On this lesson I want to go over twig and the basic syntax. Now twig is simply a way to render PHP in an understandable and simple way. So if we're looking at here at symphonies documentation of twig. We can see that there is a lot of examples of what we are actually going to pull from PHP.
Some of this includes functions, variables, and expressions, these little tags we will be using in order for us to pull the data from our craft CMS. Now, I don't want to show you this document entirely because it might overwhelm you and you might think: "Hey, you know, this is a lot to digest." So I feel the best way to learn is to actually get our hands dirty.
All right. So you're probably wondering by now, where does this syntax exist? Where will it live? So if you notice the very first page of the deploy test we have running. This little landing page is actually an index.twig. If we go over to our craft folder under templates, you'll notice that there's the index.twig.
If I were to open up this file with our visual code editor or IDE, you'll notice that a lot of the text is not highlighted. And the reason is because we need to actually install an extension to be able to visualize the syntax. So click on the extensions icon and simply look for twig. And then we want to install any of these options.
Once we install that we need to restart visual studio code in order for it to work.
All right so there we go. The actual twig now is got the color syntax that we want. Okay. And so what we want to do ideally, is have all of our webflow templates that we have created, and create and have them in our templates folder. So this templates folder, it's going to highlight it here, is going to be where we're going to lay that out.
Now, before we actually start doing that though. What I want to make sure that we have done is gone and selected a couple of the templates or HTML documents that we plan on using and cleaning them up using the commenting that we saw in previous lesson. So I've already gone ahead and done that. So, for example, you can see here, I've commented the entire head of the document, so that it's easier for us to identify what webflow did with our structure.
So we have the SEO Meta open graph, external CSS. And all of the extra elements and I've actually highlighted that with comments to help me visualize, okay, this is the intro, the features, the products, as I scroll down, I can see that scripts also is over here. So what I've done is I've just.
Selected a few of these and try to see if there's any patterns happening and see if there's any repetitive elements that we could repurpose similar to how webflow works, webflow, what it does. It creates symbols. And if we go over to our symbols panel, we have created a set of feet or a set of symbols that we can repurpose anytime we need, this is exactly what we want to do with craft so that we keep this continuation of the dry methodology.
Don't repeat yourself. And we want to make sure that we have as many components and repurpose them throughout our website.
All right. So what I've done is I've created a document here so we can follow along and see some of the tags we will learn from syntax and twig. As you know already, the commenting tag is just the opening <!, and you will know that the commenting won't be visible and it helps us kind of understand the structure webflow gave us.
But now, the commenting in syntax in twig is like this. You have a curly bracket, a hash, and then closing brackets {# }, another type of tag would start with a curly and a percentage {% }. This is the most popular or common one we will use. Now we can combine these tags with parameters in this case, exit 404, what it does it just simply redirects the user to that page.
Another one we can use is a type of variable. So by setting a variable name in this case name equals, and then within quotes, we have the value, which is Neftali.
The third type of tag is called the print statement. The print statement will simply output whatever value we have as into our dynamic template.
Or in this case, a variable, I can simply call that variable and using a double curly brackets. I can print out all the value in a rendered page.
Cool thing we can do is actually combine variables together by adding an expression. In this case, I'm setting up a full name, variable, and I'm just going to reuse the name, which I've added up above. And I'm adding it a little curly icon with a string of Loria and what that will output is Neftali Loria together.
So it's concatenating those two strings together. All right. So there's a type of a tag called the function tag. And there's a couple that I want to look at. This one is called include. It's going to include any other template inside our current template. Right? So it's almost like a symbol.
Think about these includes as symbols. We're going to see that in the next lesson.
We can also use functional tags to pull in data from .env files, a very popular one is "getenv" and is simply put in the value of the variable, it will output that into our rendered page.
The next one is filters. Filters work, t's actually really fun because they will be able to output all sorts of things on our variables. And we can actually, in this case, I'm using the upper, which is it's just going to output all caps. Another type of filter would be date. We can use that in for example, a block post, we want to output the actual date by specific style. So month, day, year, we can organize it by year, day, or month. And in this case, if you just use the filter date, it will do it automatically for you.
There's also different types of values that you can use within a variable. So think about this, like, okay, you have a number value, right? You can just, without any kind of quotation marks, and then you have the string value, which is what we saw in previous ones. Like Loria for the name. And then in this case, this is a boolean type of value, which is a true or false.
We can use this to detect the type of a variable if it's open or not. So it's like a one and zeros kind of thing, you know?
The final type of value is just an array. So these arrays are very common in PHP and all type of development languages. It's just adding multiple objects within one single variable, and we can pull that data and output it in multiple forms.
So, for example, let's say we wanted to create a list of all those to-do list items. We simply wrap that with any for function, and we're going to create a variable called item inside of the to-do list so that what it's going to do is going to loop through all the items one, two, three, and then it's going to output items using the item variable and just like that, we are able to access that array and output it into our rendered page, super simple and super clean.
Finally let's take a look at conditionals. Conditionals are just going to compare one valid to the other, a very popular way to use it is for example, if a user is currently logged in into the system, then we can show them a log out button, but if the user is not logged in, we just show them a login button. So, this is just a very simple example of how we can use conditionals.
All right. So let's take a look at operators. So operators work this way. You can output any value or string and then start multiplying it. Adding it, as long as they are numbers, we can output pretty much anything we want using these operators.
So this is quite handy when we're dealing with more advanced data that we want to make sure the system takes care of doing all the work.
And then finally containment is just a way for us to check if there's something inside a specific array. So if one is inside this list then equals true. If it's not, then it was false.
It's just a simple way to access that information in a print statement.
Right. So what I want to do now is simply go over to my craft dashboard and jump into sections. And what we want to do is go into cast member settings, and down below where we have the entry URI, we want craft to redirect anything that lands in that URL, which is cast members to redirect them to a template in our templates folder. Let's create a new file in our visual studio code.
And we're going to call this a new file cast.twig. Right in here, the actual print. I want to print out the value from that dynamic template. So in this case, I want to get the actor's name. Which is the entry title, and I want to get the entry biography. So I just simply put in there, the basic HTML tags, save that.
And then I can go back, refresh this page. And so you'll notice now that I click on the template, you'll see the cast template available. I can select that one and save it. And if I go into my entries, I can click on any of these ones and I can preview them by clicking on the little icon on the right, that will take me to the URL and slug.
So I think this is really cool now that we have the power to pull in the data from our craft database and just dump it into a simple template like that. So in the next lesson, what I want to do is go over a template inheritance and how we can customize our templates to have the styles and colors and everything.
Bring that over to our Craft system. I'll see you there.

Coming Soon

Designers ultimate weapon of choice
Digital Media Masterclass by Neftali Loria

Neftali Loria

Author & Instructor
KreativePro Masterclass Bundle

Access our premium community including bonus tutorials, project files & weekly resources.

Welcome to the Tribe! 💜 Something cool is coming your way...