The main difference between theming of Drupal 7 & Drupal 8 is theme engine. In Drupal 7 supports PHPTemplate and Drupal 8 leverages Twig engine.
Open your installed Drupal project folder in any editor you prefer. Under the themes folder create a folder with your desired theme name.
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 “Test”, So create a folder of name test. Notice that all letters are in small. Now in this folder create a file and save it as test.info.yml. This is our info file. The rest is same as Drupal 7 .info file
/*——————————— Code starts here ——————————————–*/
name: Test
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’
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 Test 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 test.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:
– test/custom
– test/global-style
– test/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 test.info.yml file will look like
/*——————————— Code starts here ——————————————–*/
name: Test
type: theme
description: ‘This is D8 theme based on bootstrap’
core: 8.x
libraries:
– test/bootstrap
– test/global-style
– test/fonts
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’
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 ——————————————–*/
Next is test.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.
1 comment:
Nyc
Post a Comment