Adding JavaScript to a Drupal 8 Theme

The drupal_add_js function and almost all of the excess javascript loads were removed in Drupal 8. This means that if you have custom javascript, you have to add it to the theme yourself. You can do this from the theme.info.yml file or from the .theme file.

Adding custom javascript files directly from your theme.info.yml file

In Drupal 7

Your theme.info file

scripts[] = js/scripts.js

In Drupal 8

Your theme.info.yml file

Creating a sub-theme

Creating a sub-theme in Drupal 8 is almost identical to the Drupal 7 process. There are some differences however.

Working with Twig Templates

Creating your template

You should only use a template, if you really need it. This means if you cannot modify the output using only CSS. This would be the case if you want to hide e.g. the secondary menu, which is still not a block by default but always rendered through page.html.twig. (formerly page.tpl.php)

Naming convention

If you know the names of the templates you need from Drupal 7, it will be easy for you. Most of the time, the name of your template will have the same name. Only the .tpl.php file ending is replaced by .html.twig.

ThemeKey Recipes

This should be a listing of "typical" recipes for ThemeKey setup. This could include Mobile, Admin Theming, and basic recommendations.

ThemeKey

Themekey is a powerful theme switching system. You can create all kinds of recipes to

Install

Mobile Detect

Properties

Operators

Configure

Theme Switching Chain

Redirecting Rule Chain

Settings

General Tab

These are some general settings for how rules interact with cache, authenticated, and anonymous users.

Theming OpenAid

The OpenAid distro comes with the OpenAid theme, which integrates with the Color module and is responsive out of the box.

To customize the theme for your site's needs, it is suggested that you create a child theme based off of OpenAid.

The theme's settings and color picker are located at /admin/appearance/settings/openaid

Pages

Subscribe with RSS Subscribe to RSS - theming