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
-
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
becomeslando composer
,drush
becomeslando 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'
- settings.php
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)
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
Exercise 13 - Preprocess Function
Exercise 14 - Template Suggestions
Exercise 15 - Add Classes with PHP
Exercise 17 - Responsive Images
Exercise 18 - Custom Theme Settings 1
Exercise 19 - Custom Theme Settings 2
MYDRUPAL/themes Path to files and directories.
node.html.twig
$ cd drupal