How Important is Twig Suggestions?

  • Twig suggestion is commonly used in modifying or overriding the twig template that you want. Through this, it allows you to fully control the markup that is shown as an output within a custom theme. In order for you to fully changed the output or design, twig suggestion is a great help.

Common Format for Hook Suggestions

Theme hook suggestions allow you to implement targeted overrides in your theme for template files with a specific naming convention. Here are the common format for hook suggestions:

  • hook _theme_suggestions_ HOOK ( array $ variables )
  • hook _theme_suggestions_alter ( array & $ suggestions , array $ variables , $ hook)
  • hook _theme_suggestions_ HOOK _alter ( array & $ suggestions , array $ variables )

Note:

     -  The hook  on the format is your custom theme folder / name.

     -  The HOOK  on the format is the element or type of Theme Hook that you want to alter.

     -  The array $ variables  are the list of all variables that are present on a specific hook.

     -  The array $ suggestions  are the list of suggestions on that specific theme hook.

Different Samples for Hook Suggestions

  • Adding a common to all Twig Suggestions
    • On this example it shows how to add a twig suggestions for Form
    • common_hook

 

  • Adding a Twig Suggestions for Block Templates
    • block_hook

 

  • Adding a Twig Suggestions for Container Templates
    • container_hook

 

  • Adding a Twig Suggestions for Pager Templates
    • pager_hook

 

  • Adding a Twig Suggestions for Views View Unformatted Templates
    • views_view_unformatted_hook

 

  • Adding a Twig Suggestions for Captcha Templates
    • captcha_hook

 

  • Adding a Twig Suggestions for Fieldset Templates
    • fieldset_hook

 

  • Adding a Twig Suggestions for Checkboxes Templates
    • checkboxes

 

  • Adding a Twig Suggestions for Input Templates
    • input_hook

 

  • Adding a Twig Suggestions for Textarea Templates
    • textarea_hook

 

  • Adding a Twig Suggestions for Select Templates
    • select_hook

 

If it happens that your changes added on the twig file suggestion that you created did not display, make sure you replace the'-' with'_' 

    Sample: str_replace ("-", "_", $ variables ['element'] ['# id'])

Ways on Adding Twig File for the Suggestions

  • Locate and copy the template you wish to override.
  • Paste the file into your theme folder and rename the file according to the twig suggestions created.
  • You're free to modify the file to whatever you want.

Make sure you clear the cache so that the changes you made will appear on your site.

 

Reference: Reference:

     https://www.drupal.org/docs/theming-drupal/twig-in-drupal/working-with-twig-templates