Drupal 8 Theming Training

Description

Are you struggling with Drupal 8 theming? New to Drupal or Drupal 8?

Let's take it from the top!

This hands-on training will take you step-by-step through the process of creating a custom theme in Drupal 8. There will also be time for Drupal Q&A.

Along the way, we'll cover:

• Setting up Your local development environment
• Working with YAML files
• Adding assets responsibly
• Getting, modifying and display Drupal data in the template
• Cool Twig tips and Tricks
• Preprocessing template functions and hooks
• Basic OOPHP principles
• Kint, theme_debug and other changes to debugging
• Leveraging new Drupal 8 site building paradigms to make theming easier
• Where to find help

Notes:

• All terminal commands are run from the Drupal root.

• $ indicates a prompt. You do not need to type it into the terminal window.

• MYDRUPAL refers to the Drupal root directory or base URL.

• You'll have an easier time if you configure your editor to use spaces instead of tabs.

• Feel free to ask any of the "Questions you may have ..." someone probably asked the question before!

• If you're using Lando, composer becomes lando composer, drush becomes lando drush.

• See a mistake or typo? Submit a pull request on Github!

• Common hiccups are:

  • Syntax errors
  • Too many or not enough spaces in .yml files
  • Cache not cleared
  • PHP memory limit not high enough (>= 256)
    • settings.php
      • ini_set('memory_limit', '512M');
    • php.ini
      • 'memory_limit' = '512M'

Basic terminal commands used.

Change Directory.

cd

Create File.

touch (new-item on Windows PowerShell)

Create Folder.

mkdir

Move file from one location to another.

mv

Copy file to a new location.

cp (copy on Windows PowerShell)

Final Folder Structure

MYDRUPAL/themes/custom
                    └── acme
                        ├── acme.breakpoints.yml
                        ├── acme.info.yml
                        ├── acme.libraries.yml
                        ├── acme.settings.yml
                        ├── acme.theme
                        ├── css
                        │   ├── css-stuff-print.css
                        │   ├── css-stuff.css
                        │   └── custom-widget.css
                        ├── images
                        │   └── mysvg.svg
                        ├── js
                        │   └── custom-widget.js
                        ├── templates
                        │   ├── block
                        │   │   └── block--system-powered-by-block.html.twig
                        │   ├── html
                        │   │   └── html.html.twig
                        │   ├── node
                        │   │   └── node.html.twig
                        │   └── page
                        │       └── page.html.twig
                        └── theme-settings.php

Exercises

Exercise 1 - Local Setup

Exercise 2 - Add Content

Exercise 3 - Contrib Themes

Exercise 4 - Dot Info File

Exercise 5 - Libraries

Exercise 6 - Intro to Twig

Exercise 7 - Regions

Exercise 8 - Dot Syntax

Exercise 9 - Twig Classes

Exercise 10 - Twig Filters

Exercise 11 - Twig Blocks

Exercise 12 - Include SVG

Exercise 13 - Preprocess Function

Exercise 14 - Template Suggestions

Exercise 15 - Add Classes with PHP

Exercise 16 - Form Alter

Exercise 17 - Responsive Images

Exercise 18 - Custom Theme Settings 1

Exercise 19 - Custom Theme Settings 2

Style Guides for Contributors

Path to files and directories.

MYDRUPAL/themes Path to files and directories.

Name of file or directory

node.html.twig

Code.

 $ cd drupal

Url

http://MYDRUPAL/admin/config

Done ☺