Prerequisites
Before you start, ensure you have the following:
A Drupal installation with Drush installed.
A base theme to create your subtheme from (e.g., Olivero, Bartik, or a contributed theme).
File and directory permissions configured correctly for your Drupal installation.
Steps to Create a Subtheme Using Drush
Step 1: Verify Drush Installation
To confirm Drush is installed and functioning, run:
$ drush --version
This should output the installed version of Drush.
Step 2: Identify the Base Theme
Decide which base theme you want to use for your subtheme. You can list available themes by running:
$ drush theme:list
Locate the machine name of your desired base theme.
Step 3: Create the Subtheme
Use Drush to generate a subtheme. The command structure is:
$ drush generate theme
This interactive command will prompt you for several details:
Name of the theme: Enter the name of your subtheme (e.g.,
my_subtheme
).Base theme: Provide the machine name of the base theme (e.g.,
olivero
).Path: Specify the path where the theme should be created (e.g.,
themes/custom
).Description: Add a description for your subtheme.
Core version: Specify the core version (e.g.,
^10 || ^9.4
).
Once you complete the prompts, Drush will generate the necessary files and directories for your subtheme.
Step 4: Review the Generated Files
Navigate to your subtheme's folder and review its structure. For example:
my_subtheme/
my_subtheme.info.yml
my_subtheme.libraries.yml
my_subtheme.theme
css/
js/
templates/
The .info.yml
file contains basic metadata, and the libraries.yml
file defines CSS/JS assets.
Step 5: Enable the Subtheme
Enable your new subtheme and set it as the default theme by running:
$ drush theme:enable my_subtheme
$ drush config-set system.theme default my_subtheme
Step 6: Clear Cache
Clear Drupal’s cache to apply the changes:
$ drush cr
Customizing Your Subtheme
Add CSS and JS
Add your custom CSS and JS files in the css/
and js/
directories. Reference these files in my_subtheme.libraries.yml
:
global-styling:
css:
theme:
css/style.css: {}
js:
js/script.js: {}
Override Templates
To override Twig templates, copy them from the base theme or core module to your subtheme's templates/
directory and modify them as needed.
Modify the .info.yml
File
Edit the .info.yml
file to include regions, dependencies, or additional libraries.
Testing Your Subtheme
Open your Drupal site and verify the new theme is applied.
Check for any issues with styling or functionality.
Debug using Drupal's Twig debugging tools if needed.
Conclusion
Using Drush to create a Drupal subtheme is an efficient way to kickstart your theme development process. It automates file generation and ensures your subtheme is properly configured. With your subtheme in place, you can focus on customizing the design and functionality to meet your project's needs.