Last updated November 7, 2018

In this tutorial we'll look at how you can use the #theme property of a render array to define custom HTML. With this information, module developers can use render arrays to define content, and theme developers can understand how elements in a render array are converted to HTML and which templates they can override to change the output for a specific element.

Learn how to:

  • Use hook_theme() to define a new theme hook and define default values for variables
  • Create a corresponding Twig template file that outputs the variables and any custom HTML markup
  • Use a preprocess function to add additional variables for the Twig template file you created
  • Use the new theme hook in conjunction with a #theme property in a render array to link your Twig template file to actual content

By the end of this tutorial you should know how to define new templates to output content as HTML. You should also have a better understanding of how Twig template files are linked to elements in a render array.