Drupal 8 Theme Development – Final Part

In the previous installment of my Drupal 8 theme development tutorial, I showed you how to add regions in your theme as well as CSS and JS files. In this tutorial, I will show you how to add libraries such as Bootstrap to your theme and add content to the theme as well. I will also dive a little deeper into the details of the twig file.

Add Library (Bootstrap)

Bootstrap is one of the most popular, perhaps the easiest framework for developing a website that looks good on screens of all sizes. The good news is that Drupal 8 supports Bootstrap right out of the box. As with most elements, when developing a theme for Drupal 8, I will need to define the Bootstrap so that it could be used in the projects. Fortunately, this is very easy, especially if you have been keeping up with the previous parts of this series.

The bootstrap.css file is located in the includes/bootstrap/css directory in the theme’s root folder.

In Drupal 8, all libraries are now defined in the theme_name.libraries.yml file where theme_name is the name of your theme. The lines for adding the Bootstrap library will look like this

global-styling:

version: Version

css:

 theme:

   includes/bootstrap/css/bootstrap.css: {}

Twig Templating Syntax Overview

Before moving on, let’s take a look at Twig templating once again. Understanding the syntax for twig files is very important here because the theme development process in Drupal 8 has been completely moved to Twig templating. This move has the added benefit of a shallower learning curve for theme development because fluency in PHP is not a requirement.

There are three main syntaxes that you need to be aware of when using twig templating engine for theme development in Drupal 8.

{{something}} – This is used to ‘print’ or display something on the screen.

{%something%} – This is used for executing statements

{#something#} – This is used for comments

Twig also has support for various filters, a list of which can be found here.

Let’s take a look at an example of how to use twig commands.

{% if page.sidebar %}

{{ page.sidebar }}

{% endif %}

This code will check if the header region has anything in it. If it has, it will ‘print’ or display the contents.

The complete code for the regions I added in the previous part(s) of this series will look something like this in the page.html.twig file:

<div class="page">
{% if page.header %}
<header>
{{ page.header}}
</header>
{% endif %}
<main>
{{ page.content }}
</main>
{% if page.sidebar %}
<div id="sidebar">
{{ page.sidebar }}
</div>
{% endif %}
{% if page.header %}
<footer>
{{ page.header}}
</footer>
{% endif %}
</div>

The above example shows the code without Bootstrap. When I add Bootstrap into the mix, I can make use of its classes. This is what the above code will look like when the Bootstrap classes are added:

<div id="page">
{% if page.headline %}
<section id="headline">
<div class= "container">
{{ page.headline }}
</div>
</section>
{% endif %}
<header id="header">
<div class="container">
{{ page.header }}
</div>
</header>
<section id="main">
<div class="container">
<div class="row">
<div id="content" class="col-md-9 col-sm-9 col-xs-12">
{{ page.content }}
</div>
{% if page.sidebar %}
<aside id="sidebar" class="sidebar col-md-3 col-sm-3 col-xs-12">
{{ page.sidebar}}
</aside>
{% endif %}
</div>
</div>
</section>
{% if page.footer %}
<footer id="footer">
<div class="container">
{{ page.footer }}
</div>
</footer>
{% endif %}
</div>

Add Content in Regions

Now that I have defined the regions, a very basic theme is ready.

The next step is to add content to this theme. Drupal uses blocks to divide a web page into regions. This makes it convenient to place appropriate content in the correct place on the page. To check out the regions created in your theme, access your Drupal website’s admin panel and navigate to structure/block. Here you will see all the regions you defined.

Next, simply place the content you want in the region of your choice. Here is an example of content relevant to each block:

Header
Main navigation (your menu)
Site Branding (Your logo, and slogan)

Content (your front-page display)

Sidebar
Search Form

Footer
Powered by Drupal

Below is a sample structure of the theme’s basic layout

Conclusion

That’s it, You now have the basic knowledge required for setting up a Drupal theme. Throughout this tutorial, I discussed how to:

• Define a Drupal 8 Theme
• Make Drupal recognize the theme
• Add CSS and JavaScript references
• Add CSS and JavaScript files to the theme
• Add libraries such as Bootstrap
• Use Twig templating engine
• Enable Twig templating engine
• Define regions in the theme
• Add content to the theme

Keep in mind that this tutorial focuses on the fundamentals of Drupal 8 theme development. After this, you are free to style your theme however you see fit by making use of CSS, JavaScript, and Bootstrap.

I hope that you have found this series useful. Now go and conquer the vast Drupal 8 theming landscape and unleash your inner artist! Until next time, ciao!

Hamza Zia

Hamza is a Drupal Community Manager at Cloudways - A Managed Drupal Hosting Platform. He loves to write about Drupal and related topics. During his free time, he can be seen obsessing over Football, Cars, Android and Gaming.

Get Connected on: Twitter Community Forum