how to create custom theme in Drupal 11

Steps to Create a Custom Drupal 11 Theme

1. Set Up the Theme Directory

First, you need to create a directory for your theme inside the themes/custom folder. For example, if you want to name your theme "MyTheme", you would create the following directory structure:

/themes
  /custom
    /mytheme

2. Create the `.info.yml` File

The .info.yml file is essential for defining your theme’s metadata, such as the name, description, and regions. Create a file called mytheme.info.yml inside the mytheme directory with the following content:

name: MyTheme
type: theme
base theme: classy
description: 'A custom theme for Drupal 11.'
core_version_requirement: ^11
package: Custom

regions:
  header: 'Header'
  primary_menu: 'Primary menu'
  secondary_menu: 'Secondary menu'
  content: 'Content'
  footer: 'Footer'

libraries:
  - mytheme/global-styling

Explanation:

base theme: Optional. If you're building on top of an existing theme like classy, you inherit some base styles and templates.
regions: Defines layout regions where blocks can be placed (e.g., header, footer).
libraries: Defines CSS and JavaScript libraries used in your theme.

3. Create the `.libraries.yml` File

In the mytheme.libraries.yml file, you’ll define the CSS and JavaScript assets your theme uses. Create this file inside your theme directory:

global-styling:
  version: 1.0
  css:
    theme:
      css/styles.css: {}
  js:
    js/scripts.js: {}

Here, we're adding the custom styles and scripts for the theme. You’ll create the css/styles.css and js/scripts.js files next.

4. Add CSS and JavaScript Files

Now, create the following files inside the mytheme directory:

css/styles.css: This file contains your custom styles.
js/scripts.js: This file contains your custom JavaScript.

Example of a simple styles.css:

body {
  background-color: #f4f4f4;
  font-family: Arial, sans-serif;
}
        
h1 {
  color: #333;
}

Example of a simple scripts.js:

document.addEventListener('DOMContentLoaded', function () {
  console.log('My custom theme JS loaded.');
});

5. Create a Theme Template File

Drupal uses template files to render the HTML structure of your site. Start by creating a page.html.twig file inside a new templates directory in your theme:

/themes
  /custom
    /mytheme
      /css
        styles.css
      /js
        scripts.js
      /templates
        page.html.twig
      mytheme.info.yml
      mytheme.libraries.yml

Here’s an example of a basic page.html.twig:

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>{{ head_title }}</title>
      {{ head }}
    </head>
    <body>
      <header>
        <div class="header-content">
          {{ page.header }}
        </div>
      </header>

      <nav>
        <div class="primary-menu">
          {{ page.primary_menu }}
        </div>
      </nav>

      <main>
        <div class="content">
          {{ page.content }}
        </div>
      </main>

      <footer>
        <div class="footer-content">
          {{ page.footer }}
        </div>
      </footer>

      {{ scripts }}
    </body>
  </html>

This file defines the structure of your page, including regions like header, primary_menu, and footer, which are referenced in your mytheme.info.yml file.

6. Enable the Theme

Once you’ve created all the necessary files, you can enable your theme through the Drupal admin interface:

Go to Appearance in the Drupal admin menu.
Find your theme in the list and click Install and set as default.

Alternatively, you can enable it via Drush:

drush theme:enable mytheme

7. Clear the Cache

To see your theme in action, clear the cache:

drush cr

8. Customize the Theme

With your theme now active, you can start customizing it further by:

Adding additional templates like node.html.twig or block.html.twig.
Overriding default CSS styles to match your design.
Creating a custom theme-settings.php file to add theme-specific settings in the admin interface.

Conclusion

By following these steps, you’ve created a basic custom theme for Drupal 11. From here, you can extend your theme with more templates, custom styles, and functionality to suit your needs. A well-crafted theme not only enhances the visual appeal of your site but also improves the overall user experience.

Looking for a Drupal 10 or Drupal 11 Developer?

Whether you need a custom Drupal 10 or Drupal 11 backend module, a responsive frontend theme, or expert freelance support, we're here to help. Write to us, and we'll create it for you!

Hire a Drupal Expert