Override Timber templating sytem

[redsoxfan2499]

I am new to Timber and I have inherited a site that is using Timber and Twig. I need to know if there is a way to overide or skip over the Timber system for one template. I have a very complicated custom template I need to create and I want to bypass the system for this one template. I have tried in both the functions, index file to check for if the template is being used to not load all of the Timber files but not having success.

Thanks in advanced for any help.

[jeremypetersen]

Hi,

Just write your template (PHP file) as usual, without calling any Twig file. Your template will render correctly in accordance with the usual WordPress template hierarchy.

Timber is powerful as it allows you to "twig" the files you want and to use the classic full PHP method when needed.

---

Edit :

The only problem you'll encounter is that the main structure of the website is usually contained in a base.twig file that is extended in all the other pages.
So if you create your own separate PHP file, you'll have to render again everything that was render in Twig (eg. header, footer, sidebar...) in a PHP way :(

Then the best solution would be to create your PHP file, render a Twig file which extends base.twig and, in the main content (usually {% block content %}), call a PHP template part file where all your "custom and complicated code" will be.

[redsoxfan2499]

Thanks for the quick response.

So I create a custom template and for testing I grab the normal WP Page code.
And I get 500 white screen error with This page isn’t working.

any suggestions?

[redsoxfan2499]

So it is just printing out get_template_part.

{% extends "base.twig" %}

{% block content %}

get_template_part('test.php')
{% endblock %}

[jarednova]

You can't use PHP like that in a template. To call methods like that you need to tell Twig that it's a PHP call and not merely a piece of text...

{% extends "base.twig" %}

{% block content %}

    {{ function('get_template_part("test.php")') }}

{% endblock %}

[jeremypetersen]

@redsoxfan2499 exactly :) And in your template part, you just have to write what needs to be output in the main content of the page, as the global things (eg. header, footer, sidebar...) should be rendered by extending the base.twig file. So don't call usual get_header, get_footer... functions.

[redsoxfan2499]

Guys, thanks for all the input and help. So I am using Jareds exact code. I have the test.php file in same directory as my test.twig file and nothing is printing out. The header and footer from the base twig is working just not my test.php getting called.
{% extends "base.twig" %}

{% block content %}

{{ function('get_template_part("test.php")') }}

{% endblock %}

test.php file . I am just echoing out Test.

[jarednova]

@redsoxfan2499 it's possible that there could be path issues (I've never tried to call a template_part from within a Twig file). Try making a function in your functions.php file that you can call that also echos "TEST" or something; then go from there to debug where the fault might lie

[redsoxfan2499]

Well, I have tried multiple things without success. So since I a new to Timber, I went to learn using the Video Tutorials which are out of date. So then I went to the Documentation. Of course I have downloaded Timber plugin and activated it. I also downloaded the starter theme from the docs. The docs are out of date a bit from what I am seeing on in the starter theme. So following directions trying to learn template inheritance, I tried to extend the single.twig file and then created a single-test.twig file. The single.twig file of course extends the base.twig file. then following the directions, I added this to the single.twig

{% block title %} <h1 class="article-h1">{{ post.title }}</h1> <h2 class="article-h2">{{ post.subtitle }}</h2> {% endblock %}

here is my single-test.twig file.
`{% extends "single.twig" %}

{% block title %}

TEST

{% endblock %}`

It does not work. I also noticed in the docs it states create files in the views folder but in the starter theme it is called templates.

I am using Timber 1.7.1, WP 4.9.8, and ACF 4.4.12 and ACF Pro 5.7.2.

[jake46a]

@redsoxfan2499

Yes some of the docs are out of date, but we are working on fixing that. here is some code that I use for my base in my template.

In the single.php located in the template directory, for example:
mytemplate/single.php
I have:

<?php
use Timber\Timber;
$context         = Timber::get_context();
$context['post'] = Timber::query_post();

Timber::render( 'pages/single.twig', $context );

I took out a lot of my other code such as next/previous functions, comment function and just put in the basics.

My directory structure is all under views so when I refer to Timber::render( 'pages/single.twig', $context ); that is located at:

mytemplate/views/pages/single.twig If the file can not be found, you will get a blank screen and in the error log it will tell you so. From there you can adjust either your function call to the location or adjust your file structure.

Here is my single.twig

{% block content %}
    {% include 'partials/post-card.twig' %}
  
{% endblock content %}

Once again I removed a lot of the other code I have, but when I call the base, I am extending from that, not from single.twig. I am using bootstrap so for me I use calls to partial files with a reference to what I am calling. Using partials allows me to easily customize my base template for a client development job.

Following the same logic here are the locations of the files I am calling.
mytemplate/views/layouts/timber-boot-base.twig

and

mytemplate/views/partials/post-card.twig

Here is my timber-boot-base.twig

  {% include 'partials/html-header.twig' %}
{% endblock html_head_container %}
<header id="masthead" class="site-header">
  <body class="{{body_class}}" data-template="timber-bootbase.twig">
      {% block nav %}
      {% include 'partials/nav.twig' %}
    {% endblock  nav %}
</header>

{% block headbarcontent %}
{% endblock headbarcontent %}

{% block carouselcontent %}
{% endblock carouselcontent %}

{% block parallaxcontent %}
{% endblock parallaxcontent %}

{% block parallax2content %}
{% endblock parallax2content %}

{% block jumboherocontent %}
{% endblock jumboherocontent %}



<main role="main" class="container pl-0 pr-0">


  {% block productextcontent %}
  {% endblock productextcontent %}

    {% block productcontent %}
    {% endblock productcontent %}

    {% block featuredcontent %}
    {% endblock featuredcontent %}

    {% if post.enable_top_bar %}
      {% block topbar %}
        {% include 'partials/widget-areas/top-bar.twig' %}
      {% endblock topbar %}
    {% endif %}

    {% if post.enable_top_bar %}
      {% block topbar2 %}
        {% include 'partials/widget-areas/top2-bar.twig' %}
      {% endblock topbar2 %}
    {% endif %}

    {% if post.enable_custom_top_bar %}
      {% block customtopbar %}
        {% include 'partials/widget-areas/top-bar-custom.twig' %}
      {% endblock customtopbar %}
    {% endif %}

    {% block wcfeaturedextcontent %}
    {% endblock wcfeaturedextcontent %}

    {%if post.disable_wordpress_content == false %}
      {% block content %}
      {% endblock content %}
    {% endif %}

  

    {% block carddecks %}
    {% endblock carddecks %}

    {% block supportcontent %}
    {% endblock supportcontent %}

    {% if post.enable_bottom_bar or fn('is_archive') %}
      {% block bottombar %}
        {% include 'partials/widget-areas/bottom-bar.twig' %}
      {% endblock bottombar %}
    {% endif %}

    {% if post.enable_bottom_bar_2 %}
      {% block bottombar2 %}
        {% include 'partials/widget-areas/bottom2-bar.twig' %}
      {% endblock bottombar2 %}
    {% endif %}

    {% block buttongroup %}
    {% endblock buttongroup %}

  </main>

{% block footer %}
  {% include 'partials/footer.twig' %}
{% endblock footer %}


</body>
</html>

Like I said earlier I use quite a bit of conditionals to easily modify per client. But for testing try this:

  {% include 'partials/html-header.twig' %}
{% endblock html_head_container %}
  <body class="{{body_class}}" data-template="timber-bootbase.twig">
<main role="main" class="container pl-0 pr-0">

      {% block content %}
      {% endblock content %}

  </main>

{% block footer %}
  {% include 'partials/footer.twig' %}
{% endblock footer %}


</body>
</html>

You can get the contents of the header blocks from the starter template.

And as for post-card.twig once again I use quite a bit of conditionals as to whether it is custom post time, archive, other, etc but to test just try this in that file:

<h2>{{ post.title }}</h2>
 {{ post.content }}

[redsoxfan2499]

thanks for the help. I am using the timber starter theme from github. The link provided in the docs. The single.php is located in the starter theme root. then there is a templates directory where all of the twig files are located. There is the single.twig which extends base and works. Then following the directions from Timber, https://timber.github.io/docs/getting-started/theming/ .
Nesting Blocks, Multiple Inheritance . section:

I am trying to extend the single twig following the directions. I added the code in single.twig and then created a new file called single-test.php

I have also tried in the footer. I created a footer-test.twig which extends footer and created a block and nothing. I also went to the Twig documentation and it seems I am doing everything correctly. It does not want to extend pass the base twig

[jake46a]

@redsoxfan2499

Also, do not give up. The learning curve on Timber is not that bad. I used it originally in a project where the load times were ridiculous. Once Timber was used, load times went from 35 seconds to 5-6 seconds. After that I never looked back.

I use my starter theme on all of my projects and my creatings separate partials I just call the ones I need.

In your original code, it looks like you are extending the single.twig file, instead of the base file. It has been a while since I worked with the starter template.

If you can zip up and send me your full template file for the starter theme, I can take a quick look. I have a free area in my local host right now.

let me know

[redsoxfan2499]

starter-theme-master.zip

[jake46a]

Ok thanks will get to it in a few minutes. But I think the problem may be this from the starter theme

Timber::render( array( 'single-' . $post->ID . '.twig', 'single-' . $post->post_type . '.twig', 'single.twig' ), $context );

As it does not call the post name. I will get back to you soon

[jake46a]

@redsoxfan2499

Yes that was the problem.
in single.php change this line

Timber::render( array( 'single-' . $post->ID . '.twig', 'single-' . $post->post_type . '.twig', 'single.twig' ), $context );

to

Timber::render( array( 'single-' . $post->slug . '.twig', 'single-' . $post->post_type . '.twig', 'templates/single.twig' ), $context );

[jake46a]

@redsoxfan2499

On a side note I use debug bar whenever working with timer as it gives me the template files being called and all of the content variables.

Install these two plugins:

Debug Bar
Timber Debug Bar

Then in wp-config.php set from

define('WP_DEBUG', false);

to

define('WP_DEBUG', true);

[jake46a]

@jarednova

Jared,

Maybe this should be noted to whoever is redoing the new starter template

[redsoxfan2499]

jake and everyone thanks again for all of the help. I changed the line single.php file as noted. But this did not fix my issue. I still cannot extend the single.twig template.

Also, thanks for the advice on the Timber Debug Bar.

I will attach screenshots. In the single.twig. I had the block headline in the single.twig. The title was already being displayed without the suggested changes. I then create a file called single-test.twig which I extend single and then add a echo TEST inside the block headline. when my page renders I am not seeing TEST.

[jake46a]

Strange. All I did was installed the template file you sent me, created a post called "Test", then I edited the single/php to include the slug. Here are my screen shots. Single.php

Single-test.twig

single.twig

Post on front end

Debug Bar

Just a thought but do you have a plugin installed that is maybe conflicting?

[redsoxfan2499]

This is strange. So, I download a new copy of WP and spun up a fresh instance of WP on my local MAMP. I installed TImber and the starter theme I have been using since you can get it working on your local abut ti still does not work. What version of Timber plugin are you using? I am using version 1.7.1. I have minimal plugins now and still nothing. Using the Timber debug, it shows the single template and not the single-test one like your screen shot thus that is why TEST is not showing. The issues is WHY does the single-test.twig not work.

[jake46a]

@redsoxfan2499

I am using the same version as you. What is the slug of your post? Looks like it is hello-world.
create a seperate post form scratch and just use the title test.

[redsoxfan2499]

OK. that worked. When I title the new Post Test. It uses the single-test.twig template. When I create another new post and title it, it does NOT work and does NOT use the single-test.twig template. Does it have to do with the name of my twig file? I would except the single-test.twig to be used for all single posts?

[jake46a]

It has to do with the fact that that override is based upon the name of the WordPress post, hence the slug as explained in the documentation you read. What exactly are you trying to do?

[jake46a]

For all single posts, you would modify just single.twig. Then ALL single posts would change to that. The way you were setting it up, the post with the name "test" is the only one that would get modified. If you want to modify all singe posts, then just recode single.twig. But caution, all single posts will get modified. The template naming convention is the same as WordPress naming convention.

[redsoxfan2499]

Light Blub just went off! I gotcha. I thought that this would just extend every single post. In this current website I inherited, the previous developers has like 5 twig files making up one page. So I am just trying to learn Timber/Twig so I can support this website and was trying to follow directions. So if I wanted to create a file to be include in single I would need to use the includes function. Plus when I started watching the videos and then realized they were out of date. Then I started reading the docs and grabbed the starter theme and saw it was also some what out of date, I thought it was not working because the docs were out of date. Thus I reached out for help. I totally get it now. Makes total sense. Sorry for all of the confusion. Thanks so much for all fo your help. FYI, if I was a developer just checking out Timber I would have already jumped ship with the outdated videos and docs and starter theme out of date and then ran into an issue. I have to learn Timber so I am in it. I am sure after I finish this learning curve which does not seem to bad, I will really like Timber. Jake46a thanks so much for all fo your help thanks to everyone else who jumped in early.

[jake46a]

@redsoxfan2499
You are welcome. No thanks is necessary as it is my way of giving back to the community that wrote this magnificent plugin. I want everyone using it. If you need any additional help just ask.

[redsoxfan2499]

BTW, my original issue was there is a complicated template I need to create and I wanted to do it outside of Timber since I know normal WordPress and knew I could get it done faster. But without success, I then started to learn Timber and ran into that issue. So I am going to give it a try using Timber. So far I like this better then Genesis. Thanks again!