Basic Theming with Twig in Drupal 8

With Drupal 8's change of theming engine from PHPTemplate to Twig, developers have more power and theme developers can develop faster.

Twig is the new theming engine in Drupal 8! PHPTemplate was removed due to no longer being actively maintained and with several security flaws. But instead of dreading the change to how themes work, developers should be excited about the change to Twig and what they can do with it. In this post, we'll talk about creating basic themes with Twig and the way that they work.

Starting a theme

Once you've set up your Drupal 8 site, you can use the Drupal console to generate a new theme:

 drupal generate:theme

While setting up your theme, you can include different theme regions and CSS breakpoints, and set a base theme to start from (like Bartik or Classy). Once it's created, it will appear in a custom themes directory for the Drupal installation you've created (/themes/custom/your_theme_here).

Template files and selecting a template

Once your theme is set up, you need to create a base template file to use, which is called

html.html.Twig

and should go in a directory called

templates

within your theme's root directory. This file is the most basic building block of your theme, and all other pieces start from there. If the theme you created is a sub-theme, you probably have this file already that was inherited from the parent theme. If needed, further templates can be created for individual pages, such as if you want a specific template for a content type, a certain ID of a content type, and if a piece of a certain content type is the front page of your Drupal site. This makes the template system of Twig very powerful, and its auto-selection of templates based off of file name makes creating new templates and extending your theme a snap. For naming conventions, you can check out this Drupal guide on Twig templates: https://www.drupal.org/node/2186401.

Adding CSS and JS to themes

In Drupal 8, adding a CSS or JS file is now handled through "libraries", which can be a collection of any CSS or JS in any amount. These entries go into a file called

your_theme_here.libraries.yml

. You can add an unlimited number of libraries to this file, and one of them can look like this example:

my_library_name:version: 1.xcss:theme:css/my_file.css: {}css/print.css: { media: print }js:js/some_file.js: {}dependencies:- core/jquery

To use the library, you can either add it to the theme's

*.info.yml

file to make the library used across your entire theme, or add it to an individual template to be used on a single one. Theme hooks can also be used to define a certain subset of pages to add a library to.

Conclusion

Twig in Drupal is much richer than what we've covered here, but this is a good place to start setting up your theme and creating a great Drupal 8 experience. If you're still not sure, a good place to start is core's Bartik theme of Drupal under

core/themes/bartik

; it is a full theme for Drupal 8 that uses many templates and theme variables to help you get your own started.

For more information on using Twig in Drupal 8, check out Drupal's guide on Twig:https://www.drupal.org/theme-guide/8/Twig.