Drupal Seven to Zero

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.

One

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 screenshot.png, and (for our example) an assets folder with our CSS and javascript. Something like this:

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.

Two

Activate the theme on the admin panel under appearance.

On a browser window in which we are not logged in we can see our very plain website. It’s plain to be sure but it still has a lot of Drupal additives. Using chrome’s dev tools’ “Network” tab we can see that we are loading a ton of CSS files and javascript files.

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.

To remove all Drupal added javascript we use a similar hook called hook_js_alter(). This will also go inside the template.php file:

As with our CSS alter function, this will remove scripts that existing modules or modules you may add later depend on. For example drupal.js contains a Drupal object that any contributed module that uses javascript will likely be attach itself to. Also worth noting, this will remove the jQuery that ships with D7. We may chose to not remove all or any of the scripts, giving us full control.

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.

Three

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:

• /modules/system/html.tpl.php
• /modules/system/page.tpl.php
• /modules/system/region.tpl.php
• /modules/node/node.tpl.php
• /modules/block/block.tpl.php

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.

Four

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 node.tpl.php:

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.

Zero

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 page.tpl.php.

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.