How to Create a Drupal 9/10 Theme: Step-by-Step Instructions
Drupal 9/10 is the latest version of the Drupal content management system, and it comes with several new features and improvements over its predecessor, Drupal 8. If you're interested in creating a custom Drupal 9/10 theme, this article will walk you through the process step by step.
1. Set up a development environment
Before you start creating your Drupal 9/10 theme, you need to set up a development environment. You can either use a local development environment, such as WAMP, LAMP, or MAMP, or you can use a cloud-based development environment, such as Pantheon or Acquia.
2. Create a new theme folder
Once you have your development environment set up, navigate to the "themes" directory of your Drupal installation. In this directory, create a new folder for your theme, and give it a descriptive name.
3. Create the .info.yml file
The .info.yml file is used to store information about your Drupal 9/10 theme, such as the name, description, and dependencies. Create a new .info.yml file in your theme folder, and include the following code:
name: My Theme type: theme description: My custom Drupal 9 theme. core_version_requirement: ^9 || ^10
4. Create the .libraries.yml file
The .libraries.yml file is used to manage the CSS and JavaScript files for your Drupal 9 theme. Create a new .libraries.yml file in your theme folder, and include the following code:
global-styling:
css:
theme:
css/style.css: {}
js:
js/script.js: {}
5. Create the page.html.twig template file
The page.html.twig template file is used as the base template for all pages on your Drupal 9 site. Create a new page.html.twig file in your theme folder, and include the following code:
<!DOCTYPE html> <html> <head> <title>{{ head_title }}</title> {{ head }} </head> <body> {{ page }} </body> </html>
7. Create template files for specific page elements
To create custom templates for specific page elements, such as the header, footer, and sidebars, create new template files in your theme folder. For example, you could create a header.html.twig file and include the following code:
<header> <h1>{{ site_name }}</h1> </header>
8. Define custom region
In your .info.yml file, you can define custom regions for your Drupal 9/10 theme. For example, you could include the following code to define a header region:
regions: header: 'Header'
9. Preview the theme
To preview your Drupal 9 theme, navigate to the Appearance page in the Drupal administrative interface. You should see your new theme listed, and you can select it to apply it to your site.