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!
After this video you will have a better understanding about what a theme in Drupal 8 is.
- 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:
- 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
- what are the base themes and how are we using them
- what is the difference between the base themes
- declare our info file
- activate our newly created theme
- what are the asset libraries
- how we may include them in our theme
- where should we put our css files
- how we can include them to our theme
- where to place the js files
- how to add them to our theme
- how to find from where the markup on the page comes from
- see how we may change the markup
- how to locate where to change
- how to overwrite a template file
- example with a block template file
- installing and eneabling the kint debugging module
- inspecting variables with kint
- what are the view modes used for
- where they are and how we may change them
- 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
- what are the html templates used for
- example how we may overwrite a html template
- 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
- how to use preprocess functions
- example about how we may alter variables
- what is responsible the Render API for
- the most popular renderables and some examples
- why are Symfony and Drupal 8 using this templating engine
Quick basics about the most used twig syntaxes
- echoing a variable in the template
How you may foreach some arrays in Twig
How you may add some conditional blocks in Twig
Some handy tools that you may need to manipulate variables right before the printing
- how the attribute objects look like
- some examples about adding attributes and how else we may use them
- how we may use the extend functionality in templates
- we may not only alter, but also overwrite blocks
- functions for generating correct link paths
- some examples for the popular use cases
How we should correctly prepare our website's templates if we want to implement more than one language
Overview of the static website that we will be converting into Drupal 8 theme
- prepare our new theme
- add a screenshot to the theme
- copy the files from the static version
- create assets library
- creating our html template
- creating our page template
- reproducing the markup into these templates from the static version
- fix the path to our logo image
- fix the markup of the branding area
- removing the unneeded markup around the menu
- implementing the menu markup
- prepare the view wrapper templates
- prepare the teaser view mode
- overwrite the node template for the front page
Ways and resources to develop yourself even further
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 ...