Create a Custom Theme in Drupal 8.

Today we will talk about the basics of theming in Drupal 8. The main expected outcome of this article is to understand how to create a new custom theme in Drupal 8 and the integration of tools to facilitate the front end development.

Drupal 8 use YAML files for configuration files. We start by creating a file info.yml, You must include the name of your theme and should be stored in a folder bearing the same name as your theme. suppose the theme is called ‘safetyid’ the folder name is called safetyid and the YML file safetyid.info.yml.

The YML file structure is as follows.

After saving the files we have to enable our custom theme. Go to the appearance and set as the default theme.

Then add the routes for the archives and libraries of CSS and JS files, for this purpose, we create a file called yourthemename.libraries.yml, here we will place the files route.

We should know that there are two libraries global-css and global-js , these names make sense for global files, Here I include my css and js files under the libraries,

Now we have libraries we have to add it to our theme file safetyid.info.yml:

Then, the following safetyid.info.yml file, we will declare our regions and we will assign the regions into our templates to the theme we just created. Templates in Drupal 8 are created with the twig.

Here I show u how to declare the regions into safetyid.info.yml file under the libraries,

Then copy the templates from our core template folder in our site(core/module/system/templates — route of the templates), we can use the system templates that we need to create and modify our theme. Do not modify the template that is in the core, copy the template and paste it in our custom theme and modify it.

Ok, then we start to use the template page.html.twig. now I show you how to add region in the template.

{% if page.region_name %}
  {{ page.region_name }}
{% endif %}

here I assign ‘content’ region into the page.html.twig

finally, the regions can be used in the UI Drupal section blocks, there you will see the regions that you created and you can assign the content in it.

Now our theme has been created and ready to receive styles and JS behaviours, we have to install the tools that will do the process to manage and watch our CSS and JS tasks. so that we will use GULP.

In my next blog, I will explain how to Set up the gulp for Drupal. stay tuned with us.