Adding Global Twig Variables

Have you ever had the need to set global variables that can be used across multiple Twig templates? Then you might have tried to create a Twig Template, set a few variables and included that in another template, only to discover that you couldn’t get to those variables because they are scoped to the original template only.

But now, we figured there’s a way around that using just two simple functions.

Using the PHP $GLOBALS as our store

We are going to use the PHP globals to store and get our settings variable from. First, go to the Twig Templates CPT on the dashboard and create a new Twig Template.

Let’s start with this simple setup. Copy and Paste the code below to your Twig Templates code editor and make sure the title and slug for the template are both called 'variables'

% if not toolbox_from_globals( 'global_settings' ) %}
{% 
	set global_settings = toolbox_to_globals(
    	{
			'button_text' : 'Click Here',
            'colors' : {
            	'background' : '#500050',
                'button_color' : 'red',
            }
		}
        
        , 'global_settings' )
%}
{% endif %}

Now let’s dissect the template:

{% if not toolbox_from_globals( 'global_settings' ) %}

Before we will be attempting to write our variable, we are checking if it already exists. The toolbox_from_globals function is also used to get the variable(s) later on in our template that renders something to the browser.

{% set global_settings = toolbox_to_globals( { ... } , ' global_settings' ) %}

Here we use the toolbox_to_globals function to store our value, array or object to a index called ‘global_settings’ (second argument of the function). In order to make sure you don’t overwrite other existing global variables they are prefixed behind the scenes.

Now, when we include this template, on it’s first inclusion it will create the global so that every next template that also includes it has access to the same variables.

{# 
    load the variables template 
    which should set the global variable 'global_settings'
#}
{% include 'variables.twig' %}
{#
    use global_settings global as settings
#}
{% set settings = toolbox_from_globals( 'global_settings' ) %}
{#

#}
<div style="background-color: {{ settings.colors.background }};padding:20px;">
    <button style="background-color:{{ settings.colors.button_color }};">
        {{ settings.button_text }}
    </button>
</div>

Adding and using the variable in your templates

Now, let’s create another Twig Template or add a (Beaver Builder) Timber Posts Module. Add the following code to the editor:

This is a pretty crude example, but should get the point on how to use it across pretty clearly. Of course, the first step taken is to include the ‘variables.twig’ template we have just created. If you remember, it adds a global variable for which we have used the name ‘global_settings‘. So, after the include, we add/set a variable named ‘settings‘ and use toolbox_from_globals to get our named variable. Now we are free to use the values stored in the settings variable.

Using on multiple modules/templates

In case you wonder: “Can this be included on multiple templates?” Yes, it can! You will need to add both the include and toolbox_from_globals in such template if you want to use the settings, but since our variables.twig template checks if the global variable already exists, it only load the variables already stored in memory. It should thus behave like any other global variable that is reused in a function call.