This chapter dives into the essential syntax of Twig, showing how to create dynamic and efficient templates. We’ll explore Twig variables, control structures (if, for), template inheritance, and filters. Understanding these syntax elements is key to building powerful and maintainable PHP templates.
1. Twig Variables: Displaying Data in Templates
Twig uses double curly braces {{ ... }} to output variables. These variables can hold data passed from your PHP code to the template.
Example:
<h1>Welcome, {{ username }}!</h1>
<p>The current date is: {{ today }}</p>
In this example, {{ username }} and {{ today }} will be replaced with the values of the username and today variables that you provide from your PHP code.
2. Control Structures: if and for
Twig provides control structures to manage the flow of your templates.
a. Conditional Statements: if, elseif, else
The if statement allows you to conditionally display content.
Example:
{% if user_is_admin %}
<p>Welcome, Administrator!</p>
{% elseif user_is_logged_in %}
<p>Welcome, User!</p>
{% else %}
<p>Please log in.</p>
{% endif %}
b. Loops: for
The for loop allows you to iterate over arrays or sequences.
Example:
<ul>
{% for item in items %}
<li>{{ item }}</li>
{% endfor %}
</ul>
This loop will iterate over the items array and display each item within a list item.
3. Template Inheritance: extends
Template inheritance allows you to create a base template that contains the common elements of your site’s layout, and then extend that template in other templates.
Example:
Base template (`base.html.twig`):
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}My Website{% endblock %}</title>
</head>
<body>
<nav>
{% block nav %}
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
{% endblock %}
</nav>
<div id="content">
{% block content %}{% endblock %}
</div>
<footer>
{% block footer %}
<p>© 2024 My Website</p>
{% endblock %}
</footer>
</body>
</html>
Child template (`page.html.twig`):
{% extends 'base.html.twig' %}
{% block title %}My Page Title{% endblock %}
{% block content %}
<h1>Welcome to my page!</h1>
<p>This is the content of my page.</p>
{% endblock %}
In this example, the child template `page.html.twig` extends the base template `base.html.twig` and overrides the title and content blocks.
4. Including Other Templates: include
The include function allows you to include another template within the current template. This is useful for reusing smaller parts of your website, such as headers, footers, or sidebars.
Example:
{% include 'header.html.twig' %}
<div id="content">
<p>This is the main content.</p>
</div>
{% include 'footer.html.twig' %}
This will include the contents of `header.html.twig` and `footer.html.twig` within the current template.
5. Filters: Modifying Output
Filters allow you to modify the output of variables. Twig comes with many built-in filters, and you can also create your own.
Example:
<p>{{ "Hello, world!"|upper }}</p> <!-- Output: HELLO, WORLD! -->
<p>{{ "This is a string"|capitalize }}</p> <!-- Output: This is a string -->
<p>{{ my_date|date("Y-m-d") }}</p> <!-- Format a date -->
This chapter has covered the essential syntax elements of Twig. You’ve learned how to use variables, control structures, template inheritance, includes, and filters. With this knowledge, you can create more complex and dynamic Twig templates for your PHP projects.
