Meta Box Views Twig Cheat Sheet

Introduction

Meta Box is a custom fields and framework plugin used to extend WordPress. The core “framework” plugin is available for free from the WordPress plugin directory and doesn’t have a user interface, but instead provides functionality for all of the many Meta Box extensions. Some of the extensions are free and others are premium. By default WordPress has no way to display custom fields and Custom Post Types on the front-end of your site.

The Meta Box solution for outputting your custom fields is the Views extension. Views lets the site builder create a template using HTML, CSS, JavaScript, and the Twig templating language. You can also use the Meta Box helper proxy inside of a View to call any WordPress function. Meta Box Views is a well-rounded and complete solution. This post is a Twig cheat sheet for Meta Box Views users. If you know HTML, CSS, and any programming language then Meta Box Views is very doable. If you don’t, then it may be too advanced for starting out.

There is an overview of Meta Box Views and a walk-through of using Views to create Custom Post Type templates. Meta Box has documentation on the Views extension. There is also official Twig documentation available. Meta Box uses version 3.x of the Twig language.

Three Basic Curly Brace Options

The Twig templating language has a lot of functionality. Meta Box Views uses some of this behind the scenes for managing the Twig templates you create and the good news is that we don’t need to learn about that side of Twig. What we need to focus on are the features for outputting and manipulating WordPress dynamic data simply or in a loop.

Comments

You add a comment in the template using a curly brace and a hash sign.

{#  Here is a comment  #}

Output Values

Output variables to the page using double curly braces.

{{ post.title }}

Meta Box adds the double curly braces automatically when you insert a field using the field list in the interface for creating Views.

Perform An Action

You perform an action by surrounding it with a curly brace and a percent sign.

{%  Do something here  %}

Apply Filters to Output Values

You apply a filter to a value by chaining it after the value using the bar or filter key ‘|’. Twig has more than 50 filters.

{{ post.title|upper }}

Some commonly used filters include:

• upper – Upper case the value.
• lower – Lower case the value.
• capitalize – Upper case the first character and lowercase the rest of the word.
• trim – Removes whitespace from the beginning and end of the value.
• date – Formats the date to the supplied format. The function accepts a format and time zone parameters.

Meta Box will give you a list of date format options when you insert a date field using the field list.

And Meta Box adds the filter values for you.

Operation Syntax Examples

Set Variables

Here are some examples of setting variables. You use the ‘set’ directive. A single value:

{% set name = 'David' %}

Concatenate strings using the tilde character:

{% set name = 'David' ~ ' McCan' %}

An array:

{% set family = ['Dad', 'Mom', 'Buddy', 'Sis', 'Baby'] %}

Operators

Here are some common operators. See the full documentation if you need advanced options.

Math

Addition:

{% set result = 1 + 1 %}

Subtraction:

{% set result = 2 - 1 %}

Multiplication:

{% set result = 2 * 2 %}

Division:

{% set result = 10 / 2 %}

Logic

Use lower case: and, or, not

Comparison

Use: ==, !=, <, >, >=, and <=

For a strict comparison, like the ‘===’ operator in PHP to test that both variables are equivalent and the same data type:

{% if inventory.currency is same as(order.currency ) %}
    <p>No currency conversion needed.</a>
{% endif %}

Conditionals

Use lowercase: if, elseif and else

{% if user.first_name == 'David' %}
   <p>Hello David</p>
{% elseif user.first_name == 'John' %}
   <p>Hello John</p>
{% else %}
   <p>Hi</p>
{% endif %}

If you want to test if an array has values:

{% if users %}
    {% for user in users %}
        <p>{{ user.first_name }}</p>
    {% endfor %}
{% endif %}

If you want to test if a variable ‘is defined’:

{% if users is defined %}
    {% for user in users %}
        <p>{{ user.first_name }}</p>
    {% endfor %}
{% endif %}

Loops

A for loop uses this type of syntax where after the “for” operator you supply a variable name and then the “in” operator followed by the query or array name.

{% for user in users %}
  <p>{{ user.first_name }}</p>
{% endfor %}

The for loop has an built in ‘else’ clause in case the object is empty.

{% for user in users %}
  <p>{{ user.first_name }}</p>
{% else %}
  <p>No users found.</p>
{% endfor %}

Meta Box has two built in loop helpers that you can pick from the fields list. The current query loop:

And one for pagination:

Not Twig But Useful

Meta Box Views exposes a helper PHP proxy called ‘mb’. Using this you can call any of the built in WordPress functions from within the View. For example, to get the number of comments in a single post template:

{{ mb.get_comments_number() }}

Conclusion

The actual Twig mastery needed for using Meta Box Views is usually on the basic side. Of course if you need to do math, string manipulations, use regular expressions and so on, it is a good idea to check the official documentation. I hope this cheat sheet helps. Please let me know in the comments if there are mistakes or general examples that would be helpful.