On September 19, the Drupal community in Colombia gathered for a workshop led by our collaborator Daniel Sarmiento. For three hours, attendees learned how to create a custom theme in Drupal 11 from scratch, incorporating artificial intelligence to optimize each step of the process.
In this article, you will find a summary of the most important points from the session and a practical guide so you can put them into practice.
Preparing the environment
Before you start creating your theme, it's essential to have a well-configured development environment. One of the most recommended options is DDEV, which allows you to create isolated workspaces and ensures the compatibility and stability of your project, regardless of the equipment you're working on.
💡 If you haven't set up your environment yet, check out the step-by-step tutorial to install DDEV and Docker.
Also, remember that Composer is key to managing dependencies, installing modules, and keeping the Drupal core up to date.
Basic structure of a theme in Drupal 11
A custom theme in Drupal requires a minimum file structure to function properly:
- mytheme.info.yml → Contains metadata and initial settings.
- mytheme.libraries.yml → Defines the CSS and JS files to be loaded.
- Optional: a mytheme.theme file to include PHP logic.
It is recommended to create the theme within the themes/custom folder, rather than modifying the Olivero base theme, to avoid conflicts with future updates.
It is also recommended to organize files into separate folders, for example:
themes/custom/my_theme/
│
├── css/
│ └── my_theme.css
├── js/
│ └── my_theme.js
├── my_theme.info.yml
├── my_theme.libraries.yml
└── my_theme.theme (optional)
How AI accelerates the process
One of the most useful ways to integrate AI into this workflow is to use it to generate and adjust parts of the theme. For example, you can ask an AI model from the outset to suggest the content and minimum file structure needed to create the custom theme. You can also generate specific CSS and JavaScript snippets to style entire blocks or sections on the site.
In addition, for example, by identifying an HTML class within a content type, AI can generate the CSS needed to center an image or change the typography, or completely style the element based on a reference image of a design, thus reducing development and testing time.
Activating the theme and clearing the cache
Once the theme has been created, you can activate it from the interface at Appearance → Install theme.
When you select it as the default theme, the changes will be available on the site. Don't forget to clear the cache (“Flush caches”) after each modification, as this ensures that Drupal recognizes the new styles, scripts, or settings that have been applied.
Beyond design: AI in content management
Artificial intelligence is not only useful for visual development, but it is also transforming content management in Drupal.
Today, there are experimental modules such as Experience Builder, which combine React and AI to generate blocks and sections directly from the administration interface, using simple descriptions in natural language.
Likewise, some tools already allow you to suggest taxonomies, create content structures, or manage fields using conversational commands, significantly streamlining the work of editorial and technical teams.
The future with Drupal + AI
Artificial intelligence is redefining how we work with Drupal. It's no longer just about automating tasks, but incorporating new ways of thinking, designing, and building projects that previously required much more time and effort. Its integration allows us to speed up processes, reduce errors, and open up creative opportunities that enhance the value of each development.
Starting to experiment with these tools now can make a difference in your projects. Every small step—from automating simple tasks to integrating AI-powered modules—brings you closer to building digital experiences that are more relevant, flexible, and aligned with the needs of your users.