Twig templates
Our plugin templates use the Twig engine, a modern template engine. It's a very popular and widely used solution; for example, it's employed for templates in the Symfony framework.
Twig significantly enhances the clarity and readability of markup while maintaining full control over it. Below, we provide an overview of its key features:
Using double curly brackets, you can easily inject variables into your markup. For instance:
{{ my_variable }}
When working with arrays, follow this syntax:
{{ my_array.my_key }}
{% set my_var = my_rate * 10 %}
{% set my_var = my_rate ~ " USD" %}
Twig allows you to perform any mathematical operations within brackets. For example:
{{ 5 + 10 }}
This will output 15.
{% if my_variable == 'some_value' %}
<div> Markup if the condition is met </div>
{% else %}
<div> Markup if the condition is not met </div>
{% endif %}
The 'else' part is optional.
{% if my_var is odd %}
<div> Markup for odd values </div>
{% endif %}
{% for item in my_array %}
<div>{{ item }}</div>
{% endfor %}
Additionally, you can access the current index using the
loop.index
magic variable, which starts at 1. This can be useful for detecting the first element or distinguishing between even and odd indices.Twig offers a wide range of filters that you can apply using the pipe symbol. Here are some examples:
{{ my_var|abs }} {# Returns the absolute value of a number. #}
{{ my_var|capitalize }} {# Capitalizes the first character of a string. #}
{{ my_var|raw }} {# Outputs a string without escaping HTML entities. #}
{{ my_var|upper }} {#Converts a string to uppercase. #}
{{ my_var|lower }} {# Converts a string to lowercase. #}
{{ my_var|round }} {# Rounds a number to the nearest integer. #}
{{ my_var|range }} {# Generates a range of numbers or letters. #}
{{ my_var|date("d/m/Y") }} {# Formats a date or time according to a specified pattern. #}
{{ my_var|date_modify("+1 day") }} {# Modifies a date or time by adding or subtracting a specified interval. #}
{{ my_var|default("Default Value") }} {# Provides a default value if the variable is undefined or empty. #}
{{ my_var|replace({"search":"replace"}) }} {# Replaces occurrences of a specified substring with another. #}
{{ my_var|random }} {# Generates a random number or selects a random item from an array. #}
Note: We have created a custom build of Twig (to securely integrate it with WordPress), so some filters from the official list may be absent. You can safely use the filters listed above or experiment with any filter from the official list and let us know if it doesn't function as expected.
Datetime now
{{ "now"|date("d/m/Y") }}
{# You can use 'date' and 'date_modify' filters with the 'now' string #}
Comments
{# All text within these brackets is available only for editors
and will be removed from the final output. #}
We extended Twig to include additional WordPress-related functions, in addition to its built-in functions. You can find these extended functions listed below.
{{ _query_argument('my-category-id') }} {# Retrieves the argument from the current page URL ($_GET in PHP) #}
Last modified 3d ago