Kickstarting with Drupal 8 themes

Creating your theme

Themes have relocated. Just like modules, themes now live in the root of your Drupal installation. You can find them under themes directory. By convention you can separate themes into contributed and custom by creating themes/contrib and themes/custom folders.

As usual, each theme lives in its own directory. I will name my theme ‘example’ and place it into themes/custom/example folder.

To let Drupal know about my theme I will need to create an info file with basic information. In Drupal 8 we do this with a .info.yml file since Drupal 8 is now using yaml language when configuring settings. In my case, I will create example.info.yml with the following content:

name: Example theme
description: 'An example D8 theme'
package: Custom
type: theme
version: 1.0
core: 8.x

This is all similar to Drupal 7 info file except it is written in yml.

With this file in place, we have created an independent stand alone custom theme. However, if you wanted to extend already existing theme you can add the following directive to the file:

base theme: classy

Classy is the name of a base theme in Drupal 8 that comes with sensible defaults.

More configuration

Now that we have our theme available to Drupal, let’s have a look at what other options can be declared in the info file.

By default, the theme’s screenshot (as seen in the user interface) would be read from screenshot.png file. If you have a file with a different extension or it is located somewhere else other than theme’s root directory you can use the following syntax to specify the screenshot’s location:

screenshot: screenshot.svg

Next we can add stylesheets and javascript libraries. This is one of the features that is completely different from Drupal 7.

Both javascript and css files are now considered ‘libraries’ and should be declared in a separate file: example.libraries.yml, which should live in the theme’s root folder – themes/custom/example/example.libraries.yml

Here is an example of the libraries.yml definition:

global-library:
  version: VERSION
  js:
    js/scripts.js: {}
  css:
    base:
      css/base/styles.css: {}
    components:
      css/components/components.css: {}
  dependency:
    - core/drupal
    - core/jquery

other-library
  version: VERSION
  css:
    base:
      css/other-lib/styles.css: {}

There are 2 libraries defined in this file: global-library and other-library, each with its own css/js files and dependencies. To make one of these libraries globally available (in other words- to make this library load on every page) you will need to include it in example.info.yml in the following way:

libraries:
  - example/global-library

To include any particular library on a specific page it should be included via one of the theme’s preprocess hooks or directly in a template file using twig’s function:

{{ attach_library('example/other-library') }}

The only template that doesn’t support this function is html.html.twig.

By the way, all ‘preprocess’ functions should be placed in the theme’s root directory in the example.theme file. This .theme file is a descendent of Drupal 7 template.php.

See the following example further fown in the article:

example_preprocess_page(&$variables)

There is one more useful directive that we could use in info.yml file and this is stylesheets-remove. If for example you don’t want the default system theme to include jquery.ui/themes/base/dialog.css, for example, simply add it to the stylesheets-remove directive. To find its full path use browser web tool like FireBug or Chrome’s built in inspector.

stylesheets-remove:
  - core/assets/vendor/jquery.ui/themes/base/dialog.css
  - '@bartik/css/style.css'