After starting a real project with D8 I was pleased to find getting D8 to zero is trivial compared to D7.
“To Zero” for those who aren’t “in the know” — of this expression I just made up — means removing everything (most things) Drupal does in the front end. Developers from backgrounds that are not Drupal see a default Drupal install and wonder why there’s so much “stuff”. ExpressionEngine or Craft installations give you a blank page to work with by default. This isn’t Drupal’s philosophy. The Drupal Learning Curve™ is half undoing core Drupalisms™ and half learning about common modules (and undoing their drupalisms). Learning those two things gives you enough insight to effectively develop Drupal sites and build your own modules.
D8 made it easier to get to zero. D7 made it hard. How hard? Expletively hard™. If you want to play at home check out our Zero theme which I put together while writing this (for science).
Disclaimer: Taking D7 to absolute zero may not be a good idea for every (or any) project you work on. For reasons that will become apparent.
First I’ll assume that Drupal is downloaded, installed, and running on a local environment. Second if something isn’t taking effect remember to clear the Drupal cache.
Once we have a clean D7 install running we can create a new theme. I’ve called mine Zero, you can check it out on github. To create a theme you just need a
.info file, a
Name, description, and core are pretty self explanatory. By default a new Drupal install will have content in the regions listed above, so we’ll just keep them. The absolutely required regions are: content, help, page_top, and page_bottom. Drupal will create those if you don’t specify anything. Finally stylesheets and scripts are our files. They will end up being the only files — along with the page itself and any images — that our site will load.
Quick note for some: Why don’t we just copy “stark” the defaultiest of Drupal themes? You can, and then delete everything in it and rename it. Why can’t we use “stark” as a base theme? Because “stark” has default CSS which we don’t want.
Activate the theme on the admin panel under appearance.
A lot of modules include their own CSS. Drupal core is made up of modules that do this. The menu module, the system module, the node module, etc, all include their own CSS files. They provide default base styles that we may or may not want. In our case, we don’t want.
To get rid of all these CSS files we need to add a
template.php file. Here we can use hook functions that will massage Drupal into the shape we want. To remove CSS we can use the
hook_css_alter() function (where hook is replaced with our theme name):
A note about removing all the CSS Drupal provides. Some modules depend on these styles to do their thing. For example, if we now look at our site while logged in we will notice our toolbar is messed up. We can come up with solutions to these problems, like our own base styles addressing the problem, making our own toolbar, or getting a toolbar module that doesn’t rely on Drupal’s base styles.
hook_js_alter(). This will also go inside the
As with our CSS alter function, this will remove scripts that existing modules or modules you may add later depend on. For example
At this point we have removed everything except the two files we defined in our
.info file. Great, but, we are only halfway there… sort of.
Our next challenge is changing the markup D7 outputs. There are no templates on our theme, which begs the questions, where is all this markup coming from?
It comes from core modules. For our purposes we’ll talk about the default ones, but keep in mind any module you add may have its own templates that need to be overridden (the most common will be the views module and its many templates). The core modules we want to focus on here though are the
system module, the
node module, and the
block module (notable exception: the
taxonomy module and
field, just know that they exists too).
To override the defaults markup these modules output we can create a
/templates folder inside our theme and copy and paste the following templates into it:
We can now override all the markup D7 is outputting by modifying our copies. We can change div tags to html5 tags, we can change the doctype. We can remove classes, attributes, IDs, etc.
We can also access variables directly and effectively cut out the need for templates that render smaller parts of the page. For instance, you could render a page’s content from the page template and never need the region, or node template. Not to say you should do that, but you could do that, and it might make sense to do that at some point for some reason.
As with everything else, the caveat is that contributed modules you might want to use may be utilizing classes, attributes, markup, or templates D7 provides by default.
This is the last thing we are going to cover. And it takes us back to our
template.php file and hook functions.
While you could just delete the
$classes variables from templates (in
node.tpl.php‘s node wrapper for example), you may want to go about this a different way. A more drupaly way.
To do that we need to open our
template.php file again and use another hook function. The
hook_preprocess_HOOK() where hook is your theme name and HOOK is the template you are affecting. For example we can use the
zero_preprocess_node() function to change variables in
In this function we are passing all our variables by reference and modifying the “classes_array” key. This key contains classes that will be output in our template. By replacing the classes array with an empty array we have effectively deleted all the classes. We could also add our own array of classes this way.
As with everything else, you might break stuff by doing this, so know what future modules you add need or use.
There it is, four complicated steps to get D7 to zero (almost).
This isn’t a complete guide, but I hope to continue to update the zero theme with ways to zero out different parts of Drupal. Like I said D8 does a good job of making all this easier, but some of us still need to develop in D7 for a while longer.
For those who want to poke around the Zero theme, I recommend getting the Devel Module and enabling “Devel Generate”. It can generate a bunch of dummy content. Devel also provides the
dpm() function which is a great tool for viewing large objects/arrays (for example try
dpm($vars) inside the
zero_preprocess_node() function). Make sure to refresh the page multiple times, be logged in, and don’t delete the
$messages variable from
I’ve also purposely avoided talking about menus and other trickier things to zero out, because they would take up too much time. I hope I have some time to write about that in the future.
As always we love hearing from you. Let us know what you think on social media @NJImedia on twitter or on our Facebook. Or reach me personally at @poettersbetter on twitter with any questions or comments.