Step by Step Drupal 8 Theme Development Tutorial – An Introduction

What is the first thing that a user gets to see when he/she visits your Drupal website?

The looks of the website.

And what determines the looks of the website?

The theme of the website!

There are boatloads of themes (both free and paid) available for Drupal 8, see Top Free And Premium Drupal 8 Themes. But what do you do if you could not find a theme that suits your requirements? Well then, you need not worry! You have arrived at the perfect place to start learning how to develop themes for Drupal 8. So, let’s dive into the world of Drupal hosting and theme development!

This Drupal 8 theme development tutorial is the first installment of a multi-part series on the topic In this part, I will show you how to setup the basic theme related files so that the Drupal 8 core could recognize the files. This process has the following seven steps:

• Create YAML (.yml) file
• Edit YAML (.yml) file
• Remove stylesheets
• Clear the cache
• Optimize the Website
• Add CSS
• Add Javascript

Create YAML file

In Drupal 8, YAML file (.yml) is used in the place of .INFO files (used in Drupal 7) to tell the website that the theme exists. Similarly, the directories that contain the theme and the files with theme details have also been changed.

Here is where and what files you would need to create for initialing the theme building process:

• Navigate to the root folder of the website (The root folder is located inside the public_html folder)
• Go to the theme folder
• Create a new folder named custom and go into it.
• Create a new folder here, and ensure that it is named exactly as the name of the theme.
• Move inside the folder created in the previous step and create a new file here with the name yourthemename.info.yml where yourthemename is the name of the theme (In the example below, first is the name of the theme).

Edit YAML file

Now, I will include some details in the YAML file (created earlier in order to get it listed on the Drupal website). Open the YAML file in your preferred text editor and enter the following details:

name: yourthemename

description: your_theme_description

type: theme

core: 8.x

Where yourthemename is the name of the theme, your_theme_description is the description of the theme, type is theme and core is the version of Drupal you are creating the theme for (In this is case it is Drupal 8, so 8.x).

Now go to your Drupal website and check if the new theme appears in the Drupal appearance section. If all the steps have been correctly followed, the theme will appear in the uninstalled section of your website’s appearance tab.

Click install and set as default to set this theme as default.

Remove Stylesheets

After you have set the new theme as default, and then navigate to the website’s homepage, you will notice that nothing has changed. This is because Drupal includes several stylesheets that loads by default. In many cases, the best strategy is to disable some of these stylesheets. To find out these stylesheets,  you will need to inspect the source code by right-clicking and selecting View Source from the context menu.

Note: Use incognito mode of the browser or log out of the admin panel before viewing the source of the web page. Otherwise, Drupal will show you the CSS files for the admin panel as well (you must not mess with these files).

After you have determined which CSS files you wish to remove, the rest of the process is pretty straightforward.

Go back to the themename.info.yml file and edit it. To remove the stylesheets you want, add this text:

stylesheets-remove

-“stylesheet to be removed”

-“” “” “” “”

-“” “” “” “”

Where stylesheet to be removed is the CSS file you wish to exclude.

Note: You have to be very careful about the indentations in YAML files.

Clear the Cache

Now login to your Drupal website’s admin panel. Next, go to Configuration >> Performance and click Clear all caches.

Optimize the Website

Next, go back to the Performance page and uncheck Aggregate CSS files and Aggregate JavaScript files in the Bandwidth Optimization section. This will help in speeding up the performance of the website.

Add CSS

Next, it is time to add reference to the CSS file that will be used for/by the theme. To do this, go to the theme’s folder and create a new file named yourthemename.libraries.yml, where yourthemename is the name of the theme.

Edit this file to add CSS.

Now, add the library in the info.yml file as well. To do this, add the text in the file (see the following screenshot).

Add JavaScript Reference

To add reference to the JavaScript reference to the theme, check out the following screenshot to add the text snippet to the libraries.yml file.

Now, add the the JavaScript library in the info.yml file.

Once done, save the file.

Conclusion

That’s it! In this Drupal 8 theme development tutorial, I demonstrated the process of adding a theme to your Drupal website. This process includes removal of CSS files, and addition of CSS and JavaScript to the theme. This is the first installment of the series on Drupal theme development. In the next installment, I will cover further details of Drupal theme development.

I hope you found this useful. Until next time, Happy Theming!

Hamza Zia

Hamza is a Drupal Community Manager at Cloudways - A Managed Drupal Hosting Platform. He loves to write about Drupal and related topics. During his free time, he can be seen obsessing over Football, Cars, Android and Gaming.

Get Connected on: Twitter Community Forum