The main difference between theming of Drupal 7 & Drupal 8 is theme engine. In Drupal 7 supports PHPTemplate and Drupal 8 leverages Twig engine

Step 1: Create .info file
An Important part of Drupal theme or module is .info file. Through this file drupal will understand whether it is theme or module.

In Drupal 7 it was .info but in D8 it changes to .info.yml (called as yaml). So to create a theme, first create a folder and name it after the theme. In this case let’s say theme name is “Invezza”, So create a folder of name invezza. Notice that all letters are in small. Now in this folder create a file and save it as invezza.info.yml. This is our info file. The rest is same as Drupal 7 .info file

You’ll see that there are other files also, i’ll explain them to later. First focus on the .info.yml file.

/*——————————— Code starts here ——————————————–*/
name: Invezza
type: theme
description: ‘This is D8 theme based on bootstrap’
core: 8.x

regions:
top_header_first: ‘Top Header First’
top_header_second: ‘Top Header Second’
top_header_third: ‘Top Header Third’
top_header_fourth: ‘Top Header Fourth’
header: ‘Header’
logo: ‘Logo’
primary_menu: ‘Primary Menu’
page_title: ‘Page Title’
breadcrumb: ‘Breadcrumb’
slider: ‘Slider’
front_block: ‘Front Block’
front_block_first: ‘Front Block First’
front_block_second: ‘Front Block Second’
front_block_third: ‘Front Block Third’
destination_block: ‘Destination Block’
explore_block: ‘Explore Block’
booking_block: ‘Booking Block’
latest_offers_block: ‘Latest Offers Block’
front_content: ‘Front Content’
content: ‘Content’
sidebar_right: ‘Sidebar Right’
footer_first: ‘Footer First’
footer_second: ‘Footer Second’
footer_third: ‘Footer Third’
footer_fourth: ‘Footer Fourth’
footer_fifth: ‘Footer Fifth’
footer_sixth: ‘Footer Sixth’
/*——————————— Code ends here ——————————————–*/

Now go to the Appearance section and you will see Invezza theme. Don’t enable it yet, we still have to define the layout of our theme.

Step 2: Create .libraries.yml file
Then comes the .libraries.yml file. The main purpose of this file is to include all the css and js files. In Drupal 7 these file were included in .info file directly. In Drupal 8 they are also included in .info.yml file but indirectly.

Now create invezza.libraries.yml file in root directory of theme folder.

/*——————————— Code starts here ——————————————–*/
custom:
version: 1.x
css:
   theme:
     includes/bootstrap/css/bootstrap.css: {}
js:
   includes/bootstrap/js/bootstrap.js: {}
dependencies:
   – core/jquery
   – core/drupal.ajax
   – core/drupal
   – core/drupalSettings
   – core/jquery.once
global-style:
version: 1.x
css:
   theme:
     css/custom.css: {}
fonts:
version: 1.x
css:
   theme:
     ‘//fonts.googleapis.com/css?family=Montserrat’: {type: external}
     ‘//fonts.googleapis.com/css?family=Kaushan+Script|Courgette|Kalam’:{type:external}
     ‘//fonts.googleapis.com/css?family=Open+Sans+Condensed:300’:{type:external}
/*——————————— Code ends here ——————————————–*/

Consider custom in above code as container of the css and js files. In above file there are 3 containers custom, global-style and font. You can name the anything you want. Under these container we define the css and js files which we want to use in our theme.

Note: Use spacebar instead of tabs or it will throw an error.

Now define these containers to .info.yml file like this

libraries:
– invezza/custom
– invezza/global-style
– invezza/fonts

By defining libraries section in .info.yml file we tell Drupal to look for .libraries.yml file and find there custom,global-style and fonts container.

So the here is how invezza.info.yml file will look like

/*——————————— Code starts here ——————————————–*/
name: Invezza
type: theme
description: ‘This is D8 theme based on bootstrap’
core: 8.x

libraries:
– invezza/bootstrap
– invezza/global-style
– invezza/fonts

Next is invezza.theme file. In Drupal 7 this file was used to be template.php. Just the name is different.

Step 3: Create page.html.twig file
Now we have told drupal that this is theme for core version 8 and also specify the css and js file which we want to include in our .info.yml amd libraries.yml file. Now lets define the page layout of our theme. For this create template folder in the theme directory and create new file named as page.html.tiwg. In Drupal 7 this file used to be named as page.tpl.php.

This naming difference because we are using twig theme engine.

/*——————————— Code starts here ——————————————–*/
{% if page.explore_block or page.booking_block %}
<div class = “row”>
{% if page.explore_block %}
<div class = {{explore_block_class}} >
{{ page.explore_block }}
</div>
{% endif %}
{% if page.booking_block %}
<div class = {{ booking_block_class }}>
{{ page.booking_block }}
</div>
{% endif %}
</div>
{% endif %}
/*——————————— Code ends here ——————————————–*/

Let’s go through this file and see what’s going on. The first thing we notice are the two different types of code blocks (also called block delimiters). One type of code block is marked by double curly braces like so:

{{…}} This is used to print a variable

{% … %} This is for usinf loop, function etc etc.

{# This is used for comments. #}

You will notice that in above piece of code the “if .. endif” goes inside the {% … %} braces and variable to print goes inside {{ … }}. so like above code define the HTML structure and print the variable using the appropriate braces.

Once the page.html.twig is completed, the theme is ready to use.