WARNING: You are browsing the documentation for Symfony 3.1 which is not maintained anymore. Consider upgrading your projects to Symfony 4.1.

How to Organize Your Twig Templates Using Inheritance

3.1 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.