Output Themeable Content in Drupal

Strings of simple HTML and plain text can be defined in a render array using the #markup and #plain_text element types. In this tutorial we'll look at:

• Adding simple strings to a render array so they appear as HTML on the page
• When to use #markup and #plain_text in your code

By the end of this tutorial, you should be able to add simple strings of HTML and plain text to a render array.

#prefix and #suffix are two commonly used examples of standard properties. That is, they are available for use on any element in a render array regardless of the element #type or #theme property's value. They are a great way to add additional layout markup to an element in a theme-agnostic way.

In this tutorial we'll:

• Use the #prefix and #suffix Render API properties to wrap an element
• Look at some possible use cases for using #prefix and #suffix in your own code

By the end of this tutorial you should know how, and when, to use the #prefix and #suffix properties in a render array.

There are a bunch of existing render elements, most commonly Form API elements. You need to know how to discover and make use of existing elements. In this tutorial, we'll learn how to:

• Locate a list of elements provided by Drupal core
• Figure out what properties apply to each element
• Use any render element type when defining content or forms in our code

By the end of this tutorial you should know what render element types are available for you to use, and how to find the details you'll need in order to implement them in your own render arrays.

Drupal makes it easy to convert an array of strings to an ordered or unordered HTML list using '#theme' => 'item_list' elements in a render array. This is commonly done by module developers to display a list such as links to content, the values of settings in a module, or the names of everyone who has viewed a page. Displaying lists is a super common task for a content management system.

In this tutorial we'll look at:

• Outputting an array of items as an unordered <ul> list
• Properties specific to '#theme' => 'item_list' in a render array

By the end of this tutorial you should be able to output unordered lists.

The #table render element type is a powerful way to output an array of rows and columns as an HTML table. It supports all the features of a standard HTML <table> element like headers, captions, and column groups. Data to be displayed in the table can be an array of simple string values, or an array of render arrays where each sub element is a row with columns as child elements. In addition, when used in the context of a form, tables can be made into a multiple select widget, or have drag-and-drop reordering of rows enabled. Whether you just want to display a set of tabular data, or you provide your users with a complex form element for reordering and nesting items inside a menu tree, it can all be done with the #table element.

In this tutorial we'll:

• Look at outputting simple strings as a table
• Provide definitions for all the various properties that can be used to define a table element
• Demonstrate how to use the #tableselect and #tabledrag options to create complex form widgets

By the end of this tutorial you should be able to create HTML tables in all their various permutations as part of a render array.

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.

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.

Linking to things is probably one of the first things you learned how to do as a web developer. Anchor tags are the framework of how the world wide web works. So it's important to know how to create them in Drupal. Chances are you'll be doing a lot of it.

Creating links to things in Drupal, however, is a bit more complicated than just typing out an HTML anchor tag. It requires understanding how URLs are generated from routes, and how to define links as renderable arrays. It can also be tricky because of the multitude of deprecated, but still functioning, ways of creating links.

In this tutorial we'll:

• Use the \Drupal\Core\Url class to generate URL objects from routes and external URIs.
• Use the \Drupal\Core\Link class to create HTML links within a Drupal module.
• Examine best practices for working with URLs and links in a Drupal module in order to ensure that your code continues to work into the future.

By the end of this tutorial you should be able to link to anything, either internal to your application or external, using Drupal best practices.

Want to know if the person that's viewing your custom block is authenticated? Need to change the elements visible on the page based on a user's permissions or roles? Want to display a welcome message for users returning to your site?

All of these things require knowing who the user is that's currently accessing a page. This can be accomplished by using the current_user service to load an object that contains information about the current user as well as methods for checking permissions, and retrieving additional information.

In this tutorial we'll:

• Define what "current user" means
• Use the current_user service to retrieve an implementation of \Drupal\Core\Session\AccountInterface
• Retrieve information about, and check the permissions of, the current user

By the end of this tutorial you should be able to retrieve and make use of information about the applications current user in order to perform logic in your code that customizes the response for different users.

The #access property can be used with any element in a render array, including form elements, to control the visibility of that element and its children. This is an effective way to limit access to specific parts of a page's content to only those users with the required permissions, and to show or hide material based on other conditional logic.

In this tutorial we'll:

• Review the #access Render API property
• Demonstrate using the #access property to show/hide a field on a node depending on the current user's permissions

By the end of this tutorial you should be able to limit access to any element on the page via logic that returns a Boolean value.