Adding Global Variables & Custom Filters in Timber

Every WordPress site built with Timber needs Global variable because there is always some data that appears in every page like Menu and Widgets.

Timber is a plugin to allow separation between PHP and HTML files. Click here for introduction.

Both Global variable and custom filter can be added by extending TimberSite class.

The class outline is as follow:

class MyTimber extends TimberSite {

  function __construct() {
    add_filter( 'timber_context', [$this, 'add_to_context'] );
    add_filter( 'get_twig', [$this, 'add_to_twig'] );
    parent::__construct();
  }
  
  // Add Global variable
  function add_to_context( $context ) {
    // ...
    return $context;
  }

  // Add Custom filter
  function add_to_twig( $twig ) {
    // ...
    return $twig;
  }
}

new MyTimber(); // call the class

Don’t forget to require it in your Functions file:

...
require_once 'code/timber.php';
...

Let’s discuss each section above in more detail.

Global Variable (line 10)

Anything added into $context array will become global variables and accessible in all views.

The example below shows the values that are commonly set as global variables:

function add_to_context( $context ) { 
  // Site's settings like site.title
  $context['site'] = $this; 
  $context['home_url'] = home_url();

  // Menu - Timber stored it as an array so you can loop it and write custom markup
  $context['nav'] = new TimberMenu( 'main-nav' );
  
  // Link to the image inside your theme
  // Example:   <img src="{{ images }}/logo.svg">
  $context['images'] = get_template_directory_uri() . '/images';
  
  // Footer Widget - for post widget, no need to be global
  $context['footer_widgets'] = Timber::get_widgets( 'footer_widgets' );

  // ACF Options Page, if you have one
  if( function_exists( 'acf_add_options_page' )) {
    $context['options'] = get_fields( 'options' );
  }

  // WooCommerce, if installed
  if( class_exists('WooCommerce') ) {
    global $woocommerce;
    $context['woo'] = $woocommerce;
  }

  return $context;
}

Custom Filter (line 16)

We use addFilter function and pass in a special class. The class takes the filter name and a function that handles the value.

It’s quite confusing. Will be clearer if you take a look at this example below:

function add_to_twig( $twig ) {
  $twig->addFilter( new Twig_SimpleFilter( 'my_example', [$this, 'filter_my_example'] ) );
  $twig->addFilter( new Twig_SimpleFilter( 'my_example2', [$this, 'filter_my_example2'] ) );
  return $twig;
}

/**
 * Basic custom filter
 *
 * {{ post.content | my_example }}
 */
function filter_my_example( $value ) {
  // do something
  return $value;
}

/**
 * Has passed argument
 *
 * {{ post.content | my_example2( 'arg' ) }}
 */
function filter_my_example2( $value, $arg ) {
  // do something
  return $value;
}

Remember that the filter functions are still part of MyTimber class.


Conclusion

Use Global variable only on things that appear on all pages as it can slow down your site. From my experience, ACF Options is very slow, but it doesn’t matter when you use a cache plugin.

For Custom filter, try not to overuse it. Most of the time, you can avoid using the filter by processing your value in the PHP file first.

If you are interested to learn more about Timber, check out the following:

Let us know if you have trouble implementing global variable 🙂

Default image
Henner Setyono
A web developer who mainly build custom theme for WordPress since 2013. Young enough to never had to deal with using Table as layout.
Leave a Reply