Newer Post

DrupalCon Latin America Through the Eyes of an X-Teamer (Part 1)

Older Post

Never Stop Growing as a Developer

Deep Dive into the Anatomy of Drupal 8 Theming

Drupal 8 is the most advanced Drupal ever built, and it will surely be a game changer among other CMSes out there. Part of its strength comes from adopting the principles from other technologies like Symfony, YAML, Twig, and Backbone.js.

The theming has undergone many changes since Drupal 7, especially the deep integration with Twig – a popular templating engine for PHP, which opens the door to more robust, scalable and secure themes.

Note that since Drupal 8 is still under active development, some of the details below may change prior to its release. Still, since Drupal 8 is now feature-frozen, hopefully, most info should remain relevant.

These are several things to note about the changes for theming in Drupal 8, and we will discuss each of these further in the next section:

  • a. yourtheme.info.yml
    The use of *.info.yml file as a replacement for *.info file is definitely giving more options and flexibility on the theme configuration.
  • b. yourtheme.libraries.yml
    This a configuration file to define assets for your theme – notably for css and javascript files.
  • c. yourtheme.breakpoints.yml
    This a configuration file to setup breakpoints for your responsive custom theme.
  • d. yourtheme.theme
    This file contains all of the preprocess functions, similar to the *template.php *file in Drupal 7.
  • e. Twig template file (.html.twig)*
    The usage of Twig as mentioned above gives more robustness on the front-end. The new syntax is cleaner and addresses a lot of common security pitfalls. Usually all the *.html.twig files are put under the *templates *sub-folder.

Here is a screenshot of the basic folder structure for the theme:

Screen Shot 2015-03-24 at 15.32.55

a. yourtheme.info.yml

This is the first file that you need to set up for your theme. This file is equivalent to the *.info file in Drupal 7, providing meta-data about your theme.

Consider this yaml code below:

We'll help you unleash.

Join the 30,000 developers who subscribe to our newsletter.

Scale your
Development team

We help you execute projects by providing trusted developers who can join your team and immediately start delivering high-quality code.

Hire Developers
code, drupal