Drupal 8 & 9 Theme Development

Learn to build your own custom themes for Drupal

Course Overview

In this course, you will learn to build your own custom themes for Drupal. The class covers Drupal 8+ theming: using the Twig templating language and other Drupal theme features to implement responsive designs from HTML/graphic templates. During this course, you'll develop themes step-by-step, while following best practices to ensure maintainability and interoperability with Drupal module updates. This course is taught by a practicing Drupal developer and themer and will take a pragmatic approach to theming based on real-world experience.

Who is it for?

This course is for anyone who wants to create their own Drupal themes or customize existing themes. It targeted a web designers, system integrators, and anyone who want to tweak Drupal's look and feel to meet their needs.

Pre-requisites: This course was designed for those who have experience with Drupal site building and knowledge of HTML and CSS. Those without Drupal experience should take Building Websites with Drupal 8 & 9.

How is it taught?

The class will consist of four weekly video lessons, each around 3 hours long, and four weekly live Q&A sessions with the instructor. The lessons will cover the topics listed below and can be watched on-demand, anytime that is convenient for you. At the end of each lesson, you will be given an assignment to practice what you've learned. (We will provide web hosting for your practice work, so you don't need to worry about setting that up.)

The weekly live sessions will be conducted online, using the webinar software GotoMeeting. During the sessions, the instructor will answer all your questions from and will help troubleshoot any issues you have doing the assignment. (GotoMeeting allows us to view your computer, and take control of your keyboard and mouse if needed. So, we can see any error messages that you're seeing and figure out how to fix it right on the spot.) In addition to the live sessions, you will have access to an online forum to discuss assignments with other students and ask the instructor questions during the week.

After the course is over you can continue to access the lesson videos, free of charge, forever. There are no monthly subscription fees. Just come back and watch the lessons whenever you want. They are a great reference when you forget how to do something.

Lessons In This Course

Video Duration
Introduction 00:03:40
Using the DrupalTutor DevStack 00:25:48
Installing Drupal on the DrupalTutor DevStack 00:08:28
Enabling Drupal Development Settings 00:10:03
Installing Drupal Development Tools 00:15:25
Using the Code Repository for this Class 00:16:28
Making the Course Code Compatible with Drupal 9 00:03:16
Creating Themes for Drupal 8 00:24:47
Adding CSS Libraries to Your Drupal 8 Theme 00:37:20
Adding Images to Your Drupal 8 Theme 00:09:49
Overriding and Customizing Templates in Your Drupal 8 Theme 00:27:03
Working with Regions and Blocks in Your Drupal 8 Theme 00:18:52

Video Duration
Twig: Rendering and Debugging Content Variables 00:28:11
Twig: Using Filters to Format Content 00:30:52
Twig: Working with Variables and Control Structures 00:45:13
Twig: Functions 00:23:36
Twig: Combining and Extending Twig Templates 00:19:57

Video Duration
Theming Views 00:36:11
Adding Custom Javascript Code to Your Theme Libraries 00:20:49
Overriding and Extending CSS and Javascript Libraries 00:19:37
Using Preprocess Functions 00:14:13
Creating Custom Templates 00:31:03
Implementing Responsive Designs on Drupal 8 00:10:07
Using the Responsive Images Module 00:21:03

Video Duration
Design to Theme Case Study: Introduction 00:12:13
Design to Theme Case Study: Installing Drupal 00:11:36
Design to Theme Case Study: Regions 00:33:56
Design to Theme Case Study: Adding CSS 00:13:27
Design to Theme Case Study: The Header Region 00:28:16
Design to Theme Case Study: Portfolio Full Page View 00:41:53
Design to Theme Case Study: Portfolio Teaser 00:25:53
Design to Theme Case Study: Blog Full Page View 00:33:11
Design to Theme Case Study: Blog Teaser View 00:11:43
Design to Theme Case Study: Blog Footer Block 00:15:14
Design to Theme Case Study: Sidebar and Footer Blocks 00:39:48
Design to Theme Case Study: Home Page Content 00:16:54
Design to Theme Case Study: Banner and Intro Blocks 00:35:02
Design to Theme Case Study: Disabling Development Mode 00:03:24
Class Wrap-Up 00:03:10

Video Duration
An Overview of Local Development Environments 00:01:50
Using Lando as a Local Development Environment 00:39:00
Using DDev as a Local Development Environment 00:28:36
Using DrupalVM as a Local Development Environment 00:30:38

See It In Action

Watch this sample video to get a sense of what this course is like.

Watch Example Video

Enabling Twig Debug Mode
Wayne Eaker
Wayne Eaker
Drupal Architect, Developer, and Trainer

About Your Instructor

Wayne Eaker is the director and chief developer of Zengenuity. He's a Drupal expert with years of experience building highly-customized Drupal websites. He is also a seasoned trainer, having taught professionals, corporate clients and high school computer science students.

Web Developer
“Multiple times during the course, I would pause the video, go into my real-life-Drupal-8 development codebase, and implement the technique I just learned.”
James — Senior Web Developer
Handshake

Our Guarantee

Try this course for a week, and if you don't agree that it's the best way to learn Drupal, we'll refund the full price. No questions asked.

$ 398
Per student
  • 14+ hours of video lessons
  • 4 live webinars with your instructor
  • Permanent access to the recordings of all the lessons and live sessions
  • A development environment for your practice Drupal site
  • Access to an online forum to ask questions of the instructor and discuss with other students
?

Your Class Session Details

Lesson Videos

Your lesson videos will be available starting June 7, 2023. You can start and stop the videos at your convenience, and use them as a reference forever!

Your lesson videos will be available starting June 21, 2023. You can start and stop the videos at your convenience, and use them as a reference forever!

Your lesson videos will be available starting July 5, 2023. You can start and stop the videos at your convenience, and use them as a reference forever!

Your lesson videos will be available starting July 19, 2023. You can start and stop the videos at your convenience, and use them as a reference forever!

Your lesson videos will be available starting August 2, 2023. You can start and stop the videos at your convenience, and use them as a reference forever!

Your lesson videos will be available starting August 16, 2023. You can start and stop the videos at your convenience, and use them as a reference forever!

Your lesson videos will be available starting August 30, 2023. You can start and stop the videos at your convenience, and use them as a reference forever!

Your lesson videos will be available starting September 13, 2023. You can start and stop the videos at your convenience, and use them as a reference forever!

Your lesson videos will be available starting September 27, 2023. You can start and stop the videos at your convenience, and use them as a reference forever!

Your lesson videos will be available starting October 11, 2023. You can start and stop the videos at your convenience, and use them as a reference forever!

Your lesson videos will be available starting October 25, 2023. You can start and stop the videos at your convenience, and use them as a reference forever!

Your lesson videos will be available starting November 8, 2023. You can start and stop the videos at your convenience, and use them as a reference forever!

Your lesson videos will be available starting November 22, 2023. You can start and stop the videos at your convenience, and use them as a reference forever!

Development Environment

Your practice development environment will be available from June 7, 2023 to July 19, 2023.

Your practice development environment will be available from June 21, 2023 to August 2, 2023.

Your practice development environment will be available from July 5, 2023 to August 16, 2023.

Your practice development environment will be available from July 19, 2023 to August 30, 2023.

Your practice development environment will be available from August 2, 2023 to September 13, 2023.

Your practice development environment will be available from August 16, 2023 to September 27, 2023.

Your practice development environment will be available from August 30, 2023 to October 11, 2023.

Your practice development environment will be available from September 13, 2023 to October 25, 2023.

Your practice development environment will be available from September 27, 2023 to November 8, 2023.

Your practice development environment will be available from October 11, 2023 to November 22, 2023.

Your practice development environment will be available from October 25, 2023 to December 6, 2023.

Your practice development environment will be available from November 8, 2023 to December 20, 2023.

Your practice development environment will be available from November 22, 2023 to January 3, 2024.

Live Webinars

Webinars for this session are scheduled at the dates and times below. Don't worry. These webinars are strictly for questions and troubleshooting. They are not required to cover the lesson material, and you are not expected to attend them all. These webinars will also be recorded, so if you can't attend a webinar due to your time zone or other conflicts, you can submit your questions ahead of time and watch the answers on the recording.

Webinar Schedule
Date Time(s)
June 8 10:00am-11:00am EDT
June 13 4:00pm-5:00pm EDT
June 15 10:00am-11:00am EDT
June 20 4:00pm-5:00pm EDT
June 22 10:00am-11:00am EDT
June 27 4:00pm-5:00pm EDT
June 29 10:00am-11:00am EDT
July 5 4:00pm-5:00pm EDT
Date Time(s)
June 22 10:00am-11:00am EDT
June 27 4:00pm-5:00pm EDT
June 29 10:00am-11:00am EDT
July 5 4:00pm-5:00pm EDT
July 6 10:00am-11:00am EDT
July 11 4:00pm-5:00pm EDT
July 13 10:00am-11:00am EDT
July 18 4:00pm-5:00pm EDT
Date Time(s)
July 5 4:00pm-5:00pm EDT
July 6 10:00am-11:00am EDT
July 11 4:00pm-5:00pm EDT
July 13 10:00am-11:00am EDT
July 18 4:00pm-5:00pm EDT
July 20 10:00am-11:00am EDT
July 25 4:00pm-5:00pm EDT
July 27 10:00am-11:00am EDT
August 1 4:00pm-5:00pm EDT
Date Time(s)
July 20 10:00am-11:00am EDT
July 25 4:00pm-5:00pm EDT
July 27 10:00am-11:00am EDT
August 1 4:00pm-5:00pm EDT
August 3 10:00am-11:00am EDT
August 8 4:00pm-5:00pm EDT
August 10 10:00am-11:00am EDT
August 15 4:00pm-5:00pm EDT
Date Time(s)
August 3 10:00am-11:00am EDT
August 8 4:00pm-5:00pm EDT
August 10 10:00am-11:00am EDT
August 15 4:00pm-5:00pm EDT
August 17 10:00am-11:00am EDT
August 22 4:00pm-5:00pm EDT
August 24 10:00am-11:00am EDT
August 29 4:00pm-5:00pm EDT
Date Time(s)
August 17 10:00am-11:00am EDT
August 22 4:00pm-5:00pm EDT
August 24 10:00am-11:00am EDT
August 29 4:00pm-5:00pm EDT
August 31 10:00am-11:00am EDT
September 5 4:00pm-5:00pm EDT
September 7 10:00am-11:00am EDT
September 12 4:00pm-5:00pm EDT
Date Time(s)
August 31 10:00am-11:00am EDT
September 5 4:00pm-5:00pm EDT
September 7 10:00am-11:00am EDT
September 12 4:00pm-5:00pm EDT
September 14 10:00am-11:00am EDT
September 19 4:00pm-5:00pm EDT
September 21 10:00am-11:00am EDT
September 26 4:00pm-5:00pm EDT
Date Time(s)
September 14 10:00am-11:00am EDT
September 19 4:00pm-5:00pm EDT
September 21 10:00am-11:00am EDT
September 26 4:00pm-5:00pm EDT
September 28 10:00am-11:00am EDT
October 3 4:00pm-5:00pm EDT
October 5 10:00am-11:00am EDT
October 10 4:00pm-5:00pm EDT
Date Time(s)
September 28 10:00am-11:00am EDT
October 3 4:00pm-5:00pm EDT
October 5 10:00am-11:00am EDT
October 10 4:00pm-5:00pm EDT
October 12 10:00am-11:00am EDT
October 17 4:00pm-5:00pm EDT
October 19 10:00am-11:00am EDT
October 24 4:00pm-5:00pm EDT
Date Time(s)
October 12 10:00am-11:00am EDT
October 17 4:00pm-5:00pm EDT
October 19 10:00am-11:00am EDT
October 24 4:00pm-5:00pm EDT
October 26 10:00am-11:00am EDT
October 31 4:00pm-5:00pm EDT
November 2 10:00am-11:00am EDT
November 7 4:00pm-5:00pm EST
Date Time(s)
October 26 10:00am-11:00am EDT
October 31 4:00pm-5:00pm EDT
November 2 10:00am-11:00am EDT
November 7 4:00pm-5:00pm EST
November 9 10:00am-11:00am EST
November 14 4:00pm-5:00pm EST
November 16 10:00am-11:00am EST
November 20 4:00pm-5:00pm EST
November 21 10:00am-11:00am EST
Date Time(s)
November 9 10:00am-11:00am EST
November 14 4:00pm-5:00pm EST
November 16 10:00am-11:00am EST
November 20 4:00pm-5:00pm EST
November 21 10:00am-11:00am EST
November 28 4:00pm-5:00pm EST
November 30 10:00am-11:00am EST
December 5 4:00pm-5:00pm EST
Date Time(s)
November 28 4:00pm-5:00pm EST
November 30 10:00am-11:00am EST
December 5 4:00pm-5:00pm EST
December 7 10:00am-11:00am EST
December 12 4:00pm-5:00pm EST
December 14 10:00am-11:00am EST