{"id":1011,"date":"2019-12-08T20:22:14","date_gmt":"2019-12-08T13:22:14","guid":{"rendered":"https:\/\/lab.wptips.dev\/?p=1011"},"modified":"2020-05-04T22:35:39","modified_gmt":"2020-05-04T15:35:39","slug":"global-var-n-filters-in-timber","status":"publish","type":"post","link":"https:\/\/pixelstudio.id\/blog\/global-var-n-filters-in-timber\/","title":{"rendered":"Adding Global Variables & Custom Filters in Timber"},"content":{"rendered":"\n

Timber<\/strong> is a plugin to allow separation between PHP and HTML files. Click here<\/a> for introduction.<\/p><\/blockquote>\n\n\n\n

Both Global variable and custom filter can be added by extending TimberSite<\/code> class.<\/p>\n\n\n\n

The class outline is as follow: <\/p>\n\n\n\n

class MyTimber extends TimberSite {\n\n  function __construct() {\n    add_filter( 'timber_context', [$this, 'add_to_context'] );\n    add_filter( 'get_twig', [$this, 'add_to_twig'] );\n    parent::__construct();\n  }\n  \n  \/\/ Add Global variable\n  function add_to_context( $context ) {\n    \/\/ ...\n    return $context;\n  }\n\n  \/\/ Add Custom filter\n  function add_to_twig( $twig ) {\n    \/\/ ...\n    return $twig;\n  }\n}\n\nnew MyTimber(); \/\/ call the class<\/code><\/pre>\n\n\n\n
Don’t forget to require it in your Functions file:<\/p>\n\n\n\n
...\nrequire_once 'code\/timber.php';\n...<\/code><\/pre>\n\n\n\n
Let’s discuss each section above in more detail.<\/p>\n\n\n\n
Global Variable (line 10)<\/h2>\n\n\n\n
Anything added into $context<\/code> array will become global variables and accessible in all views.<\/p>\n\n\n\n
The example below shows the values that are commonly set as global variables: <\/p>\n\n\n\n
function add_to_context( $context ) { \n  \/\/ Site's settings like site.title\n  $context['site'] = $this; \n  $context['home_url'] = home_url();\n\n  \/\/ Menu - Timber stored it as an array so you can loop it and write custom markup\n  $context['nav'] = new TimberMenu( 'main-nav' );\n  \n  \/\/ Link to the image inside your theme\n  \/\/ Example:   <img src=\"{{ images }}\/logo.svg\">\n  $context['images'] = get_template_directory_uri() . '\/images';\n  \n  \/\/ Footer Widget - for post widget, no need to be global\n  $context['footer_widgets'] = Timber::get_widgets( 'footer_widgets' );\n\n  \/\/ ACF Options Page, if you have one\n  if( function_exists( 'acf_add_options_page' )) {\n    $context['options'] = get_fields( 'options' );\n  }\n\n  \/\/ WooCommerce, if installed\n  if( class_exists('WooCommerce') ) {\n    global $woocommerce;\n    $context['woo'] = $woocommerce;\n  }\n\n  return $context;\n}<\/code><\/pre>\n\n\n\n
Custom Filter (line 16)<\/h2>\n\n\n\n
We use addFilter<\/code> function and pass in a special class. The class takes the filter name and a function that handles the value.<\/p>\n\n\n\n
It’s quite confusing. Will be clearer if you take a look at this example below:<\/p>\n\n\n\n
function add_to_twig( $twig ) {\n  $twig->addFilter( new Twig_SimpleFilter( 'my_example', [$this, 'filter_my_example'] ) );\n  $twig->addFilter( new Twig_SimpleFilter( 'my_example2', [$this, 'filter_my_example2'] ) );\n  return $twig;\n}\n\n\/**\n * Basic custom filter\n *\n * {{ post.content | my_example }}\n *\/\nfunction filter_my_example( $value ) {\n  \/\/ do something\n  return $value;\n}\n\n\/**\n * Has passed argument\n *\n * {{ post.content | my_example2( 'arg' ) }}\n *\/\nfunction filter_my_example2( $value, $arg ) {\n  \/\/ do something\n  return $value;\n}<\/code><\/pre>\n\n\n\n
Remember that the filter functions are still part of MyTimber<\/code> class.<\/p>\n\n\n\n
See the Full Code in Github<\/a><\/div>\n\n\n\n
\n\n\n\n
Conclusion<\/h2>\n\n\n\n
Use Global variable only on things that appear on all pages<\/strong> 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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
If you are interested to learn more about Timber, check out  the following:<\/p>\n\n\n\n