Last updated February 20, 2020

We often need to add code to an alter hook or preprocess function that adds additional HTML attributes to items in a render array. Maybe you're developing a module that adds conditional classes to elements on the page under certain circumstances. Or perhaps your theme needs to add some data attributes to certain links, or form elements, in order to enable some custom JavaScript functionality.

Adding HTML attributes like "class", "id", or "data-*" to render array elements involves:

  • Adding the desired values to the element in a render array as an array of key/value pairs
  • Converting the values in the render array to an Attribute object
  • Outputting the Attribute object inside a template file

In this tutorial, we'll cover all of these steps. By the end of this tutorial, you should be able to add new HTML attributes to elements in a render array and discover which property those values should be added to, depending on the element in question.