Twig Templates Overriding in Drupal 8

Posted By : Vishal Yadav | 17-Jul-2019


Overriding templates


You can override Drupal templates by adding templates to your theme folder.


To override templates you need to:

  1. Locate the template you want to override.
  2. Copy the template file from its core location into your theme folder.
  3. Rename the template according to the naming conventions in order to target a more specific subset of areas where the template is used.
  4. Modify the template according to your wish.

You need to clear the cache once you copy a template file into your theme, Drupal will start using your instance of the template file instead of the core version.


Theme hook suggestions


Theme hook suggestions allows to overrides the template files with a specific naming convention.You can add or modify suggestions using the hooks:



Rebuild cache


When working with theme suggestion, Drupal can use its cache rather than the new templates as suggested. So Clear the cache if you experience this problem.


Twig Template naming conventions


Drupal follows a naming convention to load the templates. This allows you to override the templates by adding them to your theme or giving them a proper name.


HTML Template


These templates provide markup for the basic structure of the HTML-page 


Base template name: html.html.twig 

Examples override the base/html template:

  1. html--[internalviewpath].html.twig
  2. html--node--[nodeid].html.twig
  3. html.html.twig


Page template


The suggestions are numerous. The front page takes prediction and based on the internal path of the current page. You may change the front page through admin as "Administration > Configuration > System > Site information."


Pattern: page--[front|internal/path].html.twig
Base template: page.html.twig 


Regions template


Pattern: region--[region].html.twig
Base template: region.html.twig


The region template is used when a page region finds some content. Custom region names are determined by the theme's .info.yml file.



Pattern: block--[module|-delta].html.twig
Base template: block.html.twig 


For example, a custom module called "custom" and a delta of "cus-block", the theme hook suggestion would be called "block--custom--cus-block.html.twig."




Pattern: node--[content-type|nodeid]--[viewmode].html.twig
Base template: node.html.twig

Theme hook suggestions are made based on some factors, listed from the most specific template to the least. Drupal will use the most specific template first:

  1. node--[nodeid]--[viewmode].html.twig
  2. node--[nodeid].html.twig
  3. node--[content-type]--[viewmode].html.twig
  4. node--[content-type].html.twig
  5. node--[viewmode].html.twig
  6. node.html.twig

Note: Underscores (_) in a content type's machine name are replaced by hyphens (-).

About Author

Author Image
Vishal Yadav

Vishal is a backend developer with good knowledge of WordPress, Codeigniter and js/jQuery. He likes to learn new technologies and play video games.

Request for Proposal

Name is required

Comment is required

Sending message..