Now that we have reviewed the basics of how a theme is constructed, there is no better time than the present to create our first basic theme. We will begin by creating a theme named twig that we will use to work with exploring how Twig and the Theme system works in Drupal 8.
In order to make sure that we all are working from the same baseline, let's open up the Chapter03/start folder located in the exercise files and select the drupal8.sql database file. We will use this database snapshot to restore our current database instance. Refer to Chapter 1, Setting Up Our Development Environment for instructions on how to perform a database restore.
Now that we all have the same baseline Drupal instance, we can navigate to our Drupal 8 folder using MAC Finder or Windows Explorer and follow these next six steps to create a theme.
Create a new *.info.yml file named twig.info.yml and add the following configuration information to the file:
name: Twig type: theme description: 'A Twig theme for demonstrating TWIG syntax' core: 8.x base theme: false
Copy the html.html.twig and page.html.twig templates from the core/modules/system/templates folder and paste it into our themes/twig folder. Open up page.html.twig in our editor and replace the HTML structure below the comments with the following code:
<h1>Welcome to Twig</h1>
{{ page.content }}Not always a required step but one that will definitely help is including a screenshot that displays or represents our theme within the Appearance admin. In general, we would generate a screenshot based on the finished theme, but because we are just starting out, we can copy an existing one from our exercise files.
Begin by navigating to the Chapter03/end folder and copy the screenshot.png file to our newly created themes/twig folder.
Next, we will need to install our new theme by navigating to /admin/appearance and locating our new theme named Twig under the Uninstalled themes section. Click on the Install and set as default link to install our new theme, as shown in the following image:
We have successfully created our first theme. Although there is not much to it, we can preview what our website looks like by browsing back to the home page of our Drupal instance. We should see our new theme displaying a message of Welcome to Twig, as shown in the following image:
With our new theme in place, we can begin taking a deeper look into Twig and all of the great features that Drupal 8 introduces to us with this new templating engine.