Course image for Creating A Drupal 8 Theme.

Development

Creating A Drupal 8 Theme

Gym Short

Intermediate

Go to Class

Creating A Drupal 8 Theme will show you how to take your existing static website and convert it into a dynamic theme for Drupal 8. Couple your existing knowledge of HTML and CSS with the easy to use TWIG templating engine to create fast, secure, and flexible themes for the Drupal CMS. No PHP required!

Creating A Drupal 8 Theme

This course will teach you how to install Drupal 8 locally and dive into the essential components of a Drupal 8 theme. Specifically, you will learn the following: How to register a theme with Drupal 8, how to integrate Bootstrap into a theme, how to use the TWIG templating engine to define and customize Drupal components and how to import pre-existing assets including images and CSS styles.

Course Outline

  • Chapter 1: Introduction to Drupal 8 Themes

    The first step in creating a custom theme is to set up a local development environment for Drupal on your system. to do this you will learn how to install Aquia’s Dev Desktop and be up and running in approximately 5 minutes.

  • Chapter 2: How to Import an Existing Site and Create a New One

    Dive deeper into Aquia’s Dev Desktop and learn how to import an existing Drupal site as needed. Additionally, learn how to start a Drupal 8 site from scratch if you do not have pre-existing content.

  • Chapter 3: Drupal 8 and the Theming Layer

    Review how Drupal 8 works and how a page is structured. You will survey some of the components you will be configuring for your theme including pages, regions, blocks, nodes, and fields.

  • Chapter 4: Starting Your Theme

    Learn how to create the file and folder structure required to register a theme with Drupal 8. Additionally you will learn how to integrate Bootstrap to give yourself basic responsive layout and simple styles for your text.

  • Chapter 5: Hello TWIG

    Learn the fundamentals of using TWIG, the templating engine for Drupal 8. You will discover how to print variables, how to loop through items, and how to comment your code.

  • Chapter 6: Tweaking TWIG

    In this chapter you will learn how to optimize your default TWIG files for local development purposes. Specifically, you will discover how to work with the cache settings to make your life easier!

  • Chapter 7: Creating Custom Templates

    In this chapter you will examine some of the default content types created with a clean Drupal install and then learn how to customize the block layout. Specifically you will learn how to remove a sidebar and customize the header of your theme using TWIG.

  • Chapter 8: Adding Assets and Style

    Give your theme some substance and style by importing images and stylesheets for a custom page template. Additionally, dig a bit deeper into TWIG logic by exploring variables and creating some page logic using an “if/else” statement.

  • Chapter 9: Custom Templates for Specific Page Types

    Learn how to add articles and basic pages in Drupal and then configure those templates accordingly with TWIG.

  • Chapter 10: Getting Twiggy with It

    Apply a few finishing touches to your theme, review what you have learned and get some resources for learning more about TWIG and Drupal 8.

Prerequisites

  • Basic to Intermediate competency with HTML and CSS
  • Knowledge of inspecting code with browser developer tools is highly recommended, although not mandatory
  • This course assumes introductory-level experience with any version of Drupal

Requirements