Drupal 8 Theme Development

Drupal 8 Theme Development tutorial for Drupal site builders. This is going to be a quick guide on building Drupal 8 theme from scratch. It that’s what you are looking for then this post will help achieve in easy way. It’s going to be a Drupal 8 starter theme.

This post is a quick guide to creating custom Drupal 9 theme from scratch using classy theme as base theme. However, Drupal 9 is shipping with few upgrades that you might want to know before you start building Drupal 9 theme or module.

Install Drupal 8 on Windows 10

Now, I am going to assume that you have installed Drupal 9 on your system.

Create Drupal 8 Theme

Create a folder under themes/ folder and name whatever you want but don’t leave any space in between the words, just use underscores or hyphens instead. Follow this tutorial step by step by if you want to understand how custom Drupal 8/9 themes are created.

drupal8/themes/theme_name

Create Drupal 8 info.yml and libraries.yml files

Create files and folder in your new theme

I am going to use the terminal to create files and folders in the theme directory. You can create them manually.

cd theme_name

touch theme_name.info.yml theme_name.libraries.yml 

mkdir css js

touch css/style.css js/script.js

Enabling Twig Debug and Disabling Twig Cache

Create services.yml file under sites/default/ folder

touch drupal8/sites/default/services.yml

Write the following code and save it and clear the cache

#sites/default/services.yml
parameters:  
  twig.config:    
    debug: true    
    cache: false    
    auto_reload: true

Define Your theme in theme_name.info.yml

Define your theme in theme_name.info.yml. Remember regions will help you in theming the most.

name: Theme Name
description: 'An example theme.' 
type: theme 
package: Custom 
base theme: false 
core: 8.x

libraries: 
  - theme_folder_name/global-styling

regions:
  header: Header
  primary_menu: 'Primary menu'  
  secondary_menu: 'Secondary menu'  
  page_top: 'Page top'  
  page_bottom: 'Page bottom'  
  highlighted: Highlighted  
  breadcrumb: Breadcrumb  
  content: Content  
  sidebar_first: 'Sidebar first'  
  sidebar_second: 'Sidebar second'
  footer_top_right: 'Footer Right Top'  
  footer_top_left: 'Footer Left Top'  
  footer: 'Footer'

Define Your theme_name.libraries.yml file

Here you can define your css files, js files, and core dependencies and custom dependencies as well.

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

  dependencies:
    - core/jquery

Clear Cache and Activate Your New Theme

Now you can clear the cache and activate your new theme and set it as default. Also write some css and javascripit in /js/script.js and /css/style.css files to test it they are working.

Working with classy base theme css selectors

If you want to create Drupal 9 theme based on classy base theme, classy CSS selectors guide by Drupal will make your life easier.

Drupal Theme Developer

If you are looking for awesome Drupal 8 and Drupal 9 theme and module developers at very reasonable and cheapest possible in the world then I have a curated list of highly rated Drupal developer that can help you develop and design your custom web apps in a short period of time.

TubeMint