Theming Basics

Get started with Drupal theming.

Twig Debugging

The first thing to do when theming Drupal is enable twig debugging. This will output comments in the html that tell you which theme hook and template was used to render each component, with theme hook suggestions for overriding specific items.

Configuration > Development > Development settings

Enable all the options to turn on twig debugging and disable the cache.

Use {{ dump(VARIABLE) }} to inspect variables in a template.

Use {{ dump(_context) }} to see all the variables in the template.

dump() uses Symfony VarDumper to format output if available, otherwise it prints an array using var_dump().

Make sure vardumper is installed (this installs as a dev dependency).

composer require --dev symfony/var-dumper

• Core themes
  • New
    • Claro
    • Olivero
  • Old
    • Bartik
    • Classy
    • Seven
    • Stark
  • Base
    • Stable
    • Stable9
    • Starterkit
• Contrib themes
  • Gin
  • Bootstrap5
• Custom themes
  • Generators
    • Starterkit
    • Drush
  • THEME.info.yml
    • Base theme
    • Global libraries
      • core/normalize
    • Regions
    • Logo
    • Favicon
    • Screenshot
• Libraries
  • THEME.libraries.yml
  • Attaching libraries
  • SMACSS
  • BEM
• Templates
  • Twig
  • Overrides
  • Suggestions
  • page.html.twig
• Twig debug
• Hooks
  • Preprocess
  • Theme
• CSS/JS aggregation