Creating a custom theme in Drupal involves several steps, including setting up the necessary file structure, defining the theme in an .info.yml file, adding CSS and JavaScript, and creating template files. Here’s a step-by-step guide to help you create a custom theme in Drupal:

1. Set Up the Theme Folder

Create a new folder for your custom theme in the themes/custom directory of your Drupal installation. For example, if your theme is called “MyTheme”, you would create the following folder:

themes/custom/mytheme

2. Create the Theme Info File

Inside the mytheme folder, create a file named mytheme.info.yml. This file defines the basic information about your theme. Here’s an example of what it might look like:

name: 'My Theme'
type: theme
description: 'A custom theme for my Drupal site.'
core_version_requirement: ^8 || ^9
package: Custom
base theme: stable9
libraries:
  - mytheme/global-styling
regions:
  header: 'Header'
  primary_menu: 'Primary Menu'
  content: 'Content'
  sidebar: 'Sidebar'
  footer: 'Footer'

3. Add CSS and JavaScript

Create a mytheme.libraries.yml file in the mytheme folder to define your CSS and JavaScript assets. Here’s an example:

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

Create the css and js folders in your theme directory and add your CSS and JavaScript files:

themes/custom/mytheme/css/style.css
themes/custom/mytheme/js/script.js

4. Create Template Files

Drupal uses Twig for its templating engine. Create a templates directory in your theme folder to store your custom templates. For example, you might create a page.html.twig file to customize the HTML for your pages:

themes/custom/mytheme/templates/page.html.twig

Here’s an example of what your page.html.twig file might look like:

<!DOCTYPE html>
<html>
  <head>
    {{ attach_library('mytheme/global-styling') }}
    {{ head }}
    <title>{{ head_title }}</title>
    {{ styles }}
    {{ scripts }}
  </head>
  <body>
    <header>
      {{ page.header }}
    </header>
    <nav>
      {{ page.primary_menu }}
    </nav>
    <main>
      {{ page.content }}
    </main>
    <aside>
      {{ page.sidebar }}
    </aside>
    <footer>
      {{ page.footer }}
    </footer>
    {{ page.bottom }}
  </body>
</html>

5. Enable the Theme

To enable your theme, go to the Appearance section of your Drupal admin interface (/admin/appearance). You should see “My Theme” listed there. Click “Install and set as default” to make it the active theme.

6. Customize Further

From here, you can continue to customize your theme by creating additional template files for different content types, views, and blocks. You can also add more CSS and JavaScript, and use preprocess functions in your theme’s .theme file for advanced customization.

7. Create a .theme File (Optional)

If you need to add PHP code for preprocess functions or other theme-related logic, create a mytheme.theme file in your theme folder:

<?php

/**
 * Implements hook_preprocess_HOOK() for page templates.
 */
function mytheme_preprocess_page(&$variables) {
  // Add custom variables or logic here.
}
  1. Clear CacheAfter making these changes, clear the Drupal cache to ensure your new templates are recognized.
    • Via Admin Interface: Go to Configuration > Development > Performance and click Clear all caches.
    • Using Drush: Run the command drush cache-rebuild.

Example Directory Structure

Your theme directory structure should look something like this:

themes/custom/mytheme/ 
├── assets/ 
│ ├── css/ 
│ │ ├── style.css 
│ │ ├── another-style.css 
│ │ └── yet-another-style.css 
│ ├── js/ 
│ │ ├── main.js 
│ │ ├── another-script.js 
│ │ └── yet-another-script.js 
├── templates/ 
│ ├── header.html.twig 
│ ├── footer.html.twig 
│ └── page.html.twig 
├── mytheme.info.yml 
└── mytheme.libraries.yml

By following these steps, you can create modular header and footer files in your Drupal theme, making your theme development more organized and maintainable.

Drupal, PHP

Tagged in: