Customizing the available regions in your theme is one of the first things you'll do when creating your own themes. Doing so gives you complete control over where content is displayed on the page, and the markup involved. Adding regions to a theme is a two-step process that involves editing your theme's THEMENAME.info.yml file and updating your page.html.twig file.

In this tutorial we'll:

• Declare one or more new regions in our themes THEMENAME.info.yml file.
• Output the content of those regions in our theme via the page.html.twig file.

By the end of this tutorial you should be able to add or edit the regions a theme provides. Also, you'll ensure that blocks placed into regions are displayed by outputting the regions in the page template.

Drupal has a few handy settings you can tweak to make developing themes a little more intuitive and a lot more awesome. In this tutorial, we'll practice manually setting up our environment for theme development by:

• Disabling some caches
• Turning off CSS and JS aggregation
• Turning on the Twig debug service

By the end of this tutorial, you'll have practiced setting up your environment for theme development.

Info files, aka THEMENAME.info.yml files, provide Drupal with metadata about your theme, the features it supports, and the regions that it defines. All themes are required to have a THEMENAME.info.yml file, and creating one is generally the first step you'll take when creating a new theme.

In this tutorial we'll:

• Create a new .info.yml file and define a new theme
• Review the required key/value pairs of an .info.yml file
• Enable our new theme in the Drupal UI

By the end of this tutorial you'll be able start a new theme by creating the required *.info.yml file and better understand its contents.

Themes and modules can alter the list of theme hook suggestions in order to add new ones, remove existing ones, or reorder the list. This powerful feature allows for the definition of custom logic in your application that can tell Drupal to use different templates based on your own unique needs. You might for example; use a different page template for authenticated users, or a custom block template for someone's birthday.

In this tutorial we'll cover:

• Adding new theme hook suggestions from a theme using hook_theme_suggestions_HOOK_alter()
• Altering the list of theme hook suggestions
• Removing theme hook suggestions
• Reordering the list of theme hook suggestions

Theme developers often need to add or remove classes and other attributes from an HTML tag. Template files handle this with a special Attributes object that contains the attributes and their values, as well as a handful of powerful methods to help manage these attributes.

In this tutorial we’ll cover:

• Adding/removing classes from elements in a Twig template
• The attributes object
• Examples of common tasks using various helper methods on the attributes object

One important aspect of theme administration is the configuration of global and theme-specific settings. In this tutorial, you will learn where theme settings are configured in Drupal's administrative interface, the difference between global and theme-specific settings, and what each global setting refers to on a base installation of Drupal with a custom theme installed.

Custom themes in Drupal must be configured to inherit settings, templates, and other assets from a parent theme. Which base theme you use is configurable. This allows theme developers to use a different set of markup as the starting point for their theme, organize various theme assets into a more maintainable structure, and more. All of this is made possible because of how Drupal's theme layer uses a chain of inheritance when assembling all the parts of a theme.

Base themes are also a powerful way to encapsulate standards and best practices into a reusable code base. You'll find dozens of contributed base themes on Drupal.org that can serve as a great starting point, especially if you're planning to work with an existing design framework like Bootstrap or Susy Grids. Or if you want to leverage modern JavaScript bundling without setting up Webpack on your own.

In this tutorial we'll:

• Learn what base themes and subthemes are
• Look at a few examples of template inheritance and how that works
• Discuss some use cases for theme inheritance

By the end of this tutorial you'll know how to declare the base theme that your theme builds upon.

Making Drupal fast by default implies having caching layers and CSS and JavaScript aggregation utilities enabled out-of-the-box. As a theme developer this can be annoying, because you must clear these various caches in order to preview any changes. In addition, inspecting variables with debugging tools often produces PHP errors. We'll make some recommendations for PHP settings on your local environment that can prevent these errors from happening so often.

By the end of this tutorial, you should be able to:

• Set up your local Drupal site for theme development
• Prepare your local development environment for working on and debugging themes

In Twig, you can modify variables using functions or filters. Twig has a bunch of built-in functions and filters. Drupal extends Twig to provide a few handy Drupal-specific functions and filters.

In this tutorial, we'll look at:

• What are functions and filters?
• How to use functions and filters in Twig
• Detailed information about the Drupal-specific functions and filters, and their use case

This learning series covered just the tip of the theming iceberg. Hopefully you're now feeling motivated to learn even more about theming. In this lesson we will review some of the other topics you will want to explore next including: advanced theming techniques, using a base theme, such as Omega, layout modules. By the end of this lesson you will by able to identify which videos you should (or could) watch next to learn more about theming Drupal.

In the next few tutorials, we'll pull back the veil of Views theming a bit and introduce some tools to help you wrangle Views' template files. In this tutorial, I'll introduce you to Views Theme Information and how to use this interface to find out which template files are being used to mark up your view.

Additional resources

Views — Drupal.org

Twig is the theme template engine in Drupal as of version 8. Like any code, there are guidelines and standards that dictate both the style and the structure of the code. In this tutorial we will explain how to adhere to the Drupal code standards while implementing Twig templating.

By the end of this tutorial you will be able to adhere to Drupal's coding standards when writing Twig, and know where to find more information about the guidelines when necessary.

In order for our React code to list content from Drupal we'll need to enable the Drupal core JSON:API module, and then use fetch() in our React component to retrieve the desired data. This technique works for both React code embedded in a Drupal theme or module, and React code that is part of a fully decoupled application. We'll discuss the differences between those styles as well.

In this tutorial we'll:

• Use fetch() to bring data from Drupal into React
• Parse the data using ES6 array functions to find just the bits of data we need
• Combine multiple React components together to render a list of articles retrieved from Drupal

By the end of this tutorial, you should have a better understanding of how data from a Drupal API gets incorporated into a React application.

The core structure of Drupal's Render API is the render array, which is a hierarchical associative array containing data to be rendered and properties describing how the data should be rendered. As a module developer you'll use render arrays to describe the content your module controls in order to output it on a page as HTML, or as part of a response in another format like JSON. As a theme developer, you'll manipulate render arrays in order to affect the way content is output on the page.

In this tutorial we'll learn:

• What render arrays are and why they exist
• The basic format of a render array
• What "properties" and "elements" signify in the context of a render array
• Where to find more information about how to create a render array to describe your own content

By the end of this tutorial you should be able to understand when you need to use a render array, recognize one when you see it, and know where to get more detailed information about render array formatting specifics.

Before we start writing any React code, let's go over some basic concepts and terminology. Throughout this series we'll assume you're familiar with these things. They'll come up again and again as you work on projects that involve React, so it's worth taking the time to learn them.

In this tutorial we'll cover the following at a high level, and provide links to resources:

• Why choose React?
• What are React components?
• What are hooks, state, and JSX?
• The role of build tools when developing React applications

By the end of this tutorial you should have a firm grasp of the fundamental concepts and terminology necessary to start creating React applications.

Before we dive into advanced theming we are going to review the basic PHP you will need to use. This is a short review of PHP, including topics like data structures (arrays and objects), conditionals and operators, loops, and functions.

Additional resources

960 Robots

This next set of tutorials relates to controlling markup in Drupal when using the Views module. We’ll cover:

• What affects markup in Views
• Selecting an appropriate Views display format as a starting point for markup output
• Customizing field markup
• Customizing wrapper selectors and CSS classes
• Accessing theming information in Views
• Overriding Views template files

Additional resources

Views — Drupal.org

Now let's shift gears and take a look at how using Panels affects markup in Drupal. I will show you some unique-to-Panels concepts as well as how to apply Drupal theming principles to customize markup on a Drupal site that uses Panels.

In the tutorials that follow, you will learn:

• About Panels layouts
• How to add CSS classes using Panels
• How to override the panel pane template file
• What Panels means by “Style”—with a broad overview of Style Plugins and where to go for a deeper dive

Additional resources

Panels — Drupal.org
Chaos Tools Suite (CTools) — Drupal.org
Theming Basics for Drupal 7 — Drupalize.Me