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