This document discusses theming in Drupal 8, including a comparison of PHPTemplate and Twig theming, the structure of Twig themes, building custom templates, debugging Twig themes, and migrating a custom theme to Drupal 8. It covers the new Twig template engine, differences in file and function names between PHPTemplate and Twig, how to include JavaScript and define custom libraries, using hook_theme and hook_theme_suggestions to register templates, and enabling debug mode to inspect variables in Twig templates.

1. Main introduction
Drupal 8: Theming

2. • Comparison of PHPTemplate and Twig theming
• Structure of Twig theme
• Build custom templates
• Debugging Twig themes
• Migration and porting a custom theme to Drupal8
Overview
2

3. Twig is the new template engine in Drupal 8
Why Twig?
• The flexible, fast, and secure template engine for PHP
• Powerful, expressive template language with easy syntax and very
cool features
• A template engine enforces a clean separation, using a tag-based
syntax
• Widely supported among IDEs (PHPStorm, Eclipse, etc)
• No PHP knowledge is needed and improves reusability of templates
General information
3

4. Comparison of PHPTemplate and Twig code
4
File and function names
PHPTemplate file: node--article.tpl.php
Twig file: node--article.html.twig
Printing a variable
PHPTemplate:
Twig:

5. Twig template file example
5

6. What's new?
• Custom theme goes into a "theme" directory in the root
• Adopted the YAML format
– It uses a specific standard that's supported by other libraries
– template.php file becomes theme_name.theme
– theme_name.info file becomes theme_name.info.yml
– theme_name.libraries.yml supported to define custom libraries
• New methodology of Libraries and Scripts
– The functions drupal_add_js and drupal_add_css are deprecated and
need to use hook_library_info to declare jQuery and dependencies
– Libraries Backbone, Modernizr and other are included in core
Structure of Twig theme
6

7. Include JavaScript and dependencies
7

8. Custom JavaScript libraries
8
theme_name.libraries.yml
theme_name.theme

9. function hook_theme
Register a module or theme's theme implementations.
• The implementations declared by this hook have several purposes:
• They can specify how a particular render array is to be rendered as HTML.
• They can return HTML for default calls to _theme() and for a theme
suggestion.
Build custom templates
9

10. function hook_theme_suggestions_HOOK
Provides alternate named suggestions for a specific theme hook.
Theme suggestions
10

11. Enable debug mode
settings.php:
Debugging variables
links--system-main-menu.html.twig:
Debugging Twig themes
11

12. Browser source code
Debug results
12

13. Printing variables
Debug results
13

14. Pavlo Shevchuk
Senior Software Engineer
Drupal 8: Theming