Full introduction to Drupal 8 theming in easy steps
4.2 (360 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,895 students enrolled

Full introduction to Drupal 8 theming in easy steps

Learn all about the themes in Drupal 8
4.2 (359 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,895 students enrolled
Created by Nikolay Borisov
Last updated 4/2019
English [Auto]
Current price: $34.99 Original price: $49.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 6 hours on-demand video
  • 2 articles
  • 3 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Understand what Drupal 8 themes are
  • working with template files
  • Change any markup of a Drupal 8 website
  • Add css and javascript files to it
  • understanding the preprocess functions in Drupal 8
  • Understand the core concepts of the Twig templating language
  • create a Drupal 8 theme
Course content
Expand all 57 lectures 05:52:09
+ Welcome
3 lectures 09:59

Some info about your lector

Preview 00:31

What will you learn in this video course

Preview 02:00

- install Acquia dev desktop

- install Drupal 8 with the help of Acquia dev desktop

As you are installing Drupal - please refer to this issue -> https://www.udemy.com/full-introduction-to-drupal-8-theming-in-easy-steps/learn/v4/questions/4275486

There is well explained how to tackle your problem with installing a local Drupal instance that contains underscore in it's name

Preparing our working environment
+ Drupal Theming
18 lectures 01:34:22

After this video you will have a better understanding about what a theme in Drupal 8 is.

Preview 00:46

- some more info about the Appearance tab

- the folder structure of the Drupal themes folder

- check the existing themes on drupal.org

- install an existing theme from drupal.org


- the Integrity theme:


Themes inside of Drupal

Here are the simple steps:

1. Copy the sites/example.settings.local.php to sites/default/example.settings.local.php

2. Rename sites/default/example.settings.local.php to sites/default/settings.local.php

3. Move to the bottom of the sites/default/settings.local.php and uncomment the including of the settings.local.php file.

4. Copy the content of the sites/default/default.services.yml to sites/development.services.yml

5. Activate twig debug by changing the value of parameters > twig.config > debug to true in the sites/development.services.yml

6. Disable twig cache by changing the value of parameters > twig.config > cache to false in the sites/development.services.yml

7. Clear the cache in the Drupal instance by going to Configuration > Performance ( /admin/config/development/performance ) and click on Clear all caches

Development settings and cache clearing

- what are the base themes and how are we using them

- what is the difference between the base themes

Base themes

- declare our info file

- activate our newly created theme

Start with our theme

- what are the asset libraries

- how we may include them in our theme

Asset libraries

- where should we put our css files

- how we can include them to our theme

Adding our CSS files

- where to place the js files

- how to add them to our theme

Add our JS

- how to find from where the markup on the page comes from

- see how we may change the markup

Template files - where they are and how to overwrite them

- how to locate where to change

- how to overwrite a template file

- example with a block template file

Adding our markup in the template files

- installing and eneabling the kint debugging module

- inspecting variables with kint

Debugging templates with kint

- what are the view modes used for

- where they are and how we may change them

Drupal view modes

- using the view mode to prepare the fields

- we will se how we may overwrite node templates

- we will make some changes in a node template

Node templates

- what are the html templates used for

- example how we may overwrite a html template

Page and html templates

- what are the regions

- which are the defined ones

- how to declare a custom region


- some info about the most useful drupal module

- how to overwrite and change the view templates

- how to use the templates the correct way

Views and overwriting views templates

- how to use preprocess functions

- example about how we may alter variables

Add and change variables with preprocess functions

- what is responsible the Render API for

- the most popular renderables and some examples

Render API
+ Twig
10 lectures 26:08

- why are Symfony and Drupal 8 using this templating engine

Why Twig

Quick basics about the most used twig syntaxes 

Quick twig

- echoing a variable in the template

Twig Print variable

How you may foreach some arrays in Twig

Twig for loop

How you may add some conditional blocks in Twig

Twig if

Some handy tools that you may need to manipulate variables right before the printing  

Twig filters and functions

- how the attribute objects look like

- some examples about adding attributes and how else we may use them 

Twig attributes in drupal

- how we may use the extend functionality in templates

- we may not only alter, but also overwrite blocks 

Extending templates

- functions for generating correct link paths

- some examples for the popular use cases 

Links to other pages in the site

How we should correctly prepare our website's templates if we want to implement more than one language 

Translatable strings
+ Subproject: Convert a static website to Drupal 8 theme
6 lectures 50:54

Overview of the static website that we will be converting into Drupal 8 theme

Simple website example overview

- prepare our new theme

- add a screenshot to the theme

- copy the files from the static version

- create assets library

Preview 07:26

- creating our html template

- creating our page template

- reproducing the markup into these templates from the static version

Implementing the html and page wrapper

- fix the path to our logo image

- fix the markup of the branding area

Subproject - Fixing the branding of the site

- removing the unneeded markup around the menu

- implementing the menu markup 

Implementing the main menu

- prepare the view wrapper templates

- prepare the teaser view mode

- overwrite the node template for the front page

Implementing the main content at frontpage
+ Conclusion
1 lecture 05:57

Ways and resources to develop yourself even further

How you may continue to improve in Drupal 8 theming
+ Bonus
3 lectures 16:53
Chrome twig extention
Removing and overwriting CSS files
All you could do with the .info file
+ Bonus: Second Project step by step
16 lectures 02:27:54
1. Getting Started And Overview
2. Install Acquia Dev Desktop - Our Working Environment
3. Installing Drupal 8 with Acquia Dev Desktop
4. Declaring our Theme - Adding a Screenshot
5. Declaring our library - adding CSS and JS files to our theme
6. Activating some debugging settings
7. Overwriting template files in our theme
8. Implementing the main menu region
9. Theming our footer
10. Creating the fields in the Node and the Paragraph
11. Theming the node - top area and fields
12. Theming the first paragraph
13. Image paragraph
14. Text paragraph
15. Creating some example pages and wrapping up
The ready files of the project
  • Some experience with HTML and CSS and a tiny bit of PHP

Drupal 8 is out and from now on - every new Drupal website should be using the latest version of this wonderful Content Management Framework.

That means that we should learn to change the front-end of our Drupal 8 system - the way we need it. 

There are two main things that are changing the game in the Drupal 8 theming
- Drupal 8 is built on top of Symfony framework
- There are lessons learned from Drupal 7
that means that now the theming of a Drupal website is a bit different - everything is much more structured (almost all the markup is in template files), the templates are using Twig and everywhere one has to deal with code - one finds objects and classes.

In the end - it is not as scary as it looks like - simply everything evolved into something much better, much simpler and elegant, something that is not applicable only in the context of Drupal and that is following general web-development best practices.

In this course I tried to explain the general topics the shortest and the clearest way possible as afterwards I tried to illustrate everything with some simple examples. My opinion is that when you see some simple example working and when you try it by yourself - you already have the tools to investigate further and find exactly what you need to be done.

I've been doing drupal-development and theming for many years now - so I know what exactly are the topics that are needed the most - I tried to include all of those and in the end I wrapped all that was learned in an example website that we will convert together form a static html-css version into a working Drupal 8 theme.

Lets conquer together the Drupal 8 theming layer! 

Who this course is for:
  • newbies to Drupal 8 that want to get started with Theming
  • Drupal 7 developers and/or people with any Drupal experience that want to learn how the theming in Drupal 8 is being done
  • people that have a Drupal 8 website and want to change it's look
  • developers that want to see how Drupal 8 theming is being done