Drupal themes represent the factors of a Drupal site that render content on any cybersurfer-equipped device in a visually charming fashion. If Drupal is the cake, then themes are the frosting and decoration that make your website beautiful.
The art of theming requires an admixture of visual design skills, including using tools and experience in developing HTML markup and cascading style sheets (CSS) using JavaScript.
The Twig templating engine connects the theme to the Drupal output.
What’s Within The Drupal Theme?
Drupal themes have one introductory responsibility to provide a means of visually appealing material generated by factors like blocks and views. The theme has physical page holders called regions that site builders can use to store content, blocks, views, and other visual elements. A skilled Drupal Web Development Company will help you combine the physical layout and regions with cascading stylesheet elements and JavaScript to provide the browser with a complete bundle ready for site visitors to examine.
While the theme defines page regions, CSS, and JavaScript, it may also override the visual Appearance of output created by blocks, views, and modules.
Note: ( Not every theme requires as numerous areas as displayed.)
The theme also defines the structure and visualization of pages, content, and elements. It’s also important to mention the underlying templating engine, which is the workhorse of Drupal themes and is in charge of integrating the output generated by Drupal and its components with HTML markup and CSS. The Twig templating engine is a new addition to Drupal from Drupal 8. It takes the place of the previous templating engine, the PHP template.
What Exactly Is A Twig Templating Engine?
While HTML, CSS, and JavaScript are important in Drupal 9 themes, the actual star is the Twig templating engine. Twig is an element of the Symfony2 framework, which is the foundation upon which Drupal 8 is based, while Drupal 9 uses the Symfony4 framework.
Consider Twig the “cement” between the output created by a Drupal module and the rendered page displayed to site visitors.
Twig’s templating engine employs a straightforward syntax of variables, expressions, and tags. The Twig templating engine converts each of those particulars into largely optimized PHP code that connects the output of Drupal’s modules to the generated page. The following is a simple illustration of using Twig to render a block’s title and body:
<h3>{{ block.title }}</h3>
<div>{{ block.content }}</div>
While the output would be wrapped with tentative sense, the illustration highlights Twig’s and its syntax’s simplicity. Before probing into Twig syntax, let’s look at the corridor demanded to construct a Drupal 9 theme.
The Drupal 9 Theme’s Architecture
Drupal 9 themes, like modules, calculate on a collection of files in a standard directory structure to serve effectively. The theme directory at the root directory of your Drupal 9 site contains all themes that are not part of the Drupal 9 core. If you haven’t already, create two folders within the theme directory:
- Contrib: This is the location for all themes downloaded from drupal.org.
- Custom: This is where all themes you create for your site will be stored.
For the Custom theme, the directory structure is as follows:
themename
- config
- install
- schema
- css
- js
- images
- templates
Where themename is the name of your theme, in its directory, you’ll find several files:
- themename.info.yml: The only file required for a Drupal 8 theme. This file contains metadata about your theme, such as the name of your theme, as well as libraries, regions, and the Drupal core version necessary to use the theme.
name: Bartik
type: theme
description: ‘A versatile, recolorable theme with many regions and a responsive, mobile-first design.’
package: Core
core: 8.x
core_version_requirement: ^8 || ^9
libraries:
– bartik/global-styling
regions:
header: Header
primary_menu: ‘Primary menu’
secondary_menu: ‘Secondary menu’
page_top: ‘Page top’
Page_bottom: ‘Page bottom’
highlighted: Highlighted
featured_top: ‘Featured top’
breadcrumb: Breadcrumb
content: Content
sidebar_first: ‘Sidebar first’
sidebar_second: ‘Sidebar second’
featured_bottom_first: ‘Featured bottom first’
featured_bottom_second: ‘Featured bottom second’
featured_bottom_third: ‘Featured bottom third’
footer_first: ‘Footer first’
footer_second: ‘Footer second’
footer_third: ‘Footer third’
footer_fourth: ‘Footer fourth’
footer_fifth: ‘Footer fifth’
- themename.libraries.yml: The theme’s JavaScript and CSS libraries are defined here.
- themename.breakpoints.yml: Defines the screen widths that must be changed to fit different devices.
- Themename.theme: Contains all conditional logic and output preprocessing that occurs before it is rendered on the page. It may also create complex theme settings to supplement the basic theme settings.
- logo.svg: The standard logo on a page in your site’s header area. You can include a standard logo with your theme or submit one using the Appearance ➤ Settings page.
- .css: The CSS directory may contain one or more CSS files.
- .js: The JS directory may contain one or more JS files.
Twig Syntax is classified into three broad types.
- It “says something”
- It “does something”
- Or it’s a comment.
Each of these objects has its syntax. The “say something” syntax is represented by {{ … }}, where the Twig parser recognizes the opening and closing braces as something Twig must do and the… represents a variable that will be printed to the page being rendered. For instance, the name would print the value associated with the variable name. The “do something” syntax is connected with if and for statements, variable settings, filters, and other less common functions. “Do something” is written as {% … %}. As an example,
{% filter upper %}
{{ name }}
{% endfilter %}
This prints the name’s value in uppercase. Twig template comments are formatted as {#… #}. Combining “say something” and “do something” offers all the capabilities to connect Drupal content to the produced page.
Twig’s principal job is to print the content of a variable on a page. If you have a variable called first_name, you can print the value of that variable to the page using {{first_name}}. What is the origin of first_name? A module most likely generated a value and assigned it to a themable variable called first_name.
The variable first_name is an easy example, but variables generated by Drupal modules are frequently more sophisticated, such as an array, an object, or a function. Twig solves this by automatically looking for potential sources of that variable. Using an object named customer as an example, with its properties being name, address, city, state, postal_code, email, and phone, we may print the value of the customer’s name using {{customer.name}}. Twig looks for the following while evaluating customer.name:
- $customer[‘name’]
- $customer->name
- $customer->__isset(‘name’) && $customer->__get(‘name’)
- $customer->name()
- $customer->getName()
- $customer->isName()
- $customer->__call(‘name’)
Almost always, one of the referrals will return the customer’s name.
Summing it up!
This blog covered a lot of ground, beginning with the fundamentals of Drupal 9 theming and progressing through increasing the Drupal 9 theme’s capabilities. You may find more features and functionalities in Drupal 9 theming in the drupal.org theme section.
We have expert developers who understand your requirements and effortlessly deliver an ideal solution. Connect with us to explore the best tools and technologies for your business.
