What is a theme and how do I get started making one for my site? This tutorial introduces the concept of theming at a very high level and points to additional tutorials about more specific aspects of theme development in order to help people get started.

Themes are enabled, and disabled, via the user interface.

In this tutorial we'll learn to:

• Install a theme and make it the default
• Differentiate between installed themes, default themes, and uninstalled themes
• Use an administration theme for the administration section of our site

Goal

Understand how to download, install, and uninstall a theme.

Each theme is a collection of files that define a presentation layer for Drupal. While only a THEMENAME.info.yml file is required, most themes will contain other files as well.

In this tutorial we'll learn about:

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:

Drupal 8 comes with all of its caching features enabled by default. This improves response time, but can be frustrating for themers as it makes it harder to preview the changes you make to template files.

In this tutorial we'll look at:

Themes define the regions that are available for site administrators to place blocks in, creating a layout framework within which the components that compose a page can be placed. Deciding what regions to create requires knowledge of how Drupal works and a clear vision of the design you're trying to achieve.

In this tutorial we'll learn:

Customizing the available regions in your theme is likely 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 .info.yml file and updating your page.html.twig file.

In this tutorial we'll learn how to:

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 8 with a custom theme installed.

Global settings for themes

Global settings apply to certain common theming elements such as a theme's logo, shortcut icon, and how user pictures are displayed in posts or comments.

Some, but not all, themes come with administrator-configurable settings that you can change through the UI. These might allow you to upload your own logo, choose between a couple of different pre-defined layouts, or turn features of a theme on or off. In this tutorial we'll look at where you can find these theme settings if they exist, and how to go about changing them.

Contributed and custom themes can ship with a thumbnail screenshot that will be used to represent the theme when listing themes in the administration UI. In this tutorial we'll look at how you can add a thumbnail screenshot to your theme.

Bartik is a core theme in Drupal. As the default theme for Drupal 8, it serves as an instructive example of a well-developed responsive theme. In this tutorial, we'll tour and explore Bartik, identify its primary features, and explain the use case for the Bartik theme and what you can learn from it.

Goal

Recognize Bartik theme and identify its primary features. Explain the use cases for Bartik and what you can learn from it.

Custom themes in Drupal must be configured to inherit settings, templates, and other assets from a parent theme. 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.

In this tutorial we'll:

Drupal core comes with a few base themes: Stable, Classy, and Stark. Each one has a different intended use case. And all of them are useful as a reference for building your own themes.

In this tutorial we'll:

Make your theme a subtheme of a "base" theme, allowing it to inherit all the base theme's templates and other properties. When creating Drupal themes it is common to use the Classy theme provided with Drupal core as a base theme to jumpstart your development.

In this tutorial we'll learn how to:

• Use the base theme key in our theme's .info.yml file
• Make our Ice Cream theme inherit from the Classy theme, or any other theme

Goal

Make our theme a subtheme of the Classy base theme.

Template files are responsible for the HTML markup of every page generated by Drupal. Any file ending with the .html.twig extension is a template file. These files are composed of standard HTML markup as well as tokens used by the Twig template engine to represent dynamic content that will be substituted into the HTML markup when the template is used. As a theme developer, you'll work with this a lot.

In this tutorial we're going to learn about:

This tutorial demonstrates how to locate the template file that is currently being used to render an element and override it in your own theme. This is an important skill for anyone who wants to make changes to Drupal's default HTML markup.

In this tutorial we'll:

There are many situations in which you need to know the theme hook, or base name, of a template file. This name is used for determining things like which preprocess function affects a template, and which template files are used for theming components.

In this tutorial we'll learn:

• How to figure out the hook name for any template

Determine the hook name of a template

There are two ways to discover the hook name of a specific component. With the hook name, you can locate its base template file.

Like most output in Drupal, Views relies on Twig templates for a significant amount of its rendering. In this tutorial we'll identify where you can find the default Views templates within your file system, what the common templates are for, and how to name your templates so that they are applied to specific views.

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

Now that we understand what templates are and how we can use them, let's override some templates! In this tutorial we will copy the outermost wrapping template for a view (views-view.html.twig) to our theme to override it for the Baseball Players view. Then we will modify the template so that our view's pager appears both above and below our table of players.

Goal

Display the Baseball Players view pager both above and below the table of Players.

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:

Stark is one of the themes bundled with Drupal 8. It is intentionally bare bones and its purpose is to help Drupal theme and module developers get to the heart of Drupal's system templates. In this tutorial, we'll explore Stark and its primary features and discuss the various reasons for utilizing the Stark theme.

Goal

Recognize Stark theme and identify its primary features. Explain the use cases for Stark and what you can learn from it.

Knowing how to clear Drupal's cache is an important skill for any developer. You'll likely find yourself doing it frequently in order to get Drupal to register the changes you make to your code, or other updates you make via the UI. It is also a good first step to trouble shooting problems with your Drupal site: Clear the cache before you do any other debugging to ensure it's not just a bad cache entry.

Goal

Learn three methods of clearing Drupal's cache: via the administrative UI, with Drush, and by truncating tables in the database.

Knowing how to inspect the variables available within a template file enables you to discover all of the dynamic content in a Twig file, not just that which is already being used.

In this tutorial, we'll learn how to use {{ dump() }}, kint(), vardumper(), and XDebug to inspect variables in a template file.

Goal

Discover and inspect variables available in any template file.

When determining which template file to use to theme an element, Drupal uses the list of theme hook suggestions to look for the best match. This allows for fine-grained control over how things appear based on dynamic state and contextual information in your application. The list of theme hook suggestions varies for each base template, so we need a way to figure out our options.

In this tutorial we'll look at:

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:

In Drupal 8, CSS and JavaScript are loaded bundled together as asset libraries, and then these libraries are loaded via either themes or modules. Asset libraries can contain one or more CSS assets, one or more JS assets and one or more JS settings. In this tutorial we'll cover what asset libraries are, what they contain, and the problem that they are trying to solve.

New asset libraries can be defined by either modules or themes. In order to define a new asset library you need to create the requisite CSS and JavaScript files, and a new THEMENAME.libraries.yml, or MODULENAME.libraries.yml file that aggregates them together and provides metadata about the library itself and any dependencies.

In this tutorial we'll:

Libraries can be attached to all pages, a subset of pages, or to elements in a render array. This allows you to have some assets that are global, and others that are only loaded on an as-needed basis.

In this tutorial, we'll look at attaching asset libraries:

An overview of the Drupal and JavaScript ecosystem as it relates to themes. JavaScript is loaded via asset libraries, there are a bunch of libraries already in core including jQuery. This tutorial provides a brief orientation to some of the JavaScript included in core.

In this tutorial we'll:

Anyone writing JavaScript for Drupal should use the Drupal.behaviors API when writing their custom JavaScript functionality. Doing so ensures that your JavaScript is executed at the appropriate times during the life cycle of a page, such as when the page loads, or after new DOM elements have been added via an AJAX request. In this tutorial we'll look at the problem that Drupal.behaviors solves and how to use Drupal.behaviors when writing your JavaScript code. By the end of this tutorial you should know how, and when, to use the Drupal.behaviors API in your projects.

Maybe you've heard of anonymous closures but you're not quite sure how they apply in Drupal, or why using them is considered a best-practice. Anonymous closures allow you to avoid accidentally clashing with anything in the global scope, as well as to alias the jQuery object to the more commonly used $. This is necessary because Drupal runs jQuery in no-conflict mode. This tutorial will look at the syntax used for placing your custom JavaScript code inside an anonymous closure, and why it's a good idea to do so.

It's often useful to pass dynamically calculated values from the server to the client in order to make them available to your front-end JavaScript. Your JavaScript might need to know something particular about the user currently visiting the site or the value of a particular configuration variable. In this tutorial, we'll look at how Drupal can pass these values from the PHP code that executes during a page load to the front-end JavaScript in your theme.

In order to do this, we'll need to: