Preprocess all the things!

Scroll Down

Written by Chris Wright

August 21, 2018

Preprocess all the things!

Have you ever wanted to fine-tune how content is served up to a page in Drupal? Do you need to change what a template receives from the backend but can’t figure out how to make it happen? When you utilize Drupal, there are several ways that you can completely customize how your site looks and operates. Preprocessing is one of them. Here are a few tips to effectively use preprocess functions to tailor your site exactly how you would like.

What Is Preprocessing?

What are preprocess functions and what do they do? Modules in core and in contrib create and serve up data that will be rendered on the page. If you need to change how that content is rendered, what information is served up, or add some custom logic before it hits the page, preprocess functions are what you are looking for.

Setting up your process

The main role of preprocessors is to set up variables to be used in a template. These variables can contain complex renderable arrays or at its’ simplest, boolean values. Most of the logic should be kept in the preprocessors to keep templates markup clean and easy to navigate and work with.

Unless you are a php wizard, debugging is essential for preprocessing elements on your site. First, if you haven’t already, navigate your code to your services.yml file. It should be located in /sites/default/services.yml. Under Twig, change debug: false, to debug:true. This will now show templating suggestions and theme_hooks in comments throughout the html of your site. In Drupal 8, preprocessing is not that different than Drupal 7, although you will be writing your php code in the themename.theme file rather than a template.php file. You should keep most of your code logic inside this file and use the templates for rendering the content as it should be output rather than cluttering up templates with logic that could simply be done in php in your theme.

Examples

Preprocess Functions follow this format: themename_preprocess_HOOK, where the HOOK is the theme_hook of the element you want to preprocess. At their simplest, you can use theme_preprocess_node or page if you want to change how things render. Many times you may want to modify something more specific, like field, exposed filter or a form. In those cases, you can look for the element in your html and with twig debugging enabled, it will actually tell you what theme_hook it is using. You can use the same theme_hook in your preprocess function to modify that element. For instance, if you wanted to modify radio buttons from an exposed filter in a view using the Better Exposed Filters module, you would find the theme_hook is bef_radios, so your preprocess function would then be themename_preprocess_bef_radios(&$variables).

Preprocess functions give you practically every option to customize your site and how it looks. These are just some ways how to use them and what they can do. If they look overwhelming, don’t worry; preprocess functions are easy to become familiar with and use on your site.

Want more information? Check out my presentation below! If you have questions, you can contact me via Twitter: [@redbrickone] (https://twitter.com/redbrickone).

[Presentation] (https://youtu.be/7g9HDYmbBkU)

[Slides] (https://docs.google.com/presentation/d/1gUYFLDsl4IzFV3hRgqJ-3AcI_h5MolvITOdKlvWApGY/edit#slide=id.p)