Every web framework, including Drupal, has basically the same job: provide a way for developers to map URLs to the code that builds the corresponding pages. Drupal uses Symfony's HTTPKernel component. Kernel events are dispatched to coordinate the following tasks:
- Process the incoming request
- Figure out what to put on the page
- Create a response
- Deliver that response to the user's browser
Knowing a bit more about how Drupal handles the request-to-response workflow will help you better understand how to use routes and controllers to create your own custom pages or deal with authentication, access checking, and error handling in a Drupal module.
In this tutorial we'll:
- Walk through the process that Drupal uses to convert an incoming request into HTML that a browser can read
- See how the Symfony
HTTPKernelhelps orchestrate this process - Learn about how the output from a custom controller gets incorporated into the final page
By the end of this tutorial, you should be able to describe the process that Drupal goes through to convert an incoming request for a URL into an HTML response displayed by the browser.
The available dynamic tokens or variables vary from template to template. Each page is built from a set of templates.
In this exercise, we'll:
- Override and name the node template file so that it will only affect Article nodes on our Drupal site.
- Inspect the available variables.
- Customize the markup.
- Use the Twig filter
without.
We recommend that you try to work through the exercise yourself, and refer to the video if you need help.
It's time to create the bare-bones structure for a new theme on your site. You should try to complete this exercise based what you've learned from the tutorial prerequisites listed below. The video at the end of this tutorial will walk you through the implementation of this exercise if you need some help. In this exercise, we'll:
- Create an info file that describes a custom theme to Drupal with the regions listed below (we're going to name ours "reboot").
- Enable, and view, a bare-bones custom theme.
By the end of this exercise, you should feel comfortable starting a theme using several methods.
One of the features of any content management system's architecture is the separation of presentation and data. In Drupal, modules are responsible for figuring out what should be on the page, and themes are responsible for the final look and feel of anything shown in the browser. It's vital for a module to return themeable output, so that the active theme can determine how it's presented.
In this tutorial, we'll:
- Define themeable output.
- Show how modules can avoid embedding presentation data in their output.
- Explain why Drupal favors structured arrays over HTML strings for data presentation.
By the end of this tutorial, you will be able to articulate the role modules play in enabling themes to customize a Drupal site's appearance.
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. As a theme developer you'll need to determine what regions are necessary to accommodate your design's layout, while also ensuring it'll work with the way Drupal uses blocks to place content onto the page. 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:
- Explain what regions are and how they relate to themes
- Describe how regions are handled internally within Drupal
- Demonstrate things to keep in mind when planning the regions for your custom theme
By the end of this tutorial you should be able to describe what a region is, explain how Drupal themes use regions to place content, and get started dissecting your own designs into regions.
As we learned in the What Is a Breakpoints YAML file? tutorial, modules and themes can expose their site's CSS breakpoints and media queries to other Drupal modules and themes by implementing a breakpoints YAML file. In that tutorial, you also learned about the structure of a breakpoints configuration file and why you'd want to create one. In this tutorial, we’ll walk through the process of creating an example breakpoints file step-by-step.
By the end of this lesson, you should be able to create a working breakpoints YAML file in a theme or module. We'll test it out by enabling Drupal's Responsive Image module, where we'll be able to see it listed in the configuration form for creating a new responsive image style.
Concept: Render API
FreeDrupal's Render API plays a crucial role in how content is presented on a site. The Render API manages how content is rendered through render arrays and render elements.
In this tutorial, we'll:
- Define render arrays, highlighting properties and elements.
- Explain how render elements are used as shorthand for complex structures.
- Describe the primary types of data we can use in a render array.
- Touch on the role of renderers and special methods for rendering entities.
By the end of this tutorial, you'll better understand how Drupal constructs a page's output through render arrays and streamlines rendering with render elements.
Clear Drupal's Cache
FreeKnowing 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.
Drupal 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:
- Why these features are enabled by default
- How the theme layer leverages Drupal's caches
- Why you should learn to disable them when doing development
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:
- Override the node.html.twig template in our theme
- Make changes to the markup
- Create a content-type-specific template override like node--CONTENT_TYPE.html.twig
By the end of this tutorial you should be able to modify the HTML markup used to display a node, or any other element of the page generated using a template file.
To add CSS or JavaScript files or libraries to your site, you can attach them as asset libraries in your theme. In this exercise, you'll create 2 asset libraries and attach them globally via your theme's info file. In this tutorial, we'll pull in the CSS and JavaScript from the popular Bootstrap framework so that we can make use of its layout utility classes later on. We'll also add a custom CSS file that contains global styles for our site, like setting the page background color.
If you want to try and complete this on your own first you'll need to:
- Add the Bootstrap CSS and JavaScript files to your theme.
- Define an asset library using a THEMENAME.libraries.yml file in your theme.
- Tell Drupal to attach your asset library so that the CSS and JavaScript files it represents are included in the page.
Once that's done your site won't look all that different. But if you view the page source, or look closely, you should see that the Bootstrap files are included along with any CSS rules you placed into your custom style sheet.
Note: Since this course is focused on teaching the Drupal aspects of theme development, and not on writing CSS, we're using the Bootstrap CSS. Feel free to use the framework or library of your choice if you don't want to use Bootstrap.
You should try to complete the exercise steps on your own and use the video to help guide you if you get stuck.
At the end of this exercise, you'll find a video walk-through of the solution.
In order to change Drupal's default markup you need to override template files. The page template controls the overall layout of your theme, including the placement of regions. You should practice the exercise following the written instructions below. Use the video walk-through to help if you get stuck.
In this exercise, we'll:
- Override the currently used page.html.twig template file.
- Modify the content of the file to include the regions defined in the theme's .info.yml file.
- Wrap the regions in the page template file with HTML markup using CSS classes from Bootstrap to achieve the example layout.
By the end of this tutorial, you'll gain practice creating a custom layout in a page template file.
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.
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.
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
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.