Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Drupal 8 Theming with Twig
Drupal 8 Theming with Twig

Drupal 8 Theming with Twig: Master Drupal 8's new Twig templating engine to create fun and fast websites with simple steps to help you move from concept to completion

Arrow left icon
Profile Icon Chaz Chumley
Arrow right icon
$19.99 per month
Full star icon Full star icon Full star icon Full star icon Half star icon 4.2 (10 Ratings)
Paperback Mar 2016 376 pages 1st Edition
eBook
$27.98 $39.99
Paperback
$48.99
Subscription
Free Trial
Renews at $19.99p/m
Arrow left icon
Profile Icon Chaz Chumley
Arrow right icon
$19.99 per month
Full star icon Full star icon Full star icon Full star icon Half star icon 4.2 (10 Ratings)
Paperback Mar 2016 376 pages 1st Edition
eBook
$27.98 $39.99
Paperback
$48.99
Subscription
Free Trial
Renews at $19.99p/m
eBook
$27.98 $39.99
Paperback
$48.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing
Table of content icon View table of contents Preview book icon Preview Book

Drupal 8 Theming with Twig

Chapter 2. Theme Administration

Before we can get started with creating or managing themes in Drupal 8, we need to have a better understanding of exactly what a theme is. From there we will have the basis for how we work with themes in Drupal and the various configuration and components that are considered to be part of the theming ecosystem.

Let's get started by exploring what we will be covering along the way:

  • First, we will explore the Appearance interface and the core default themes. We will learn how themes are administered, how to install and uninstall themes, how they are configured, and the different settings a theme can have.
  • Second, we will take a closer look at a prebuilt theme, where to find themes that we can use, and how we can easily install themes using the Drupal 8 admin.
  • Third, we will take a closer look at the themes folder structure and how to manually install a theme in preparation to create a custom theme.
  • Fourth, we will take a look at the new Block layout...

What is a theme?

In simple terms, a theme is the presentational layer to content. Regardless of you working in Drupal or another content management system (CMS) without a theme, all you have is content that looks very similar to a Word document.

A theme generally consists of HTML markup, CSS, JavaScript, and media (images, video, and audio). It is this combination of technologies that allow the graphic designer to build something visually rich that can then be applied on top of the logic a web developer is building in Drupal. Sometimes, a web developer may be the person who implements the theme, but in most cases, you will hear the term themer or interface engineer, which describes the person who actually fills that role.

This book helps you learn that role. So, as long as you have a good knowledge of HTML, CSS, and JavaScript, you are well on your way to filling a much-needed role in the Drupal community.

We will begin by exploring the Appearance interface in Drupal 8.

Exploring the Appearance interface

The Appearance interface in Drupal 8 can be located by clicking on the Manage menu item from the administrative toolbar and then by choosing the Appearance link. We can also directly navigate to the Appearance interface by entering the address of /admin/appearance in our browser.

Exploring the Appearance interface

The Appearance interface allows us to work with themes in Drupal, that is, anything from installing, uninstalling, and configuring the default theme for our website. We will be exploring the various functions within this section starting with taking a look at the default themes that Drupal 8 ships with.

Drupal's core themes

By default, Drupal 8 ships with three themes. As part of the standard installation profile, Drupal will install and configure Bartik, Seven, and Stark themes. Each of these themes serves a specific function in the workflow. Let's look at them in more detail.

Bartik

Bartik is considered the default theme in Drupal and is familiar to most as it has been part of the Drupal ecosystem for quite a while now. We can think of Bartik as the frontend theme or what we see when we first install Drupal. The Bartik theme is what you will visually see when you are not navigating within the Drupal administrative screens.

Seven

Seven is the default admin theme, and it provides a clean separation between the frontend and backend of Drupal. This is great as it will always allow us to navigate through the administrative areas if our default theme generates any errors that may cause a blank white screen while theming.

Stark

Stark is an intentionally plain theme with no styling at all...

Theme states

One of the advantages of Drupal is the ability to have multiple themes available to use at any time, and as we discussed earlier, Drupal provides us with three themes to start with. However, it is important to differentiate between installed, uninstalled, and default. We can consider these as the theme's states.

Installed themes

Installed themes are always located in the Installed themes section of the Appearance admin and are available for Drupal to use for either the frontend or backend of the CMS. However, there can only be one theme set as the default at any given time. We can see a list of installed themes, as shown in the following image:

Installed themes

Uninstalled themes

Uninstalled theme(s) are themes that Drupal is aware of within the core themes folder or the custom themes folder but have not been placed into an installed state. One or multiple themes can be present at any time within the Uninstalled theme section, as shown in the following image:

Uninstalled themes

Default theme

Finally, we will often...

Installing and uninstalling themes

The act of installing or uninstalling a theme is a common practice when administering a Drupal website. Let's try installing Stark and making it our default theme in place of Bartik.

Step one – installing a theme

Currently, the only uninstalled theme is Stark, and we can easily move this into the installed state by following these two steps:

  1. Click on the Install and set as default link.
  2. Scroll back to the top of Appearance admin.
  3. If we now look at the Installed themes section, we should see that we now have three themes installed: Stark, Bartik, and Seven. We can also tell that Stark is now our default theme by looking to the right of the themes name, which will be marked as (default theme) as shown in the following image:
    Step one – installing a theme

We can also see what the Stark theme looks like by clicking on the Back to site link in the Admin menu, which will take us back to the frontend of our website. We are now presented with an unstyled page, which is to help demonstrate...

What is a theme?


In simple terms, a theme is the presentational layer to content. Regardless of you working in Drupal or another content management system (CMS) without a theme, all you have is content that looks very similar to a Word document.

A theme generally consists of HTML markup, CSS, JavaScript, and media (images, video, and audio). It is this combination of technologies that allow the graphic designer to build something visually rich that can then be applied on top of the logic a web developer is building in Drupal. Sometimes, a web developer may be the person who implements the theme, but in most cases, you will hear the term themer or interface engineer, which describes the person who actually fills that role.

This book helps you learn that role. So, as long as you have a good knowledge of HTML, CSS, and JavaScript, you are well on your way to filling a much-needed role in the Drupal community.

We will begin by exploring the Appearance interface in Drupal 8.

Exploring the Appearance interface


The Appearance interface in Drupal 8 can be located by clicking on the Manage menu item from the administrative toolbar and then by choosing the Appearance link. We can also directly navigate to the Appearance interface by entering the address of /admin/appearance in our browser.

The Appearance interface allows us to work with themes in Drupal, that is, anything from installing, uninstalling, and configuring the default theme for our website. We will be exploring the various functions within this section starting with taking a look at the default themes that Drupal 8 ships with.

Drupal's core themes


By default, Drupal 8 ships with three themes. As part of the standard installation profile, Drupal will install and configure Bartik, Seven, and Stark themes. Each of these themes serves a specific function in the workflow. Let's look at them in more detail.

Bartik

Bartik is considered the default theme in Drupal and is familiar to most as it has been part of the Drupal ecosystem for quite a while now. We can think of Bartik as the frontend theme or what we see when we first install Drupal. The Bartik theme is what you will visually see when you are not navigating within the Drupal administrative screens.

Seven

Seven is the default admin theme, and it provides a clean separation between the frontend and backend of Drupal. This is great as it will always allow us to navigate through the administrative areas if our default theme generates any errors that may cause a blank white screen while theming.

Stark

Stark is an intentionally plain theme with no styling at all to help demonstrate...

Theme states


One of the advantages of Drupal is the ability to have multiple themes available to use at any time, and as we discussed earlier, Drupal provides us with three themes to start with. However, it is important to differentiate between installed, uninstalled, and default. We can consider these as the theme's states.

Installed themes

Installed themes are always located in the Installed themes section of the Appearance admin and are available for Drupal to use for either the frontend or backend of the CMS. However, there can only be one theme set as the default at any given time. We can see a list of installed themes, as shown in the following image:

Uninstalled themes

Uninstalled theme(s) are themes that Drupal is aware of within the core themes folder or the custom themes folder but have not been placed into an installed state. One or multiple themes can be present at any time within the Uninstalled theme section, as shown in the following image:

Default theme

Finally, we will often hear...

Installing and uninstalling themes


The act of installing or uninstalling a theme is a common practice when administering a Drupal website. Let's try installing Stark and making it our default theme in place of Bartik.

Step one – installing a theme

Currently, the only uninstalled theme is Stark, and we can easily move this into the installed state by following these two steps:

  1. Click on the Install and set as default link.

  2. Scroll back to the top of Appearance admin.

  3. If we now look at the Installed themes section, we should see that we now have three themes installed: Stark, Bartik, and Seven. We can also tell that Stark is now our default theme by looking to the right of the themes name, which will be marked as (default theme) as shown in the following image:

We can also see what the Stark theme looks like by clicking on the Back to site link in the Admin menu, which will take us back to the frontend of our website. We are now presented with an unstyled page, which is to help demonstrate the clean...

Theme settings


Under the Settings tab of the Appearance admin, the options to control the default display settings for your entire site are located, across all themes or individually. These settings range from toggling the display of certain page elements, updating the default logo supplied by the theme, to providing a shortcut icon or favicon that is displayed in the address bar of most browsers.

Let's explore these in more detail by clicking on the Settings tab and previewing the interface, as shown in the following image:

Toggling the display of page elements

Having control over certain page elements of a theme can come in handy when we want to hide or show specific items. Most of the items listed pertain to user settings, such as user pictures in posts or comments, user verification status in comments, and the Shortcut icon from displaying.

Simply checking or unchecking an item will toggle that item on or off. Also, keep in mind that toggling the Shortcut icon will disable the ability to...

Theme-specific settings


Drupal 8 allows for the configuration of theme-specific settings. These can vary based on the theme and the amount of extensibility that a theme provides. For example, if we click on the Bartik theme, we will notice that it provides us with an ability to change the COLOR SCHEME through a series of presets, as shown in the following image:

Feel free to experiment by selecting various color sets and then previewing what those selections would look like if applied. Outside the core themes shipped with Drupal 8, we can apply prebuilt themes to provide various features.

Using prebuilt themes


Additional themes for Drupal 8 may be limited at first, but we can find prebuilt themes at several places. Some of these themes have to be purchased, whereas others are free to use. We will take a look at Drupal.org to find some prebuilt themes and how to install them using the Drupal admin, how to manually install a theme, and finally how to uninstall a theme once we're done using it.

Begin by opening up a new tab in our browser and navigating to https://drupal.org/project/project_theme.

The Download & Extend section of Drupal.org allows us to filter results based on various options. We can find Drupal 8-specific themes by performing the following steps:

  1. Select 8.x from the Core compatibility dropdown.

  2. Click on the Search button.

  3. With a selection of themes compatible with Drupal 8 to choose from, one result looks promising and that is the Bootstrap 3 theme, as shown in the following image:

Installing a new theme

At this point, we should have two tabs opened in our browser...

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • Create beautiful responsive Drupal 8 websites using Twig
  • Quickly master theme administration, custom block layouts, views, and the Twig template structure
  • A step-by-step guide to the most common approaches in web design

Description

Drupal 8 is an open source content management system and powerful framework that helps deliver great websites to individuals and organizations, including non-profits, commercial, and government around the globe. This new release has been built on top of object-oriented PHP and includes more than a handful of improvements such as a better user experience, cleaner HTML5 markup, a new templating engine called Twig, multilingual capabilities, new configuration management, and effortless content authoring. Drupal 8 will quickly become the new standard for deploying content to both the web and mobile applications. However, with so many new changes, it can quickly become overwhelming knowing where to start and how to quickly. Starting from the bottom up, we will install, set up, and configure Drupal 8. We’ll navigate the Admin interface so you can learn how to work with core themes and create new custom block layouts. Walk through a real-world project to create a Twig theme from concept to completion while adopting best practices to implement CSS frameworks and JavaScript libraries. We will see just how quick and easy it is to create beautiful, responsive Drupal 8 websites while avoiding the common mistakes that many front-end developers make.

Who is this book for?

This book is intended for front-end developers, designers, and anyone who is generally interested in learning all the new features of Drupal 8 theming. Discover what has changed from Drupal 7 to Drupal 8 and immerse yourself in the new Twig PHP templating engine. Familiarity with HTML5, CSS3, JavaScript, and the Drupal Admin interface would be helpful. Prior experience with setting up and configuring a standalone development environment is required as we will be working with PHP and MySQL.

What you will learn

  • Navigate the Drupal 8 Admin interface
  • Build custom block layouts with reusable and fieldable blocks
  • Create subthemes based on the Bartik and Classy base themes
  • Construct a responsive theme with Twitter Bootstrap
  • Work with the new Twig PHP templating engine
  • Configure Drupal for Twig debugging
  • Enable preprocessing of Twig variables
  • Develop a theme from scratch following a step-by-step project outline

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Mar 23, 2016
Length: 376 pages
Edition : 1st
Language : English
ISBN-13 : 9781782168737
Languages :
Concepts :
Tools :

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing

Product Details

Publication date : Mar 23, 2016
Length: 376 pages
Edition : 1st
Language : English
ISBN-13 : 9781782168737
Languages :
Concepts :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total $ 146.97
Mastering Drupal 8 Views
$48.99
Drupal 8 Theming with Twig
$48.99
Learning Drupal 8
$48.99
Total $ 146.97 Stars icon

Table of Contents

13 Chapters
1. Setting Up Our Development Environment Chevron down icon Chevron up icon
2. Theme Administration Chevron down icon Chevron up icon
3. Dissecting a Theme Chevron down icon Chevron up icon
4. Getting Started – Creating Themes Chevron down icon Chevron up icon
5. Prepping Our Project Chevron down icon Chevron up icon
6. Theming Our Homepage Chevron down icon Chevron up icon
7. Theming Our Interior Page Chevron down icon Chevron up icon
8. Theming Our Blog Listing Page Chevron down icon Chevron up icon
9. Theming Our Blog Detail Page Chevron down icon Chevron up icon
10. Theming Our Contact Page Chevron down icon Chevron up icon
11. Theming Our Search Results Chevron down icon Chevron up icon
12. Tips, Tricks, and Where to Go from Here Chevron down icon Chevron up icon
Index Chevron down icon Chevron up icon

Customer reviews

Top Reviews
Rating distribution
Full star icon Full star icon Full star icon Full star icon Half star icon 4.2
(10 Ratings)
5 star 60%
4 star 10%
3 star 20%
2 star 10%
1 star 0%
Filter icon Filter
Top Reviews

Filter reviews by




IT Gal Feb 26, 2021
Full star icon Full star icon Full star icon Full star icon Full star icon 5
When I first started going through the exercises in this book I was just about ready to hurl the book across the room (yes the digital version). But.... I really need to learn this content so I stuck with it. After MANY errors - I realized I need to start with the same version of Drupal the author was using when writing the book and to use my MAMP setup using the same PHP version. Without doing this the Start and End database snapshots may make your site unusable and you won't be able to start or do your lessons. Trust me.... The problem isn't the fault of the author because he used what was currently available when he wrote the book. The problem is that Drupal changes often - even more than often (daily when you include modules, vendors, etc.). My strong recommendation - stick with this book if you want to learn the content. It's the best book out there (even in 2021) on Theming Drupal 8. You'll need to learn Twig if you're using D8. Very well written and sequentially written lessons that really get you using the process and learning it well. I have the digital copy of the book, but will also purchase the hard-copy so I can easily sit with it between doing the lessons in printed form. Highly recommend this book, but be aware you'll need to do as I've suggested above to make it work.
Amazon Verified review Amazon
Terry May 23, 2016
Full star icon Full star icon Full star icon Full star icon Full star icon 5
A very thorough description of theming with twig in Drupal 8.
Amazon Verified review Amazon
Scott Collier Oct 09, 2016
Full star icon Full star icon Full star icon Full star icon Full star icon 5
After going through this book, I feel like I have a solid handle on how theming in Drupal 8 is done and how to do it on my own.
Amazon Verified review Amazon
Amazon Customer Feb 10, 2017
Full star icon Full star icon Full star icon Full star icon Full star icon 5
I nearly gave up in disgust somewhere in chapter 7, but I'm glad I didn't. It seemed to me that everything I tried, failed. Worse, there was no way that I, with my state of knowledge, could work out where the problem lay. But, by using a virtual machine, taking checkpoints every couple of pages, and being VERY CAREFUL, I eventually realised that the problems I'd been experiencing were caused by my fat fingers, and I was able to resolve all of the errors as my experience grew, if necessary looking at the downloaded before and after images of the theme and database that come with each chapter.This book is excellent. After some introductory chapters it talks you through theming a sophisticated, modern, site, from mockup to fully working end result. There's a lot of ground to cover, but it's never rushed; it never assumes you have a certain level of expertise; and you are always guided in detail, with explanations and screenshots.The tiny number of errata at the publisher's site shows how carefully this book has been put together and tested. Mr. Chumley is clearly an expert web developer, and I'm glad I was able to learn so much from him
Amazon Verified review Amazon
spirulez Oct 02, 2016
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Remplis parfaitement son rôle. À noter qu'il faut reconstruire le view de l'exemple final avec la récente mise à jour de Drupal 8.
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is included in a Packt subscription? Chevron down icon Chevron up icon

A subscription provides you with full access to view all Packt and licnesed content online, this includes exclusive access to Early Access titles. Depending on the tier chosen you can also earn credits and discounts to use for owning content

How can I cancel my subscription? Chevron down icon Chevron up icon

To cancel your subscription with us simply go to the account page - found in the top right of the page or at https://subscription.packtpub.com/my-account/subscription - From here you will see the ‘cancel subscription’ button in the grey box with your subscription information in.

What are credits? Chevron down icon Chevron up icon

Credits can be earned from reading 40 section of any title within the payment cycle - a month starting from the day of subscription payment. You also earn a Credit every month if you subscribe to our annual or 18 month plans. Credits can be used to buy books DRM free, the same way that you would pay for a book. Your credits can be found in the subscription homepage - subscription.packtpub.com - clicking on ‘the my’ library dropdown and selecting ‘credits’.

What happens if an Early Access Course is cancelled? Chevron down icon Chevron up icon

Projects are rarely cancelled, but sometimes it's unavoidable. If an Early Access course is cancelled or excessively delayed, you can exchange your purchase for another course. For further details, please contact us here.

Where can I send feedback about an Early Access title? Chevron down icon Chevron up icon

If you have any feedback about the product you're reading, or Early Access in general, then please fill out a contact form here and we'll make sure the feedback gets to the right team. 

Can I download the code files for Early Access titles? Chevron down icon Chevron up icon

We try to ensure that all books in Early Access have code available to use, download, and fork on GitHub. This helps us be more agile in the development of the book, and helps keep the often changing code base of new versions and new technologies as up to date as possible. Unfortunately, however, there will be rare cases when it is not possible for us to have downloadable code samples available until publication.

When we publish the book, the code files will also be available to download from the Packt website.

How accurate is the publication date? Chevron down icon Chevron up icon

The publication date is as accurate as we can be at any point in the project. Unfortunately, delays can happen. Often those delays are out of our control, such as changes to the technology code base or delays in the tech release. We do our best to give you an accurate estimate of the publication date at any given time, and as more chapters are delivered, the more accurate the delivery date will become.

How will I know when new chapters are ready? Chevron down icon Chevron up icon

We'll let you know every time there has been an update to a course that you've bought in Early Access. You'll get an email to let you know there has been a new chapter, or a change to a previous chapter. The new chapters are automatically added to your account, so you can also check back there any time you're ready and download or read them online.

I am a Packt subscriber, do I get Early Access? Chevron down icon Chevron up icon

Yes, all Early Access content is fully available through your subscription. You will need to have a paid for or active trial subscription in order to access all titles.

How is Early Access delivered? Chevron down icon Chevron up icon

Early Access is currently only available as a PDF or through our online reader. As we make changes or add new chapters, the files in your Packt account will be updated so you can download them again or view them online immediately.

How do I buy Early Access content? Chevron down icon Chevron up icon

Early Access is a way of us getting our content to you quicker, but the method of buying the Early Access course is still the same. Just find the course you want to buy, go through the check-out steps, and you’ll get a confirmation email from us with information and a link to the relevant Early Access courses.

What is Early Access? Chevron down icon Chevron up icon

Keeping up to date with the latest technology is difficult; new versions, new frameworks, new techniques. This feature gives you a head-start to our content, as it's being created. With Early Access you'll receive each chapter as it's written, and get regular updates throughout the product's development, as well as the final course as soon as it's ready.We created Early Access as a means of giving you the information you need, as soon as it's available. As we go through the process of developing a course, 99% of it can be ready but we can't publish until that last 1% falls in to place. Early Access helps to unlock the potential of our content early, to help you start your learning when you need it most. You not only get access to every chapter as it's delivered, edited, and updated, but you'll also get the finalized, DRM-free product to download in any format you want when it's published. As a member of Packt, you'll also be eligible for our exclusive offers, including a free course every day, and discounts on new and popular titles.