Drupal 9 Theme Development Guide

Drupal 9 Theme Development tutorial for Drupal site builders. This is going to be a quick guide on building Drupal 9 theme from scratch. It that’s what you are looking for then this post will help achieve in easy way. It’s going to be a Drupal 9 starter theme.

However, you want to develop Drupal 8 them; don’t worry because there is not much difference between building Drupal 8 and Drupal 9 themes. The only attribute you need to change is the core: 9.x to core:8.x and the rest will the same.

This post is a quick guide to creating custom Drupal 9 theme from scratch using classy theme as base theme. However, Drupal 9 is shipping with few upgrades that you might want to know before you start building Drupal 9 theme or module.

What’s new in Drupal 9..?

As you might already know that Drupal 9 is based on Symfony 4, Twig 2 and requires PHP 7.3.x and above; does not support jQuery UI anymore. Modules like layout builder and bigpipe are the main attraction and obviously the new default theme.

That’s enough, let’s create Drupal 9 theme.

Install Drupal 9 on Windows 10

If you have Windows 10, you can follow instructions from the video below.

https://www.youtube.com/watch?v=mrA2_6ADWAQ

Now, I am going to assume that you have installed Drupal 9 on your system.

Create Drupal 9 Theme

Create a folder under themes/ folder and name whatever you want but don’t leave any space in between the words, just use underscores or hyphens instead. Follow this tutorial step by step by if you want to understand how custom Drupal 8/9 themes are created.

drupal9/themes/theme_name

Create Drupal 9 info.yml and libraries.yml files

Create files and folder in your new theme

I am going to use the terminal to create files and folders in the theme directory. You can create them manually.

cd theme_name

touch theme_name.info.yml theme_name.libraries.yml 

mkdir css js

touch css/style.css js/script.js

Enabling Twig Debug and Disabling Twig Cache

Create services.yml file under sites/default/ folder

touch drupal9/sites/default/services.yml

Write the following code and save it and clear the cache

#sites/default/services.yml
parameters:  
  twig.config:    
    debug: true    
    cache: false    
    auto_reload: true

Define Your theme in theme_name.info.yml

Define your theme in theme_name.info.yml. Remember regions will help you in theming the most.

name: Theme Name
description: 'A drupal 9 starter theme example.' 
type: theme 
package: Custom 
base theme: false 
core_version_requirement: ^8 || ^9 || ^10
version: 1.0

libraries: 
  - theme_folder_name/global-styling

regions:
  header: Header
  primary_menu: 'Primary menu'  
  secondary_menu: 'Secondary menu'  
  page_top: 'Page top'  
  page_bottom: 'Page bottom'  
  highlighted: Highlighted  
  breadcrumb: Breadcrumb  
  content: Content  
  sidebar_first: 'Sidebar first'  
  sidebar_second: 'Sidebar second'
  footer_top_right: 'Footer Right Top'  
  footer_top_left: 'Footer Left Top'  
  footer: 'Footer'

Define Your theme_name.libraries.yml file

Here you can define your css files, js files, and core dependencies and custom dependencies as well.

global-styling:
  css:
    theme:
      css/style.css: {}
      css/print.css: {}
  js:
   js/script.js: {}

  dependencies:
    - core/jquery

Clear Cache and Activate Your New Theme

Now you can clear the cache and activate your new theme and set it as default. Also write some css and javascripit in /js/script.js and /css/style.css files to test it they are working.

Working with classy base theme css selectors

If you want to create Drupal 9 theme based on classy base theme, classy CSS selectors guide by Drupal will make your life easier.

Drupal Theme Developer

If you are looking for awesome Drupal 8 and Drupal 9 theme and module developers at very reasonable and cheapest possible in the world, then I have a curated list of highly rated Drupal developer that can help you develop and design your custom web apps in a short period of time.

Drupal Theming Course

If you need step-by-step guide on building Drupal themes, then you might find this short online Drupal 8 theming course.

Download Drupal 9 || 10 Starter Theme

If you would like to have a look at the finished Drupal 8 || 9 || 10 starter theme, you can download it from my git repository.

Download it from my Drupal 9 starter theme repo
Or clone it your Drupal/themes folder
Rename it
Install it your Drupal site
Customize it
Use it

Contents show