How to Create a Custom Header and Footer in Drupal 10/11: Understanding {% include %} vs {{ page.header }}

This tells Drupal where the header and footer blocks will be rendered.

Step 2: Custom Header Template

Next, let’s create a custom template for the header. This will allow you to define the layout, content, and styling of your header region.

1. Create a Custom Header Template:Create a file called header.html.twig in the templates/layout folder of your theme:
   themes/custom/acesoftech/templates/layout/header.html.twig

2. Add Custom Header Content:Inside the header.html.twig, you can include the site name and any content you wish to appear in the header region.
   twig

   <header class="custom-header">
<div class="site-branding">
<h1 class="site-title">{{ site_name }}</h1>
</div>
<div class="header-region">
{{ page.header }}
</div>
</header>


   • site_name: This variable outputs the site name, which is typically defined in the site settings.
   • page.header: This renders the content assigned to the header region via Drupal’s Block Layout system.

Step 3: Custom Footer Template

Now let’s create a custom footer template to display the footer region and any additional content like the copyright notice.

1. Create a Custom Footer Template:Create a file called footer.html.twig in the same templates/layout folder:
   themes/custom/acesoftech/templates/layout/footer.html.twig

2. Add Custom Footer Content:Inside footer.html.twig, you can add custom markup and display the content from the footer region.
   <footer class="custom-footer">
<div class="footer-region">
{{ page.footer }}
</div>
<p>&copy; {{ "now"|date("Y") }} Acesoftech</p>
</footer>


   • page.footer: This renders any blocks or content placed in the footer region in the Block Layout.

2. Include the Custom Header and Footer in page.html.twig

With the header and footer templates ready, we need to include them in the main page.html.twig template to display the content correctly.

1. Edit page.html.twig:Create or modify the page.html.twig file located at:
   themes/custom/acesoftech/templates/layout/page.html.twig

2. Include the Custom Header and Footer:Now, let’s include the custom header and footer templates using the {% include %} tag.
   twig

   <div class="page-wrapper">
{% include '@acesoftech/layout/header.html.twig' %}<main role=”main”>
   {{ page.content }}
   </main>

   {% include ‘@acesoftech/layout/footer.html.twig’ %}
   </div>

   • {% include '@acesoftech/layout/header.html.twig' %}: This line includes the custom header template we created earlier.
   • {% include '@acesoftech/layout/footer.html.twig' %}: This line includes the custom footer template.

3. Using {{ page.header }} vs {% include '@acesoftech/layout/header.html.twig' %}

Here comes the main confusion: should you use {{ page.header }} or include a separate header template using {% include %}?

Option 1: Using {{ page.header }}

If you use {{ page.header }}, Drupal will output all the blocks and content placed in the header region without any additional structure. It’s simple and works perfectly if you don’t need to customize the surrounding HTML or CSS.

For example: