How to Organize Your Twig Templates Using Inheritance

3.3 version

How to Organize Your Twig Templates Using Inheritance

One common way to use inheritance is to use a three-level approach. This method works perfectly with the three different types of templates that were just covered:

  • Create an app/Resources/views/base.html.twig file that contains the main layout for your application (like in the previous example). Internally, this template is called base.html.twig;

  • Create a template for each "section" of your site. For example, the blog functionality would have a template called blog/layout.html.twig that contains only blog section-specific elements;

    1
    2
    3
    4
    5
    6
    7
    8
    {# app/Resources/views/blog/layout.html.twig #}
    {% extends 'base.html.twig' %}
    
    {% block body %}
        <h1>Blog Application</h1>
    
        {% block content %}{% endblock %}
    {% endblock %}
    
  • Create individual templates for each page and make each extend the appropriate section template. For example, the "index" page would be called something close to blog/index.html.twig and list the actual blog posts.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    {# app/Resources/views/blog/index.html.twig #}
    {% extends 'blog/layout.html.twig' %}
    
    {% block content %}
        {% for entry in blog_entries %}
            <h2>{{ entry.title }}</h2>
            <p>{{ entry.body }}</p>
        {% endfor %}
    {% endblock %}
    

Notice that this template extends the section template (blog/layout.html.twig) which in turn extends the base application layout (base.html.twig). This is the common three-level inheritance model.

When building your application, you may choose to follow this method or simply make each page template extend the base application template directly (e.g. {% extends 'base.html.twig' %}). The three-template model is a best-practice method used by vendor bundles so that the base template for a bundle can be easily overridden to properly extend your application's base layout.

This work, including the code samples, is licensed under a Creative Commons BY-SA 3.0 license.