Disclaimer: TubeMint is fully funded by its readers, we recommend hightly rated affiliate products and services and when you buy them through our links, we get commission at no extra cost to you. Thanks for you support!
drupal 9 theming

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

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.

 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: 'An example theme.' 
type: theme 
package: Custom 
base theme: false 
core: 8.x
core_version_requirement: ^8 || ^9

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.

Related Posts..

  1. Install Drupal 8 and Drupal 9 on Windows 10
  2. Best Drupal Hosting
  3. Drupal 7 Bootstrap Theme Creation
  4. Convert Drupal 8 into a PWA

Leave a Comment