![](/assets/images/drupal.jpg)
Rebuilding a Theme, Part I: Tricks and Tips
Posted: 2024-07-02 in Drupal, Front End Development
Before I start blogging about the specifics of my front-end development project, I thought I should list some things I've picked up over time about theming in Drupal.
Develop with DDEV
I do all my Drupal development work using DDEV to run the site locally. See my post Using ddev for Local Drupal Development for more information on using DDEV. It is so much better than the bad old days of using MAMP or a Virtual Machine!
But since not everyone uses DDEV, I'm going to leave ddev
off of several of the commands that I will mention in this series, lest I create confusion.
Use Your Browser's Development Tools
My main web browser is Firefox, which has great Web Developer Tools available in Tools > Browser Tools > Web Developer Tools. These tools are essential for inspecting a page's code to identify what, exactly, needs to be selected for styling. There's also an interface for seeing how your page looks on different devices.
On a Mac, the shortcut for activating the tools in Firefox is ⌘⌥c
(command + option + c). I recommend memorizing what the shortcut is in your browser, since you'll need to use it a lot. I'll go so far as to say that you shouldn't even think about front-end development without figuring out how to use your browser's web development tools!
Install a CSS compiler
In my case, the theme I'll be working with uses SASS, which stands for "Syntactically Awesome Style Sheets." According to the website, "Sass is the most mature, stable, and powerful professional grade CSS extension language in the world." Installation instructions are at https://sass-lang.com/install/. In my case, I'll use Homebrew to install it on my Mac: brew install sass/sass/sass
.
In some cases, npm takes care of this step.
Set Up Drupal for Theme Development
First of all, install the Twig Tweak module. It adds a bunch of functionality that you'll probably want or need. You should also familiarize yourself with the Twig Tweak Cheat Sheet, which is indispensible.
Twig is the default templating language for Drupal since version 8. In addition to being more user-friendly than the raw PHP of earlier versions of Drupal, Twig has some really helpful hinting and debugging features. To take advantage of these, you need to edit a couple of files in the web/sites/default
directory.
Turn on Twig Debugging
- Go to
web/sites/default
- Copy
default.services.yml
and name the copyservices.yml
:cp default.services.yml services.yml
- Open
services.yml
- Scroll down to the section
twig.config
- Change the line
debug: false
todebug: true
- Save and close
Enable Local Settings
The local settings file adds some development tools.
- Go to
web/sites/default
- Copy
example.settings.local.php
and rename itsettings.local.php
:cp example.settings.local.php settings.local.php
Now, edit settings.php
to tell Drupal to use the settings.local.php
file. You might have to change the permissions on settings.php
before you edit it. If you do have to change the permissions:
- Navigate to
web/sites/default
- Do
chmod ug=rwx settings.php
Now, do the following:
- Open
settings.php
- Scroll down to the bottom of the file
- Uncomment the last lines by deleting the
#
sign at the beginning of each line
The final lines of settings.php
should now look like this:
if (file_exists($app_root . '/' . $site_path . '/settings.local.php')) {
include $app_root . '/' . $site_path . '/settings.local.php';
}
Don't forget to reset the permissions on settings.php
: chmod ug=r,o= settings.php
.
Be sure to clear the caches: drush cr
.