Guide

Frontend Theming for Drupal 8, 9, and 10

Frontend Theming

Content in this guide

Frontend Theming

Interested in taking the Acquia Certified Drupal Front End Specialist Exam? Go to study guide

What will you learn

  • Override and customize template files
  • Implement layouts and regions
  • Use Twig to create dynamic templates
  • Add CSS and JavaScript libraries
  • Set up your site for theme development

Overview

A themer, also known as a front-end developer, sits between the designer and the developer on a project. They're responsible for the architecture and implementation of the client-facing parts of a web site. This includes working with HTML, CSS, JavaScript, and related technologies. Drupal themers also use Twig in template files. Advanced front-end developers will often create “glue code” modules, or functions in PHP that expose configuration options to site builders. Glue code modules also alter the data stored in Drupal before it's presented to a site visitor in the browser.

Drupal front-end developer learning resources

Theming Drupal

This course covers what themes are, how to download, install, and uninstall them, and how to configure both global and theme-specific settings. Learners will also explore how to add visual elements like screenshots to themes and understand the purpose and features of core themes like Stark.

This course covers the foundational aspects of theme structure, the use of base themes, and the creation and configuration of essential theme files. Learners will gain practical skills in using the Starterkit utility for faster theme creation, defining regions, and configuring their development environment for efficient theming.

Working with template files

This course covers the fundamental concepts of template files, including how to locate, override, and inspect them. Learners will gain practical skills in determining the base name of a template, inspecting available variables, and customizing the output of Views through template overrides.

This course covers the basics of Twig syntax, including delimiters, loops, and filters, and Drupal specific enhancements, as well as more advanced topics such as handling arrays and objects, managing whitespace, and creating links. Additionally, learners will explore how to add and manipulate HTML classes and attributes, and understand the principles of template inheritance to create clean, maintainable, and reusable templates.

Attaching CSS and JS assets

This course covers the fundamental concepts of asset libraries, including their purpose and benefits, how to define and attach them, and methods to extend or alter existing libraries. By the end of the course, learners will be equipped with the knowledge to optimize resource loading, enhance performance, and maintain modular and reusable code in their Drupal projects.

Preprocess functions

This course covers the fundamental concepts of preprocess functions, including their purpose, how to define them, and practical applications for adding and changing variables. By the end of the course, learners will be equipped with the skills to implement preprocess functions in their themes, enabling them to customize and optimize the rendering of dynamic content in Drupal.

This course covers the fundamental concepts of theme hook suggestions, including how to discover existing suggestions and add new ones. Learners will gain practical skills in altering, removing, and reordering theme hook suggestions to achieve specific theming goals.

Hands-on exercises

This course contains a series of hands-on exercises designed to give you practical experience working with Drupal themes. Use this as an opportunity to practice the skills you’ve developed via other courses on this site.

Advanced theme settings

In this guide, you'll learn about Drupal's Form API, which you can use to alter the theme settings form, and add advanced settings to your theme.

Categories
Theming, Module Development
Drupal 8, 9, and 10
Drupal 8, 9, and 10
More information

The Render API consists of a standard format for describing data using structured arrays and a process for converting those arrays into the HTML a user sees when interacting with a Drupal site.

Drupal 8, 9, and 10
More information

Cascading Style Sheets (CSS) files are added as an asset library through a theme’s libraries configuration file. HTML attributes, including classes and IDs, are commonly added in template files with Twig.

Drupal 7, 8, 9, and 10
More information

JavaScript files are included by a module or a theme by creating an asset library. Using this asset library system you can selectively choose which files to load, overwrite existing files, or customize them to suit your needs.

More information

Drush is a command line interface that enables you to interact with your Drupal site without clicking around the graphical user interface (GUI).

Learning tips

  • There’s a lot to learn, and a lot of the best information is spread out across Drupal.org and various other websites, books, and podcasts. As you’re climbing the ladder, and become more proficient with Drupal, you will need to learn to differentiate between knowledge that's specific to creating a Drupal theme, and knowledge that's more general to HTML/CSS/JavaScript. Knowing the difference will help you locate appropriate resources.
  • If you are interested in taking the Acquia Certified Front-end Developer Exam, you will also want to work your way through our exam guide.
  • There are many modules that afford the opportunity to configure markup or add CSS classes, including modules for creating layouts, lists, and other display controls. It's a good idea to become familiar with how these modules can be configured so that you can either configure them yourself to your liking or effectively communicate with a site building team member. You may want to work through our guide for site builders as well to broaden your skill-set and to gain a more comprehensive knowledge of how Drupal works.

Broaden your skills

There are many ways to grow your skills and knowledge outside of tutorials. Here are some of our favorite resources for exploring Drupal theming.

Contribute to the Drupal project

Although not a requirement, many Drupal developers also enjoy being active members of the Drupal community and contributing their solutions back to Drupal.org in the form of a contributed theme or by helping to resolve bugs in the themes they use -- even in Drupal core themes.

More information

As an open source project, Drupal depends on community contributions in many forms including documentation, code, translation, speaking, organizing events, mentoring others, and even donating money.

Categories
Drupal 7, 8, 9, and 10
More information

Drupal has an amazing community of people who create the software and help each other make the best use of it. This is one of the main benefits of using Drupal — and everyone should take advantage of that.

Community Events

DrupalCon sessions and other local/regional events are a great way to get up to speed on the latest in Drupal development. All DrupalCon sessions are recorded and are available for free on the Drupal Association’s YouTube channel. Many Drupal "Camps" (local or regional Drupal community events) also record sessions. For DrupalCon and many other Drupal events, the recorded sessions are embedded on the session description pages on the event's website.

“Drupalize.Me has trained thousands of Drupalistas. Their video lessons help to address our constant need for more Drupal talent. Drupal needs training like this to support its growth.”
Dries Buytaert
Drupal Founder and Project Lead
Photo of Dries Buytaert
“They’re easy to understand. They’re thorough. They’re funny. They’re always entertaining, and it makes it easy to learn parts of Drupal and how you can integrate it into your workflow and learn more and have a good time doing it.”
Roger Carr
Drupalize.Me Member
Photo of Roger Carr
“The mission of the Drupal Association is to foster and support the Drupal software project, the community, and its growth. Drupal education, like that provided by Drupalize.Me, is important to this mission.”
Megan Sanicki
Former Exec. Director, Drupal Assoc.
Photo of Megan Sanicki

FAQs

Am I required to sign a contract?
No. You can purchase a membership and/or cancel any time. Drupalize.Me is a pay-as-you-go service.

Can I preview tutorials before joining?
Yes! Just navigate to our tutorial library. Our free tutorials are labeled with a green "FREE" tag.

Can I watch videos on my mobile device?
Yes! Drupalize.Me is a responsive site and can be accessed in the browser on any mobile device. More FAQs