Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
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

eBook
$9.99 $39.99
Paperback
$48.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
Table of content icon View table of contents Preview book icon Preview Book

Drupal 8 Theming with Twig

Chapter 1. Setting Up Our Development Environment

Regardless of you being a seasoned web developer or someone who is just about to start learning Drupal, there are few things that everybody needs to have in place before we can get started:

  • First, is to make sure that we have an Application stack that will meet Drupal 8's system requirements. MAMP provides us with a standalone web server that is generally referred to as an AMP (Apache, MySQL, PHP) stack and is available for both OS X and Windows. We will look at installing and configuring this local web server in preparation to install Drupal 8.
  • Second, is to set up a Drupal 8 instance and learn the process of installing Drupal instances into our AMP stack. There are a few changes on how the configuration and installation processes work in Drupal 8, so we will take a closer look to ensure that we all begin development from the same starting point.
  • Third, we will be reviewing the Admin interface, including the new responsive Admin menu and any configuration changes that have been made as we navigate to familiar sections of our site. We will also look at how to extend our website using contributed modules, review changes to the files and folder structure that make up Drupal 8, and discuss best practices to manage your files.
  • Finally, we will review the exercise files that we will be using throughout the series, including how to download and extract files, how to use phpMyAdmin—a database administration tool to back up and restore database snapshots—and how to inspect elements within our HTML structure using Google Chrome.

Let's get started by installing our web environment that we will be using as we take an exciting look at Drupal 8 theming with Twig.

Installing an AMP (Apache, MySQL, PHP) stack

To install and run Drupal 8, our server environment must meet and pass certain requirements. These requirements include a web server (Apache, NGINX, or Microsoft IIS) that can process server-side languages such as PHP, which Drupal 8 is built on.

Our server should also contain a database that can manage the data and content that Drupal 8's content management system will store and process. The preferred database is MySQL. However, Drupal 8 can also support PostgreSQL along with Microsoft SQL Server and Oracle with an additional module support.

Finally, Drupal 8 requires PHP 5.5.9 or later, with the CURL extension.

However, because this book is not meant to be a "How-to" on installing and configuring Apache, MySQL, or PHP, we will take all the guesswork and trial by fire out of the equation and instead turn to MAMP.

Introducing MAMP

MAMP can be found at https://www.mamp.info/en and is a tool that allows us to create Drupal sites locally without the need or knowledge of installing and configuring Apache, MySQL, or PHP on a specific platform.

The application stack will consist of the following:

  • Apache: The world's most popular web server
  • MySQL: The world's most popular database server
  • PHP: Various versions of PHP
  • phpMyAdmin: A tool to manage MySQL databases via your browser

Downloading MAMP

Let's begin with the steps involved in quickly downloading, installing, and configuring our very own AMP stack along with an initial instance of Drupal that we will be using throughout the rest of this book. Begin by opening up our web browser and navigating to https://www.mamp.info/en/downloads and selecting either Mac OS X or Windows and then clicking on the Download button, as shown in the following image:

Downloading MAMP

MAMP will allow us to install a local web server on either Mac or Windows and provides us with all the tools we will need to develop most open source websites and applications including Drupal 8.

Installing MAMP

Once the download has completed, we will need to locate the .dmg (Mac users) or .exe (Windows users) installation file and double-click on it to begin the installation process. Once the executable is opened, we will be presented with a splash screen that will guide us through the process of installing and configuring MAMP.

Clicking on the Continue button located on the Introduction pane, will take us to the Read Me information. MAMP will notify us that two folders will be created: one for MAMP and the other for MAMP PRO. It is important to not move or rename these two folders.

Click on the Continue button, which will take us to the license information. Simply accept the terms of the license agreement by clicking on Continue and then on Agree when prompted.

We can finally click on the Install button to complete the installation process. Depending on the operating system, we may need to enter our credentials for MAMP to be able to continue and configure our local web server. Once the install has completed, we can click on the Close button.

A quick tour of MAMP PRO

Let's begin by opening up MAMP and taking a quick tour of the various settings and how we can go about using our local web server to install and configure a new Drupal 8 instance.

When we first open up MAMP, we will be prompted to launch either MAMP or MAMP PRO, as shown in the following image:

A quick tour of MAMP PRO

While MAMP is the free version of the local web server, it is strongly recommended that we use MAMP PRO for configuration and easy setup of a website. We can continue by clicking on Launch MAMP PRO, which will prompt us one more time to accept the Initialization of the remaining components that MAMP PRO needs before we can begin using it. Now, click on OK to continue.

We can use MAMP PRO free for 14 days and at the end of that period, we can decide whether to purchase a license or continue using the free version. Click on OK to continue.

General settings for MAMP PRO

If this is the first time you're using MAMP PRO, then there is some quick housekeeping we will want to take care of, beginning with the general settings. MAMP PRO tries to make sure that it does not interfere with any other possible web servers we may be running by setting the default ports of Apache to 8888 and MySQL to 8889. Although this is nice, the recommendation is to click on the Set ports to 80, 443 & 3306 button that will make sure that MAMP PRO is running on more standardized ports for web development.

If we want to make sure that Apache or MySQL are active at all time, we will also check Start Apache and MySQL on system startup and uncheck Stop Apache and MySQL when quitting MAMP PRO. Once we have made these changes, we can click on the Save button. Our changes should now be applied as shown in the following image and MAMP PRO will now prompt us to Start servers now.

General settings for MAMP PRO

Host settings

The next tab we will look at is the Hosts tab, which is where we will create and configure basic websites. By default, MAMP PRO creates a localhost entry for us, which is common when developing a web application.

We will be using the Hosts tab to create an additional website when we install Drupal 8, so let's take a moment to locate some of the common settings we will need to know. Take a look at the following image; we can see that localhost is the Server name of our default website, uses the default PHP version of 5.6.10, and has a Document root pointing to the htdocs folder of our MAMP installation.

Host settings

Another nice ability of MAMP PRO is to be able to click on the arrow icon located to the right of the Server name and have our default web browser open up to the localhost page, as shown in the following image:

Host settings

It is important to point out that the Server name always equates to the name of the URL in our browser that displays our website.

MAMP PRO is quite a robust and powerful local web server and while there are many more configuration options and settings that we could spend time looking through, most of our time will be spent on working from the Hosts tab creating new websites or configure existing sites.

So far, MAMP PRO has configured everything for us, but how to create a new website and, in more general, install a Drupal 8 instance? Let's look at it in the following section.

Installing Drupal 8

In order to install Drupal 8 within our local MAMP PRO server, we will need to perform a series of steps:

  1. We will need to grab a copy of the latest Drupal 8 release and extract the files to a location on our computer that will be the document root of our website.
  2. We will have to create a new host entry with the server name that we will want to use for our URL and point our host entry to the proper document root containing our Drupal 8 instance.
  3. We will have to create a MySQL database that we can point Drupal to during the installation process.

We will walk through each of these steps in detail to ensure that we all have a copy of Drupal 8 installed properly that we will build upon as we work through each lesson.

Downloading Drupal 8

Drupal.org is the authority on everything about Drupal. We will often find ourselves navigating to Drupal.org to learn more about the community, look for documentation, post questions within the support forum, or review contributed modules or themes that can help us extend Drupal's functionality. Drupal.org is also the place where we can locate and download the latest release of Drupal 8.

We can begin by navigating to https://www.drupal.org/node/2627402 and locate the latest release of Drupal 8. Click on the compressed version of Drupal 8 that we prefer, which will begin downloading the files to our computer. Once we have a copy of Drupal 8 on our computer, we will want to extract the contents to a location where we can easily work with Drupal and its folders and files.

Creating our document root

A document root is the main folder that our host entry will point to. In the case of Drupal, this will be the extracted root folder of Drupal itself. Generally, it is a best practice to maintain some sort of folder structure that is easy to manage and that can contain multiple websites.

For the sake of demonstration, we will create a Sites folder and then copy the compressed Drupal files to our new folder and extract the contents, as shown in the following image:

Creating our document root

Creating our host entry

A host entry represents our website, which, in this case, is our Drupal 8 instance. Hosts always contain a server name that equates to the URL we will use to navigate to Drupal within our browser.

Begin by opening MAMP PRO and clicking on the Hosts tab. To add a new host entry, we can click on the plus icon at the bottom of the Server Name column, as shown in the following image:

Creating our host entry

By default, this will add a new host entry that will require us to configure with three very important pieces of information:

  • We will have to change the Server name from the default to drupal8.
  • Then, we will want to verify that the required version of PHP is being used; in our case, the default of 5.6.10 will work just fine.
  • Finally, we will need to click on the folder icon within the Document root section and choose our Drupal 8 folder that we placed within our sites folder earlier from the Please select a Document Root folder dialog.

The General settings for our new host entry should look as shown in the following image:

Creating our host entry

We can now apply our changes by clicking on the Save button and then clicking on the Yes button when prompted to have MAMP PRO restart the servers.

Creating a new database for Drupal

Drupal 8 requires a database available to install any tables that make up the content management system. These tables will hold configuration data, users and permissions, content, and any extendable functionality that makes Drupal 8 so powerful.

Lucky for us, MAMP PRO installs a MySQL database server that we can take advantage of to create a new database that Drupal 8 can point to. This same database server we will also be working with to back up and restore our database content as we progress through each lesson.

Using phpMyAdmin

MAMP PRO also installs a free software tool written in PHP for the sole purpose of managing MySQL databases. phpMyAdmin allows us to perform a multitude of tasks from browsing tables, views, fields, and indexes to exporting and importing database backups and much more.

If we switch back over to MAMP PRO, we can locate the MySQL tab and click on the phpMyAdmin link located in the Administer MySQL with region, as shown in the following image:

Using phpMyAdmin

We should now be presented with phpMyAdmin within our browser. Currently, we are interested in creating a new database. We will revisit phpMyAdmin a little later to learn how to back up and restore our database. The following are the steps to create a database:

  1. Begin by clicking on the New link in the left sidebar, as shown in the following image:
    Using phpMyAdmin
  2. Next, we will want to enter a name of drupal8 within the Create database field, as shown in the following image, and then click on the Create button.
    Using phpMyAdmin

We have now created our first MySQL database, which we will use when configuring Drupal 8 in the next step.

Completing Drupal 8 installation

Now that we have all of our basic requirements completed, we can open up our favorite web browser and navigate to http://drupal8/core/install.php to begin the installation process.

Since this may be the first time installing Drupal 8, one thing we will notice is that the install screen looks a little different. The install screen has been given a makeover, but the steps are similar to that of Drupal 7, starting with choosing a language.

Choosing a language

The installation process will prompt us to choose a language that we want Drupal 8 to be installed in. This language will control how the Admin area appears, and in many cases, the default of English is acceptable. We will need to click on the Save and continue button to proceed to the next step, as shown in the following image:

Choosing a language

Choosing a profile

Our next step is to choose an installation profile. We can think of this as Drupal's way of preconfiguring items for us that will make our job easier when developing. By default, we can leave the Standard profile selected, but if we choose to configure Drupal ourselves, we can always choose Minimal. Click on the Save and continue button to proceed to the next step, as shown in the following image:

Choosing a profile

Verifying requirements

The next screen allows us to review any requirements that Drupal needs or recommends for optimal performance. From here, we can see web server information, PHP version, memory limits, and more:

Verifying requirements

The requirements review can also alert us to any configuration settings that will allow Drupal to perform better. In our example, we forgot to enable OPcode caching, which allows PHP to compile down to bytecode. Without going into the details of caching, we can easily enable this feature in MAMP PRO.

Begin by opening up the MAMP PRO console and clicking on the PHP tab. Next, we will want to select OPcache from the Cache module to speed up PHP execution dropdown, as shown in the following image:

Verifying requirements

Click on the Save button and then allow MAMP PRO to restart servers if prompted. Now, we can refresh our Drupal install in the browser, and we will be taken to the next step in the installation process.

Database configuration

Database configuration can sometimes be a tricky part of installing Drupal for the first time. This is generally due to selecting the incorrect database type, wrong database name, or password, or by not specifying the correct host or port number.

Database configuration

The settings we will want to use are as follows:

  • Database type: Leave the default of MySQL selected.
  • Database name: This is the name of the database that was created upon import. In our case, it should be drupal8.
  • Database username: root.
  • Database password: root.

With these settings, we can click on the Save and continue button to proceed.

If this is successful, we can see the Installing Drupal screen and watch as Drupal installs the various modules and configurations. This process may take a few minutes. If this process fails in any way, please go back and review the previous steps to make sure that they match what we have used.

Configuring the site

Before we can wrap up our Drupal 8 installation, we need to configure our site by inputting various settings for site information, site maintenance account, regional settings, and update notifications. Let's proceed now by entering our Site Information.

Configuring the site

The site information consists of the following:

  • Site name: To be consistent, let's call our site drupal8. We may give our new site any name that we like. As usual, we can change the site name later from the Drupal admin.
  • Site e-mail address: Enter an e-mail address that we will want to use for automated e-mails such as registration information. It is the best practice to use an e-mail that ends in our site's domain to prevent e-mails from being flagged as spam.

Next, we will want to set up the site maintenance account. This is the primary account used to manage Drupal to perform such tasks as updating the core instance, module updates, and any development that needs user 1 permissions.

Site maintenance account

The site maintenance account information consists of the following:

  • Username: Because we are developing a demo site, it makes sense to generally use admin for the username. Feel free to choose whatever is easy to remember, but don't forget it.
  • Password: Security sticklers will ask to create something strong and unique, and Drupal displays a visual interface to let us know how strong our password is. For the sake of demonstration, we will use admin as our password so that your username and password match and are easy to remember.
  • E-mail address: Generally, using the same e-mail that is used for the site e-mail address makes for consistency but is not required as we can choose any e-mail that we don't mind receiving security and module update notices.

Regional settings

Regional settings consist of default country and default time zone. These are often neglected and left with their defaults. The defaults are not recommended, as they are important in the development and design of Drupal 8 websites, specifically, when it comes to dates and how they are used to capture data and display dates back to the end user.

For our specific installation, choose the country and time zone for our region.

Update notifications

At last, we have come to our final set of configurations. Update notifications should always be left-checked unless we have no reason to receive security updates to Drupal core or module updates. By default, they should be checked. Click on Save and continue to finalize the configuration and installation of Drupal 8.

Drupal installation is now complete, and we should see the home page of our new website. Say "hello" to Drupal 8.

Reviewing the new admin interface

Our local instance of Drupal 8 is similar to Drupal 7 when first viewing the site. You will note the default Bartik theme with the friendly Drupal drop logo and a tabbed main menu. It is here though where the similarities stop. Drupal 8 has been reworked from the ground up, including a brand new responsive layout and admin menu.

Exploring the admin menu

One of the nice new features of Drupal 8 is the rebuilt admin menu. Everything has been moved under the Manage menu item. The admin menu itself is responsive and will change from text and icon to icon only, as soon as the browser is resized to tablet screen size.

Exploring the admin menu

The admin menu can also be pinned to the left side of the window by clicking on the arrow icon to the right of the Help menu item.

Exploring the admin menu

The flexibility of the new admin menu enables the admin user to manage Drupal 8 websites from the browser or a tablet or a smartphone very easily.

Previewing the interface

Taking a closer look at the menu items contained in our admin menu, we begin to see some differences in how things are named and may wonder where to find once familiar settings and configurations. Let's quickly walk through these menu items now so that it is easier to find things as we progress later on in future chapters:

  • Content: This section displays any user-generated content, comments, and files with the ability to filter by Published status, Type, Title, and Language. The display for content is also now a view and can be customized with additional fields and filters as needed.
    Previewing the interface
  • Structure: This section is to manage Block layout, Comment types, Contact forms, Content types, Display modes, Menus, Taxonomy, and Views. We will explore some of the changes and new functionality contained within this section later on in the book.
    Previewing the interface
  • Appearance: This section is to enable, disable, and configure default themes as well as administrative themes.
    Previewing the interface
  • Extend: Formerly known as Modules, this section is for listing, updating, and uninstalling core, custom, and contributed modules. New is the ability to search for modules using a filter. Various contributed modules have been moved into core, including Views and CKEditor.
    Previewing the interface
  • Configuration: This section is designed to configure both core and contributed modules. Each area is grouped into functional sections and allows us to manage site information to file system to performance tuning.
    Previewing the interface
  • People: This section allows us to manage users, permissions, and roles. The display for users is now a View as well and can be customized to add additional fields and filters as needed.
    Previewing the interface
  • Reports: This section is designed to view available updates, recent log messages, field lists, status reports, top "access denied" errors, top "page not found" errors, top search phrases, and View plugins.
    Previewing the interface
  • Help: This section is designed to obtain helpful information on functionality necessary to know in administering a Drupal 8 website. This includes a Getting Started section and help topics on items, such as Block, Views, User, and more.
    Previewing the interface

Exploring Drupal 8 folder structure

There are several changes to Drupal 8 with regard to how files and folders are structured. Let's walk through the core, modules, sites, and themes folders and discuss some best practices for how each of these folders should be managed when creating a Drupal 8 website.

The core folder

One of the first things to point out is that the files and folder structure of Drupal 8 have changed from its predecessor Drupal 7. The first change is that everything that Drupal 8 needs to run is contained within the new core folder. No longer is there any confusion of having the modules and themes folders contained within a sites folder and having to ask "did I place my files in the correct location?".

The core folder

The core folder consists of miscellaneous files needed by Drupal to bootstrap the content management system as well as the following folders:

  • assets: Various external libraries used by core (jquery, modernizr, backbone, and others)
  • config: It contains misc configuration for installation and database schema
  • includes: It contains files and folders related to the functionality of Drupal
  • lib: Drupal core classes
  • misc: Various JavaScript files and images used by core
  • modules: Drupal core modules and Twig templates
  • profiles: Installation profiles
  • scripts: Various CLI scripts
  • tests: Drupal core tests
  • themes: Drupal core themes

The modules folder

While a lot of functionality, which was generally contained in a contributed module, has been moved into the core instance of Drupal 8, you will still find yourself needing to extend Drupal. Previously, you would locate a contributed module, download it, and then extract its contents into your sites/all/modules folder so that Drupal could then use it.

Contributed and custom modules are now placed into the modules folder, which is no longer contained inside your sites folder.

The modules folder

Best practices are to create a few subdirectories inside the modules folder for contributed modules—the modules built by third parties that we will use to extend your project, such as contrib, and custom, for the modules that we create on a per project basis. We will also occasionally find ourselves with a features folder if we plan to use the Features module to break out functionality that needs to be managed in code for purposes of migrating it easily to development, staging, and production instances of our website.

The sites folder

We are all familiar with the sites folder in Drupal 7. However, in Drupal 8, the sites folder only contains our Drupal instance configuration and files.

The sites folder

The themes folder

Finally, we have the themes folder. So, why don't we see the default themes that Drupal generally ships with inside this folder? That is because Drupal's default themes now are contained within the core folder. Finally, we will actually use the themes folder to place our custom or contributed themes inside it for use by Drupal.

We will be exploring the themes folder in more detail in later chapters as we begin creating custom themes.

The themes folder

Using the project files

As we work through each chapter of the book, we will be using exercise files that contain examples of how each page will be themed is laid out. This will include database snapshots, HTML, CSS, and images for our Home, About, Portfolio, Blog, and Contact pages. Before we begin using these files, we need to know where to download them from and the best location to extract them to for future use.

Downloading and extracting the exercise files

We can find the exercise files at https://www.packtpub.com/support. Click on the download link and save the compressed file to the desktop. Once the download is finished, we will need to extract the contents. Let's take a quick look at what we have:

  • Several chapter folders containing files that we will use for whatever task we are working on in that chapter
  • A Mockup folder that contains the finished HTML version of our theme
  • A database snapshot contained within various chapter folders that we will use to restore on top of our current Drupal instance to ensure that we always have the same configuration at specific points along the way

Since we will be working with database snapshots at various points, we will want to look at how we can manage these files using the MySQL database tool named phpMyAdmin.

Database backup

It is important to know how to backup our database when working in Drupal 8 as most of our content and configurations are contained within a database. Make sure that phpMyAdmin is open in the browser.

Next, we will want to make sure that any database exports are saved as a file versus just plain SQL script. Because this is a global setting, we will need to make sure that we have not selected any specific database. We can make sure that we are affecting global settings by clicking on the house icon in the left-hand sidebar underneath the phpMyAdmin logo. Next, we can navigate to Settings and then Export, as shown in the following image:

Database backup

Next, click on the Save as file option and the Apply button.

Export settings

One little gotcha when using phpMyAdmin is making sure that when we create our database export, we ensure that the SQL also drops any tables before trying to recreate them when we do the import later.

We can create our database export by following these steps:

  1. Select the drupal8 database from the left sidebar.
  2. Click on the Export tab.
  3. Select Custom - display all possible options as our export method.
  4. Select SQL as our format.
  5. Choose Add DROP TABLE / VIEW / PROCEDURE / FUNCTION / EVENT / TRIGGER statement from Object creation options.
  6. Click on the Go button.

At this point, we have a new file named drupal8.sql, which contains a backup of our database. Next, we will use this file we just created to restore our database.

Database restore

Restoring a database is simpler than backing our database up. Except this time, we will be using an existing database snapshot that either we have taken or that we were provided to overwrite our current database files with. Let's begin by following these steps:

  1. Click on the Import tab.
  2. Click on the Choose File button and locate the drupal8.sql file we created earlier.
  3. Click on the Go button to begin the restoration process.

The process of restoring the file can sometimes take a minute to complete, so please be patient while the file is being restored.

While phpMyAdmin allows us to manage database operations, we can choose to use other database tools or even the command line, which is a lot faster to export and import databases.

Now that we have a good understanding of how to back up and restore our database, it's time to take a quick look at how we will be using Google Chrome to review our HTML and CSS structure within Drupal 8 and our theme Mockup.

Using Google Chrome to inspect elements

While there are many different browsers to view web content on, Google Chrome is definitely a favorite browser when theming in Drupal. It is not only standards compliant ensuring that most HTML and CSS work properly but Chrome also allows us to inspect the HTML and CSS and preview changes "live" within the browser using the Developer Tools option.

Begin by browsing to our local Drupal 8 instance in Google Chrome and then selecting Developer Tools from the View | Developer | Developer Tools menu. The Developer Tools will open up in the bottom of your browser, as shown in the following image:

Using Google Chrome to inspect elements

There are several tools available for our use, but the one we will use the most is inspecting Elements on the page, which allows us to view the HTML structure and any CSS being applied to that element from the Elements and Styles panels. We can navigate through the HTML structure, or if we prefer to isolate an element on the page, we can place our cursor on that element and right-click to open up a context menu where we can select Inspect. Doing so will target that element in the Elements pane for us.

As we dive deeper into theming, we will use this set of tools to help preview changes as well as isolate any issue we may be experiencing as our HTML structure changes based on what Drupal 8 outputs.

Summary

We collected a lot of information to start our series on Drupal 8 themes. Let's review exactly what we covered so far:

  • We successfully configured an AMP (Apache MySQL, PHP) stack by downloading and installing MAMP PRO.
  • We set up our first Drupal 8 instance by downloading the latest version from Drupal.org, importing the Drupal instance into our AMP stack, and completing the Drupal 8 install by choosing our language, profile, database settings, and site information.
  • We also had our first look at Drupal 8 and some of the new responsive functionality that it provides. We familiarized ourselves with the admin menu and the new admin interface, which included the Content, Structure, Appearance, Extend, Configuration, People, Reports, and Help sections. Having a better knowledge of Drupal 8 and its folder structure has given us insight into how to apply best practices to manage our theme and its assets.
  • By using the project files, we learned how to manage database snapshots through importing and exporting SQL files inside phpMyAdmin.
  • Finally, we learned how to use Google Chrome to inspect our HTML and CSS to have a better understanding of our theme and its markup.

In the next chapter, we will take a closer look at "theme administration" and answer the question: what is a theme? We will explore the "appearance interface" and discuss how Drupal's default themes function. Finally, we will follow up with looking closer at how to use prebuilt themes and managing content with blocks and custom block layouts.

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
Estimated delivery fee Deliver to Malaysia

Standard delivery 10 - 13 business days

$8.95

Premium delivery 5 - 8 business days

$45.95
(Includes tracking information)

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 Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
Estimated delivery fee Deliver to Malaysia

Standard delivery 10 - 13 business days

$8.95

Premium delivery 5 - 8 business days

$45.95
(Includes tracking information)

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
Learning Drupal 8
$48.99
Drupal 8 Theming with Twig
$48.99
Mastering Drupal 8 Views
$48.99
Total $ 146.97 Stars icon
Banner background image

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 the delivery time and cost of print book? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela
What is custom duty/charge? Chevron down icon Chevron up icon

Customs duty are charges levied on goods when they cross international borders. It is a tax that is imposed on imported goods. These duties are charged by special authorities and bodies created by local governments and are meant to protect local industries, economies, and businesses.

Do I have to pay customs charges for the print book order? Chevron down icon Chevron up icon

The orders shipped to the countries that are listed under EU27 will not bear custom charges. They are paid by Packt as part of the order.

List of EU27 countries: www.gov.uk/eu-eea:

A custom duty or localized taxes may be applicable on the shipment and would be charged by the recipient country outside of the EU27 which should be paid by the customer and these duties are not included in the shipping charges been charged on the order.

How do I know my custom duty charges? Chevron down icon Chevron up icon

The amount of duty payable varies greatly depending on the imported goods, the country of origin and several other factors like the total invoice amount or dimensions like weight, and other such criteria applicable in your country.

For example:

  • If you live in Mexico, and the declared value of your ordered items is over $ 50, for you to receive a package, you will have to pay additional import tax of 19% which will be $ 9.50 to the courier service.
  • Whereas if you live in Turkey, and the declared value of your ordered items is over € 22, for you to receive a package, you will have to pay additional import tax of 18% which will be € 3.96 to the courier service.
How can I cancel my order? Chevron down icon Chevron up icon

Cancellation Policy for Published Printed Books:

You can cancel any order within 1 hour of placing the order. Simply contact customercare@packt.com with your order details or payment transaction id. If your order has already started the shipment process, we will do our best to stop it. However, if it is already on the way to you then when you receive it, you can contact us at customercare@packt.com using the returns and refund process.

Please understand that Packt Publishing cannot provide refunds or cancel any order except for the cases described in our Return Policy (i.e. Packt Publishing agrees to replace your printed book because it arrives damaged or material defect in book), Packt Publishing will not accept returns.

What is your returns and refunds policy? Chevron down icon Chevron up icon

Return Policy:

We want you to be happy with your purchase from Packtpub.com. We will not hassle you with returning print books to us. If the print book you receive from us is incorrect, damaged, doesn't work or is unacceptably late, please contact Customer Relations Team on customercare@packt.com with the order number and issue details as explained below:

  1. If you ordered (eBook, Video or Print Book) incorrectly or accidentally, please contact Customer Relations Team on customercare@packt.com within one hour of placing the order and we will replace/refund you the item cost.
  2. Sadly, if your eBook or Video file is faulty or a fault occurs during the eBook or Video being made available to you, i.e. during download then you should contact Customer Relations Team within 14 days of purchase on customercare@packt.com who will be able to resolve this issue for you.
  3. You will have a choice of replacement or refund of the problem items.(damaged, defective or incorrect)
  4. Once Customer Care Team confirms that you will be refunded, you should receive the refund within 10 to 12 working days.
  5. If you are only requesting a refund of one book from a multiple order, then we will refund you the appropriate single item.
  6. Where the items were shipped under a free shipping offer, there will be no shipping costs to refund.

On the off chance your printed book arrives damaged, with book material defect, contact our Customer Relation Team on customercare@packt.com within 14 days of receipt of the book with appropriate evidence of damage and we will work with you to secure a replacement copy, if necessary. Please note that each printed book you order from us is individually made by Packt's professional book-printing partner which is on a print-on-demand basis.

What tax is charged? Chevron down icon Chevron up icon

Currently, no tax is charged on the purchase of any print book (subject to change based on the laws and regulations). A localized VAT fee is charged only to our European and UK customers on eBooks, Video and subscriptions that they buy. GST is charged to Indian customers for eBooks and video purchases.

What payment methods can I use? Chevron down icon Chevron up icon

You can pay with the following card types:

  1. Visa Debit
  2. Visa Credit
  3. MasterCard
  4. PayPal
What is the delivery time and cost of print books? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela