Full introduction to Drupal 8 theming in easy steps
4.3 (42 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
237 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Full introduction to Drupal 8 theming in easy steps to your Wishlist.

Add to Wishlist

Full introduction to Drupal 8 theming in easy steps

Learn all about the themes in Drupal 8
4.3 (42 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
237 students enrolled
Created by Nikolay Borisov
Last updated 6/2017
English
Current price: $10 Original price: $50 Discount: 80% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 3 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I 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
View Curriculum
Requirements
  • Some experience with HTML and CSS and a tiny bit of PHP
Description

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 is the target audience?
  • 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
Students Who Viewed This Course Also Viewed
Curriculum For This Course
38 Lectures
03:09:01
+
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

Preparing our working environment
07:28
+
Drupal Theming
18 Lectures 01:36:03

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

https://www.drupal.org/project/project_theme

- the Integrity theme:

https://www.drupal.org/project/integrity

Themes inside of Drupal
04:40

- disable some caching in order to make our theme development easier

- see how we may clear the Drupal cache

- Also you may have a look at a documentation page on drupal.org

https://www.drupal.org/node/2598914

Development settings and cache clearing
05:18

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

- what is the difference between the base themes

Base themes
02:26

- declare our info file

- activate our newly created theme

Start with our theme
03:29

- what are the asset libraries

- how we may include them in our theme

Asset libraries
01:15

- where should we put our css files

- how we can include them to our theme

Adding our CSS files
03:26

- where to place the js files

- how to add them to our theme

Add our JS
02:59

- 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
03:05

- 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
05:03

- installing and eneabling the kint debugging module

- inspecting variables with kint

Debugging templates with kint
07:32

- what are the view modes used for

- where they are and how we may change them

Drupal view modes
06:22

- 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
12:44

- what are the html templates used for

- example how we may overwrite a html template

Page and html templates
05:59

- what are the regions

- which are the defined ones

- how to declare a custom region

Regions
06:06

- 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
12:53

- how to use preprocess functions

- example about how we may alter variables

Add and change variables with preprocess functions
07:53

- what is responsible the Render API for

- the most popular renderables and some examples

Render API
04:07
+
Twig
10 Lectures 26:08

- why are Symfony and Drupal 8 using this templating engine

Why Twig
00:41

Quick basics about the most used twig syntaxes 

Quick twig
01:20

- echoing a variable in the template

Twig Print variable
02:02

How you may foreach some arrays in Twig

Twig for loop
03:38

How you may add some conditional blocks in Twig

Twig if
02:53

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

Twig filters and functions
02:14

- how the attribute objects look like

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

Twig attributes in drupal
01:54

- how we may use the extend functionality in templates

- we may not only alter, but also overwrite blocks 

Extending templates
06:42

- functions for generating correct link paths

- some examples for the popular use cases 

Links to other pages in the site
03:14

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

Translatable strings
01:30
+
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
03:23

- 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
11:01

- fix the path to our logo image

- fix the markup of the branding area

Subproject - Fixing the branding of the site
08:40

- removing the unneeded markup around the menu

- implementing the menu markup 

Implementing the main menu
10:12

- prepare the view wrapper templates

- prepare the teaser view mode

- overwrite the node template for the front page

Implementing the main content are frontpage
10:12
+
Conclusion
1 Lecture 05:57

Ways and resources to develop yourself even further

How you may continue to improve in Drupal 8 theming
05:57
About the Instructor
Nikolay Borisov
4.3 Average rating
43 Reviews
237 Students
2 Courses
Drupal PHP Developer

Highly dedicated developer with a true passion for programming. In my work I am taking care of every aspect of the Drupal Application’s functionality. I love to teach Drupal at my work and in any other possible occasions.

I have a masters degree in IT and I am working as PHP developer for over 8 years and as Drupal PHP developer for more than 5 years.

Other technologies that I really love are Elastic Search, Varnish, MongoDB, Mink/Behat, Python ...