Advanced Views Docs
Live PlaygroundDownload PluginGet PRO
  • 💡Help Centre
  • ⚡Getting Started
    • Introduction
      • Key Aspects
      • Creating Your First View
      • Creating Your First Card
      • Plugin Terms
      • Plugin Interface
        • Field Options
    • Installation
      • Advanced Views Lite
      • Advanced Views Pro
      • Comparison Table
      • Upgrading from Lite to Pro
    • Supported data vendors
    • Starter theme
  • 🌟Display Content
    • WordPress
      • Post
      • Taxonomy terms
      • User
      • Comments
      • Menus
    • WooCommerce Product
    • Meta fields
      • Basic fields
        • Number
      • Content fields
        • Image
        • File
        • WYSIWYG
        • oEmbed
        • Gallery
      • Choice fields
        • Select/checkbox/radio
        • True / False
      • Relationship fields
        • Link
        • Post_object
        • Page Link
        • Relationship
        • Taxonomy
        • User
      • Advanced fields
        • Google Map
        • Google Map Multiple Markers
        • ACF OpenStreetMap Field
        • Date/time picker
      • Layout fields
        • Group (Pro)
        • Repeater (Pro)
        • Flexible (Pro)
    • Object fields
    • Custom Data (Pro)
    • Custom Gutenberg Blocks (Pro)
    • Mount Points (Pro)
    • Front-end assets management (Pro)
  • 🦸‍♂️Query Content
    • Basic Filters
    • Meta Filters (Pro)
      • Current Post
      • Comparison
      • Dynamic Injection
    • Taxonomy Filters (Pro)
    • Pagination (Pro)
    • Custom Data (Pro)
  • 🏆Shortcode Attributes
    • Common Arguments
    • View Shortcode
    • Card Shortcode
  • 🧙‍♂️Templates
    • Customizing the Template
    • Template engines
      • Twig
      • Blade
    • CSS & JS
      • BEM Methodology
      • WordPress Interactivity API
    • File system storage
    • Pre-built components
    • Reusable components library (Pro)
    • Live reload
    • Multilingual
    • Custom Ajax & Rest API (Pro)
  • ☕Guides
    • Display Custom Post Type (CPT) on another post
    • Display Employees (CPT) of a Company (CPT)
    • Display Nested Repeater Fields
    • Map Marker from ACF Image
    • Display all CPT items on a single map
  • 🛠️Tools
    • Export/Import
    • Demo Import
    • Settings
    • Preview
  • 🏹Troubleshooting
    • Compatibility
    • Report a bug
    • Payment Issues
    • Lite Support (Forum)
    • Pro Support
  • ⚙️Customization
    • Filters and Hooks
      • View
      • Card
    • Suggest a feature
    • Performance
Powered by GitBook
On this page
  • Built-in Twig features
  • Variables
  • Auto-escaping
  • Math
  • Conditions
  • Loop
  • Filters
  • Functions
  • Dates
  • Comments
  • Our functions
  • Pro only
  • Our filters (Pro)
  • Custom functions (Pro)
  • Custom filters (Pro)
  • Twig version

Was this helpful?

  1. Templates
  2. Template engines

Twig

PreviousTemplate enginesNextBlade

Last updated 1 month ago

Was this helpful?

The Advanced Views templates by default, utilize the, a modern and widely adopted template engine.

You can read why we use it, and compare it with the Blade alternative .

Built-in Twig features

If you're new to Twig, we provide an overview of its key features below.

You can launch the snippets and play with them in your browser using the service.

Variables

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" %}

Auto-escaping

With Twig, you don't need to worry about escaping variables anymore because Twig automatically escapes all variables passed into the template by default.

However, in some specific cases, you may still need to pass HTML without escaping. For example, when displaying a WYSIWYG field value, you should use the |raw filter like this: {{ my_var|raw }}. Without the |raw filter, HTML tags will be converted into HTML entities and displayed on the page as plain text.

Math

Twig allows you to perform any mathematical operations within brackets. For example:

{{ 5 + 10 }}

This will output 15.

Conditions

{% 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 %}

Loop

{% 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 odd and even indices.

Filters

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([precision, method]) }}  {# Rounds a number to the nearest integer. #}
{{ my_var|range(low,high[,step]) }} {# 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(from[,max]) }} {# Generates a random number or selects a random item from an array. #}

Functions

Functions, unlike filters, serve different purposes and have distinct syntax.

The key distinction between filters and functions lies in how they handle variables. Filters modify the variable they are applied to, as in "var|round," while functions operate on arguments independently.

{{ date("now") or date("10/10/2010") }} {# Creates a Date object from string (usually, used for comparison) #}

Dates

When working with date filters and functions, it's important to consider the variable type. Strings containing dates and Date objects are distinct entities, and you should keep the following in mind:

  1. Date objects cannot be displayed directly; you need to convert them into strings for this purpose.

  2. When using conditional statements like {% if %}, you cannot directly compare date strings; you should first convert them into Date objects for comparison.

The "date" filter returns a string, whereas the "date_modify" filter and "date" function return Date objects. Refer to the information below for more details.

Date filter (for output)

{{ "now"|date }} {# displays the current time #}
{{ my_date|date("Y") }} {# displays the year from the variable #}
{{ "10-10-2010"|date("d") }} {# displays the day from the string #}
{{ "+1 day"|date }} {# displays tomorrow's date #}

Date_modify filter (for modification)

{{ my_date|date_modify("+1 week") }} {# adds one week to the date #}
{{ "10-10-2010"|date_modify("+1 day") }} {# adds one day to the date #}

Keep in mind that this function returns a Date object, not a string. If you want to display the modified date, you should use the "date" filter to print the Date object in a specific format.

{{ my_date|date_modify("+1 week")|date("d/m/Y") }} {# modifies and prints the date #}

Date function (for comparison)

Converts a string into a Date object, which is useful for comparison purposes.

{{ date("10-10-2010") }} {# creates a Date object from a string #}
{% if date(first_date) > date(second_date) %}
{{ first_date|date("d/m/Y") }}
{% endif %}

Keep in mind that this function also returns a Date object, not a string. If you want to display the Date object, you should use the "date" filter to print it in a specific format.

{{ date("now")|date("d/m/Y") }}

Available date formats

  • you can use any formats with the |date filter

  • you can use most of the available date formats for the date() function. For example, "m-d-Y" (10-20-2011), "M d, Y" (October 20, 2011), or "d.m.Y" (20.10.2011).

In this way using 'datepicker.timestamp|date("d-m-Y")' is the safe way which avoids it.

Comments

{# All text within these brackets is available only for editors 
and will be removed from the final output. #}

Our functions

We extended Twig to include additional WordPress-related functions, in addition to its built-in functions. You can find these extended functions listed below.

{{ print_r(my_array) }}
{# calls the built-in PHP print_r function (displays the array for debug purposes) #}

{{ wp_interactivity_state('name', {stateArg:'some'}) }}
{# calls the built-in WordPress wp_interactivity_state function #}

{{ wp_interactivity_data_wp_context({contextArg:'some'}) }}
{# calls the built-in WordPress wp_interactivity_data_wp_context function #}

{{ paginate_links({total:'10',}) }}
{# calls the built-in WordPress paginate_links function #}

Pro only

{{ _query_argument('my-category-id') }} 
{# retrieves the argument from the current page URL ($_GET in PHP) #}

{{ _is_user_with_role("role") }} 
{# checks if user has the specified role. 
You can pass user id as the second argument, or it'll use the current user id #}

{{ _is_user_logged_in() }} 
{# calls is_user_logged_in() from WP #}

{{ _site_url("/my-page") }} 
{# calls site_url() from WP #}

{{ _home_url() }} 
{# calls home_url() from WP #}

{{ __("Some label") }} 
{# translates the label. 
You can pass the text domain as the second argument, 
or it'll use the "Text Domain" of your theme 
(declared in the headings of the style.css file of your theme) #}

Our filters (Pro)

{{ "Some label"|translate }} 
{# translates the label (alternative to the '__' function described above)
You can pass the text domain as the second argument, 
or it'll use the "Text Domain" of your theme 
(declared in the headings of the style.css file of your theme) #}

Custom functions (Pro)

Custom filters (Pro)

Twig version

If you're wondering, Advanced Views uses version 3.7.1 of the Twig engine.

You can also directly within a template:

You can create different markup based on . For instance:

You can also use and for comparison, such as:

Twig provides a straightforward way to :

Twig offers a wide that you can apply using the pipe symbol.

Click on a specific filter name on in the Twig Docs to access more detailed information.

Note: We have created a custom build of Twig (to securely integrate it with WordPress), so some filters from the may be missing. You can safely use the filters listed above or experiment with any filter from the and let us know if it doesn't function as expected.

Converts a Date object into a string based on the specified format. If you provide a string, the filter will automatically parse the date using and then convert it into a string in the requested format.

Modifies a Date object according to the argument provided and returns the modified Date object. If you pass a string, the filter will automatically parse the date using .

Tip: When you use the date parsing functions and filters, we recommend using the '.timestamp' property of the date field. This will save you from dealing with date parsing issues. For example, both US (e.g., mm/dd/yyyy) and European (e.g., dd/mm/yyyy) formats use the same delimiter, so the European format will be ignored in favor of the US format. This behavior is in line with the default behavior of the function.

You'll use the interactivity functions in Views when employing the , while paginate_links is used inside Cards when the 'Source: Page content' option is chosen.

In the Pro version of the plugin, you can add your own functions. Check to learn details.

In the Pro version of the plugin, you can add your own filters. Check to learn details.

🧙‍♂️
define variables
various conditions
odd
even
iterate through arrays
range of filters
this page
official list
official list
strtotime
strtotime
strtotime
WP Interactivity API
Note: These functions are only available in Advanced Views Pro.
Twig engine
here
Twigfiddle
this hooks guide
this hooks guide