Twig Templates Overriding in Drupal 8

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:

• hook_theme_suggestions_HOOK(array $variables)
• hook_theme_suggestions_alter(array &$suggestions, array $variables, $hook)
• hook_theme_suggestions_HOOK_alter(array &$suggestions, array $variables)

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.

Blocks

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

Nodes

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 (-).