Starting from the bottom, Drupal 8 Theming with Twig will walk you through setting up and configuring a new Drupal 8 website. Navigate across the admin interface, learn how to work with core themes, and create new custom block layouts. Take a real-world project and create a Twig theme that adopts best practices to implement CSS frameworks and JavaScript libraries. See just how quick and easy it is to create beautiful and responsive Drupal 8 websites along with avoiding some of the common mistakes many frontend developers run into.
If you consider yourself a frontend developer, you will be right at home. However, since no PHP knowledge will be necessary, anyone who can create HTML websites with basic HTML5 and CSS3 skills will learn how to create a great Drupal 8 theme.
Chapter 1, Setting up Our Development Environment, will begin with walking you through setting up a development workflow. You will learn how to use an AMP (Apache, MySQL, PHP) stack to configure a local web server. We will introduce the process of installing Drupal 8 and walk through the admin interface in preparation for working with the new Twig templating engine.
Chapter 2, Theme Administration, provides a glance at the Appearance page, where you will learn how to install, uninstall, and configure various themes and settings. We will take a look at the new Block layout system as we explore how to add fields to blocks, reuse blocks, and assign chunks of content to various regions. Learn how Drupal 8 has reconfigured files and folders, where themes are now placed, and how to find core themes.
Chapter 3, Dissecting a Theme, begins with discussing the importance of a proper development environment and the steps involved to ensure that you're ready for Drupal 8. This will help you learn the differences and similarities between core and custom themes and how configuration has changed. Break down the metadata that makes up a theme, libraries, and regions. You will learn the role of templates and how the theme layer interacts with the Twig templating engine.
Chapter 4, Getting Started – Creating Themes, starts with creating a starter theme that allows us to work with assets while learning common techniques to integrate various CSS frameworks. You can learn how to rethink layout strategies as we dive into the theme layer and work with Twig. Then, we will wrap up with creating a subtheme that extends the new Classy base theme.
Chapter 5, Prepping Our Project, covers reviewing a real-world project that we will be building and how to break down how design and functionality should come together in Drupal 8. We will create the new theme structure, define metadata, add regions, and implement several CSS and JavaScript libraries.
Chapter 6, Theming Our Homepage, begins with working with the site branding block to add a logo. We will create a basic HTML wrapper and homepage template using Twig as we convert our homepage mockup into a fully functioning Drupal 8 front page. You will learn how to convert static markup into Twig variables as we theme global components, such as the Search block, menus, and custom blocks. Use the new libraries.yml file to work with assets, such as Twitter Bootstrap and Flex Slider and then attach them to specific templates using the new {{ attach_library() }} function.
Chapter 7, Theming Our Interior Page, will show you how to review mockups and identify what regions, blocks, content types, and views will need to be developed to recreate functionality. You will learn how to reuse Drupal 8 regions, work with the new Page title block, and how Twig plays an important part in rewriting Views output.
Chapter 8, Theming Our Blog Listing Page, starts with the best practice approaches to managing content types. From adding new display modes to enabling and formatting fields, learn how to use content display modes with Views to display data in lieu of using fields directly. You can work with Node templates to add CSS classes directly to our markup, work with content variables, and learn how to suppress fields. You will use Twig filters to format dates and manage individual field templates while creating a listing page.
Chapter 9, Theming Our Blog Detail Page, teaches us how to reuse Twig templates and display different content simply by using file name suggestions to target-specific display modes. You will work with the new comment types to add commenting functionality to pages as fields, learn how to alter comment display using field templates to theme comment threads, and add social sharing functionality to pages using custom blocks and JavaScript libraries that we can attach directly to a block.
Chapter 10, Theming Our Contact Page, introduces contact forms in Drupal 8 that we can use to create fieldable forms that users can interact with. You will learn how to integrate Google Maps into custom blocks that take advantage of library assets and vendor JavaScript.
Chapter 11, Theming Our Search Results, covers core search functionality, how to index database content, and work with search results templates. Core search can sometimes be limited, so we will take a more advanced look at the Search API module to create a better search experience. You will learn how to add individual fields to search and use display modes to output content while creating a Search view that allows us to expose filters to the users to find exactly what they are looking for.
Chapter 12, Tips, Tricks, and Where to Go from Here, introduces how to theme common admin sections of Drupal 8. You will learn how to modify the markup for local tasks and status messages. Reuse Twig templates using extends to share layouts while working with pages and blocks. Finally, we will leave you with some great contributed modules to take a look at and introduce you to the Drupal community.
To follow along with this book, you need an installation of Drupal 8, preferably in a local development environment located on a Windows, Mac, or Linux-based computer. Documentation regarding setting up a local development environment can be found at https://www.drupal.org/setting-up-development-environment. Specific system requirements are listed at https://www.drupal.org/requirements. An introduction to MAMP for Windows and Mac is also covered in Chapter 1, Setting Up Our Development Environment.
To follow along with each lesson, you will need a text editor or IDE. To see a list of software to consider when developing in Drupal 8 you can refer to https://www.drupal.org/node/147789.
Drupal 8 Theming with Twig is intended for frontend 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 of setting up and configuring a standalone development environment is required as we will be working with PHP and MySQL.
In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.
Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows "Rename page.html.twig as page--front.html.twig.":
A block of code is set as follows:
name: Tweet type: theme description: 'A Twitter Bootstrap starter theme' core: 8.x base theme: false
New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "Click on the Continue button, which will take us to the license information."
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.
To send us general feedback, simply e-mail <[email protected]>, and mention the book's title in the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase. You can contact the author at http://www.forumone.com/books/drupal-8-theming-with-twig if you are facing a problem with any aspect of this book.
You can download the example code files for this book from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
You can download the code files by following these steps:
Log in or register to our website using your e-mail address and password.
Hover the mouse pointer on the SUPPORT tab at the top.
Click on Code Downloads & Errata.
Enter the name of the book in the Search box.
Select the book for which you're looking to download the code files.
Choose from the drop-down menu where you purchased this book from.
Click on Code Download.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
WinRAR / 7-Zip for Windows
Zipeg / iZip / UnRarX for Mac
7-Zip / PeaZip for Linux
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.
To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.
Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
If you have a problem with any aspect of this book, you can contact us at <[email protected]>, and we will do our best to address the problem.