By default, individual forms in Drupal are not output using Twig template files. It's possible to associate a form with a Twig template file by creating a new theme hook, and then referencing that theme hook from the $form array that defines the form. Doing so allows theme developers to customize the layout of the elements in the form using HTML and CSS.

This is useful when you want to change the layout of the entire form. For example, putting the elements into 2 columns. If you want to change individual elements in the form, you can often do so by overriding element specific Twig template files.

In this tutorial, we'll:

• Learn how to create a new theme hook that can be used to theme an element in a render array.
• Associate the $form we want to theme with the new theme hook we created.
• Create a Twig template file for the theme hook that will allow us to lay out the form elements using custom HTML.

By the end of this tutorial, you should be able to associate a Twig template file with any form in Drupal, so that you can customize its layout using HTML and CSS.

Template files in Drupal modules provide the default HTML markup for the visual presentation of a module's data. Be aware that themes are likely to override the template with site-specific customizations. This template should contain only minimal markup to ensure functionality, and document the variables fed into the template.

In this tutorial, we'll:

• Explain the role of Twig template files in modules.
• Show how modules declare and use template files.
• Recognize how a render array can specify a template.

By the end of this tutorial, you should be able to articulate how and when a module should define a new template file.

This guide was written, and is maintained, by Drupalize.Me. For more high quality written and video Drupal tutorials created by our team of experts, check out the collection of Drupalize.Me Guides.

Every web framework, including Drupal, has basically the same job: provide a way for developers to map URLs to the code that builds the corresponding pages. Drupal uses Symfony's HTTPKernel component. Kernel events are dispatched to coordinate the following tasks:

• Process the incoming request
• Figure out what to put on the page
• Create a response
• Deliver that response to the user's browser

Knowing a bit more about how Drupal handles the request-to-response workflow will help you better understand how to use routes and controllers to create your own custom pages or deal with authentication, access checking, and error handling in a Drupal module.

In this tutorial we'll:

• Walk through the process that Drupal uses to convert an incoming request into HTML that a browser can read
• See how the Symfony HTTPKernel helps orchestrate this process
• Learn about how the output from a custom controller gets incorporated into the final page

By the end of this tutorial, you should be able to describe the process that Drupal goes through to convert an incoming request for a URL into an HTML response displayed by the browser.

One of the features of any content management system's architecture is the separation of presentation and data. In Drupal, modules are responsible for figuring out what should be on the page, and themes are responsible for the final look and feel of anything shown in the browser. It's vital for a module to return themeable output, so that the active theme can determine how it's presented.

In this tutorial, we'll:

• Define themeable output.
• Show how modules can avoid embedding presentation data in their output.
• Explain why Drupal favors structured arrays over HTML strings for data presentation.

By the end of this tutorial, you will be able to articulate the role modules play in enabling themes to customize a Drupal site's appearance.

Drupal's Render API plays a crucial role in how content is presented on a site. The Render API manages how content is rendered through render arrays and render elements.

In this tutorial, we'll:

• Define render arrays, highlighting properties and elements.
• Explain how render elements are used as shorthand for complex structures.
• Describe the primary types of data we can use in a render array.
• Touch on the role of renderers and special methods for rendering entities.

By the end of this tutorial, you'll better understand how Drupal constructs a page's output through render arrays and streamlines rendering with render elements.