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.
Develop Forms in Drupal
GuideRelated topics
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.
CSS in Drupal
TopicCascading 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.
JavaScript in Drupal
TopicJavaScript 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.
Drush
TopicDrush 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.
Contributing to Drupal
TopicAs 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.
The Drupal Community
TopicDrupal 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.
- DrupalCon — Find links to past and future DrupalCons and session recordings.
- Drupical — Filter and find Drupal camps, sprints, user groups, and training events.
- Upcoming Drupal community events — Filter and find Drupal-related events.
