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.
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.
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.
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
Write the following code and save it and clear the cache
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.'
base theme: false
core_version_requirement: ^8 || ^9 || ^10
primary_menu: 'Primary menu'
secondary_menu: 'Secondary menu'
page_top: 'Page top'
page_bottom: 'Page bottom'
sidebar_first: 'Sidebar first'
sidebar_second: 'Sidebar second'
footer_top_right: 'Footer Right Top'
footer_top_left: 'Footer Left Top'
Define Your theme_name.libraries.yml file
Here you can define your css files, js files, and core dependencies and custom dependencies as well.
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
- Install Drupal 8 and Drupal 9 on Windows 10
- Best Drupal Hosting
- Drupal 7 Bootstrap Theme Creation
- Convert Drupal 8 into a PWA
- Best Drupal 9 Themes