How to Create a Custom Drupal 10 Theme?

Drupal is a powerful and flexible content management system, and its theming capabilities allow developers to create visually stunning and highly customizable websites. This guide walks you through the steps to create a custom Drupal 10 theme from scratch or using a base theme like Classy, FlexiStyle, or FlexiStyle Bootstrap.

What is a Custom Theme in Drupal?

A custom theme in Drupal allows you to define your website's visual design and layout. It enables you to customize styles, scripts, templates, and other assets to align with your branding and functionality requirements.

Step-by-Step Guide to Create a Custom Theme

Prerequisites

Before you begin, ensure you have the following:

A functional Drupal 10 installation.
Basic knowledge of Drupal theming, CSS/SCSS, and jQuery/JavaScript.

1. Create the Theme Directory

Navigate to the custom themes directory in your Drupal installation:
```
cd [Drupal_Root]/themes/custom
```
Replace [Drupal_Root] with the root directory of your Drupal installation.

Create a new folder for your theme:

mkdir my_custom_theme
cd my_custom_theme

2. Create the Info File

Create a .info.yml file to define your theme’s metadata:

name: 'My Custom Theme'
type: theme
description: 'A custom theme for Drupal 10.'
core_version_requirement: ^10
base theme: classy
libraries:
  - my_custom_theme/global-styling
regions:
  header: 'Header'
  content: 'Content'
  footer: 'Footer'

Replace my_custom_theme with your theme’s machine name.

3. Define Libraries

Create a my_custom_theme.libraries.yml file to define styles and scripts:

global-styling:
  css:
    theme:
      css/style.css: {}
  js:
    js/script.js: {}

4. Add Styles and Scripts

Create a css folder and add a style.css file for your custom styles.
Create a js folder and add a script.js file for your custom JavaScript.

5. Add Templates

Create a templates folder in your theme directory.
Add Twig template files to override default templates. For example, to customize the page layout, add a page.html.twig file.

6. Enable the Theme

Log in to your Drupal site as an administrator.
Go to Appearance in the admin menu.
Locate your theme and click Install and Set as Default.

7. Test and Customize

Clear Drupal’s cache to apply changes:
```
drush cr
```
Preview your site and adjust styles, scripts, and templates as needed.

Optional: Use SCSS for Styling

If you prefer SCSS for more organized styling:

Install Node.js and Gulp CLI globally:
```
npm install -g gulp-cli
```
Set up a scss folder in your theme directory and create SCSS files.
Create a gulpfile.js for SCSS compilation and run:
```
gulp
```

Popular Base Themes for Drupal

Here are some recommended base themes to kickstart your custom Drupal theme development:

1. FlexiStyle (Contrib Theme)

Description: A flexible base theme supporting customization for modern websites, compatible with Drupal 10 and 11.
Features: Responsive, customizable, and supports subthemes.
URL: FlexiStyle on Drupal.org

2. FlexiStyle Bootstrap (Contrib Theme)

Description: Combines the flexibility of FlexiStyle with the power of Bootstrap for creating responsive and visually appealing websites.
Features: Bootstrap 5 integration, easy subthemable.
URL: FlexiStyle Bootstrap on Drupal.org

3. FlexiStyle Bootstrap SCSS (Contrib Theme)

Description: An SCSS-based variant of FlexiStyle Bootstrap, designed for developers who prefer to work with SCSS for modular and maintainable styles.
Features: SCSS support, Gulp-based workflow, customizable.
URL: FlexiStyle Bootstrap SCSS on Drupal.org

4. Bootstrap Barrio (Contrib Theme)

Description: A popular Bootstrap-based theme with full integration of Bootstrap 4 and 5, offering extensive configuration options and responsiveness.
Features: Pre-built layouts, flexible grid system, SCSS-based styling.
URL: Bootstrap Barrio on Drupal.org

5. Classy (Core Theme)

Description: A core theme in Drupal, Classy provides a clean and simple base theme with reusable components for building custom themes.
Features: Built into Drupal core, stable, easy to extend.
URL: Classy Documentation

6. Stable (Core Theme)

Description: Another core theme, Stable, offers a clean slate for creating highly customized themes by minimizing default styling.
Features: Minimal markup, ideal for advanced theming.
URL: Stable Documentation

7. Olivero

Description: Drupal's modern default theme is designed for accessibility and aesthetics, suitable for small to medium projects.
Features: Accessible, responsive, visually appealing.
URL: Olivero on Drupal.org

Tips for Successful Theming

Refer to Documentation: Check Drupal’s official theming guide for advanced features and configurations.
Use Browser DevTools: Inspect elements on the frontend to debug styles and identify CSS classes.
Leverage Classy or Stable Base Themes: These base themes provide a solid foundation for your custom theme.

Conclusion

Creating a custom Drupal 10 theme allows you to fully control the design and functionality of your website. Whether building from scratch or using a base theme, following these steps will help you craft a unique and responsive site tailored to your needs. Happy theming!