How to Create a Subtheme in Drupal Using Drush?

How to Create a Subtheme in Drupal Using Drush?

Creating a subtheme in Drupal is a common task for developers looking to customize a site's appearance while leveraging the functionality of a base theme. Drush, Drupal's command-line tool, simplifies this process. Here's a step-by-step guide to creating a subtheme using Drush.

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:

  1. Name of the theme: Enter the name of your subtheme (e.g., my_subtheme).

  2. Base theme: Provide the machine name of the base theme (e.g., olivero).

  3. Path: Specify the path where the theme should be created (e.g., themes/custom).

  4. Description: Add a description for your subtheme.

  5. 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

  1. Open your Drupal site and verify the new theme is applied.

  2. Check for any issues with styling or functionality.

  3. 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.

Post a Comment

Previous Post Next Post