How to convert php template to Timber (Wordpress)

I'm fine creating a brand new Timber template, but I need to override a plugin template (MEC Events) - the plugin support give help with that but its in php, which works and brings in the header and footer from my base twig template, but doesn't include the post.thumbnail and post.title on those which it should.

In any case I'd like to keep the whole site in Timber/Twig ideally, but don't have a clue where to start turning this into a Timber template. Here's the php template, any help greatly appreciated:

<?php
/**
 * The Template for displaying all single events
 */

get_header();

$single = new MEC_skin_single();
$single_event_main = $single->get_event_mec(get_the_ID());
$single_event_obj = $single_event_main[0];

// Date Widget
$single->display_date_widget($single_event_obj);
// Time Widget
$single->display_time_widget($single_event_obj);
// Location Widget
$single->display_location_widget($single_event_obj); // Show Location
// Label Widget
$single->display_label_widget($single_event_obj);
// Export Widget
$single->display_export_widget($single_event_obj);
//Social
$single->display_social_widget($single_event_obj);

get_footer();

Solution

I’m not familiar with the MEC events calendar, but from looking at your code snippet, I think you could make it work, at least to a certain level.

You have these three lines, that kind of prepare the data that should be displayed in a template.

$single = new MEC_skin_single();
$single_event_main = $single->get_event_mec(get_the_ID());
$single_event_obj = $single_event_main[0];

With Timber and Twig, you’ll want to prepare your data in PHP and then pass it to your Twig template. Here’s how I would do it.

<?php

$context = Timber::get_context();

$single            = new MEC_skin_single();
$single_event_main = $single->get_event_mec( get_the_ID() );

$context = array_merge( $context, [
    'single'           => $single,
    'single_event_obj' => $single_event_main[0],
] );

Timber::render( 'single-event.twig', $context );

single-event.twig

{% extends 'base.twig' %}

{% block content %}

    {# Date Widget #}
    {{ single.display_date_widget(single_event_obj) }}

    {# Time Widget #}
    {{ single.display_time_widget(single_event_obj) }}

    {# Location Widget #}
    {{ single.display_location_widget(single_event_obj) }}

    {# Label Widget #}
    {{ single.display_label_widget(single_event_obj) }}

    {# Export Widget #}  
    {{ single.display_export_widget(single_event_obj) }}

    {# Social #}
    {{ single.display_social_widget(single_event_obj) }}

{% endblock }

In Timber, you usually have a base template that you extend. And in that base template, you define blocks where your content is going to be placed in. That’s what the {% extend %} and {% block %} tags are for. With this, you can get rid of get_header() and get_footer().

Because $single is an object with display_*_widget() methods, we can access that function through the dot notation. The methods need a $single_event_obj as a parameter, so we make sure this variable is also passed to the template data.

In case you now need access to post.thumbnail and post.title, you can also prepare a post variable in your PHP template:

<?php

$context = Timber::get_context();

$single            = new MEC_skin_single();
$single_event_main = $single->get_event_mec( get_the_ID() );

$context = array_merge( $context, [
    'post'             => Timber::get_post(),
    'single'           => $single,
    'single_event_obj' => $single_event_main[0],
] );

Timber::render( 'single-event.twig', $context );