Turn a plain jane HTML template into a Drupal theme with the Theme Generator module.

Posted 3 months ago in Drupal

So we have some websites. A lot of websites. About 394 from last count. They're all newspaper sites, they all want blogs, and we want them to be using Drupal for their blog platform. Unfortunately, they're all hosted on a content management system that isn't really meant to be a robust blogging platform. So we had a predicament on our hands. How do we clone 300+ websites into Drupal sites?

The creation and management of these sites on one Drupal installation is straightforward using Drupal's multi-site feature, along with a unified installation profile. So that wasn't our concern. However, of larger concern was the creation and management of 300+ Drupal themes using our existing websites as templates. Luckily, our CMS allows us to create one template that is available on every single site. This got us our base template from which we wanted our Drupal themes to be based off of.

So, I thought it would be excellent if we had a Drupal module that would:

1. Take a local or remote path to an HTML mockup
2. Automatically generate Drupal regions based on a replacement pattern in the HTML document
3. Take theme information settings, such as 'id', 'name', etc
4. Generate a new Drupal theme based on the above settings

A few brainstorming sessions and five hours of coding later, I've got a working Drupal module that does just that. Enter the Theme Generator module. For now, it serves our organization's very specific needs. However, I've got big plans for the module that may benefit others.

Here are some examples of our sites and their corresponding Drupal templates:

• MPNnow.com (Drupal template)
• Wicked Local Plymouth (Drupal template)
• Rockford Register Star (Drupal template)

...and 391 others.

Here's how it works. Upload and enable the module, head over to '/admin/settings/theme_generator'. From this screen, you have 5 fields:

Template path

This should be a URL, either local or remote, to the HTML mockup you want to use as the source of your Drupal theme. For example:

http://www.mpnnow.com/drupal_owrap

Region replacement pattern

The generator will look for a pattern of text that it will use to build the Drupal regions. You can change that pattern here, but by default we use:

__%(.+)%__

Where '(.+)' would be the ID of the region to be created. Any regex pattern can be used here. Patterns should be constructed like so (if our replacement pattern were '__%(.+)%__'):

__%name_of_region%__

The generator would interpret this as a region like so:

regions[name_of_region] = name of region

During the generation process, it will replace those patterns with the appropriate PHP code to output the regions.

Theme ID

This should be the computer readable format of the name of your theme. If you want your theme to be called 'Wicked Local Plymouth', your ID should be:

wicked_local_plymouth

No spaces or whacky characters here, please.

Theme name

This is simply the name of your theme. This will show up on the themes listing page (/admin/build/themes).

Theme description

Just the description, and will also show up on the themes listing page.

The generation process

So, with those fields set, clicking 'Generate theme' will do the following:

1. Grab the content from the template URL
2. Build the theme's .info file based on the preferences
3. Process the replacements:
   1. Replace title with PHPTemplate code
   2. Write PHPTemplate code for outputing $head, $styles, $scripts
   3. Remove the base element (long story)
   4. Write PHPTemplate code for outputing correct Drupal language
   5. Write Drupal body styles
   6. Write $closure
4. Finally, create the theme directory and write both the .info file and page.tpl.php to the directory

That's about it. You'll need to be sure Apache has write permissions on /sites/all/themes.

Thinking ahead, not only is creating these Drupal themes quickly and efficiently very useful, but the management and update process of those Drupal themes would also be significantly useful.

Since we want one central location where we will manage our site templates, we only want to have to make modifications to that one place. Thus, we'll need Drupal to keep tabs on these automatically generated themes, and update them accordingly if changes are made to the root template. This should be a fairly straightforward enhancement to this module, allowing for manual theme updates, as well as updates run on cron.

Again, this module is in its infancy, but judging by the amount of usefulness we've found it provides already, there will likely be many enhancements to this project.

Download the Theme Generator module.

My to-do list for this module:

• Write vars such as $messages, $help, $tabs, etc, to generated template

Finally, my feature wishlist for this module (in no particular order):

• Gauge interest in support for additional template engines
• Build a management interface for the automatically generated themes
• Provide functionality to re-build the generated themes should the source of the template have changed
• Ingest external CSS and JS, and write to Drupal filesystem
• Provide some sort of intelligent URL re-writing to support templates using relative paths instead of absolute paths

That's about if for now, let me know your thoughts!

11 Comments