This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

Secure Any CMS With Ease with Our Malware Protection Add-On! LEARN MORE→

Step by Step Drupal 8 Theme Development Tutorial – An Introduction

Updated on April 1, 2021

5 Min Read

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!

Drupal 8 Theme Development Banner

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:

Unlock the Power of Managed Hosting for Your Drupal Website

Unleash Drupal brilliance effortlessly with our optimized hosting, ensuring seamless performance and expert management.

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).

info.yml file

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).

theme details

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.

theme install

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).

view source

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.

remove stylesheet

Clear the Cache

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

clear cache

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.

aggregate

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.

libraries.yml file

Edit this file to add CSS.

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).

library css

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.

library js

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

js in info.yml file

Once done, save the file.

Drupal Hosting: Where Performance and Reliability Converge

Optimize your Drupal site’s potential with our managed hosting – discover elevated performance and peace of mind.

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!

Share your opinion in the comment section. COMMENT NOW

Share This Article

Shahzeb Ahmed

Shahzeb is a Digital Marketer with a Software Engineering background, works as a Community Manager — PHP Community at Cloudways. He is growth ambitious and aims to learn & share information about PHP & Laravel Development through practice and experimentation. He loves to travel and explore new ideas whenever he finds time. Get in touch with him at [email protected]

×

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Want to Experience the Cloudways Platform in Its Full Glory?

Take a FREE guided tour of Cloudways and see for yourself how easily you can manage your server & apps on the leading cloud-hosting platform.

Start my tour

CYBER WEEK SAVINGS

  • 0

    Days

  • 0

    Hours

  • 0

    Mints

  • 0

    Sec

GET OFFER

For 4 Months &
40 Free Migrations

For 4 Months &
40 Free Migrations

Upgrade Now