Create custom theme in Drupal 8

September 09, 2018

In this tutorial we are going to discuss about, How to create custom theme (template) in Drupal 8 PHP CMS. By creating custom theme, we can customize the look and feel of the website as per our wish instead of using the pre-defined template or third party templates.

To create a new template, we have to follow the following steps.

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

Step 1: Create YAML (.yml) 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.

Create a folder with the theme name which we are going to create like (first_theme) inside the <root>/theme folder.
Create a new file inside the folder with the name first_theme.info.yml.

Step 2: Edit YAML file

Open the YAML file in your preferred text editor and enter the following details:

name: first_theme

description: Enter some description about your template

type: theme

core: 8.x

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.

Step 3: Remove Stylesheets (Optional)

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 and determine which CSS files you wish to remove, the rest of the process is pretty straightforward.

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

stylesheets-remove

-“stylesheet to be removed”

Step 4: Clear the Cache

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

Step 5: 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.

Step 6: Add CSS

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 first_theme.libraries.yml and update the file with css files which we are going to use in the theme.

global-css:

css:

theme:

css/style.css:{}

Now, add the library in the first_theme.info.yml file as well. To do this, add the below code in the file.

libraries:

-first_theme/global-css

Step 7: Add JavaScript Reference

To add reference to the JavaScript reference to the theme, add the below code snippet to the first_theme.libraries.yml file.

global-js:

js:

js/site.js:{}

dependencies:

-core/jquery

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

-first_theme/global-js

Finally the first_theme.info.yml will looks like below,