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

Posted 1 year 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:

...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:

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 '__%(.+)%__'):

The generator would interpret this as a region like so:

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:

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!

20 Comments

1 year ago

Perty

1 year ago

Very, very cool. I'll be giving it a whirl tonight.

1 year ago

nice, this could be very very useful to me. let us know when you get it up on d.o!

1 year ago

Just an update - as of 11pm last night I updated both the module zip file, as well as the pastie version.

Specifically, I rewrote much of the way replacements are handled. Fixes included:

- Handle templates only defining one region
- Switched the way variable names are generated from patterns to eliminate redundancy
- Added the output of $title, $tabs, $messages, $help directly before the output of $content

There are still issues with:

- Attempting to replace content using a regex that does not return a backreference
- Handling the generation of variable names more efficiently

1 year ago

Also fixed a bunch of stuff related to Drupal coding standards, including:

- Addition of commas at the end of the last item of Array lists
- Switched tab width to 2 spaces

1 year ago

Module updated including the following:

- Massive commenting overhaul according to Drupal standards
- Code ran against code-style.pl
- Reordered function locations in the file to be more logical

1 year ago

I am trying to run the generator on my template.html file. it doesn't seem to make a box tpl file, or module, or anything else. just the info file and the page tpl file

1 year ago

James,

Yes, currently that's the only functionality of the generator. Eventually, the module will also build the necessary scaffolding template files using the Zen theme markup to provide the theme with more customizability. With just a page.tpl.php file, however, the theme will still function just fine, since Drupal uses default theme functions for nodes, blocks, etc.

Also, I'll be putting the module on Drupal.org sometime early next week, where I'll be taking feature requests as well as gauging support for co-maintainers once our clear goals are established for the module.

Thanks!

Nick

1 year ago

This module has been moved to Drupal.org for support, feature requests and bug reporting. Please direct any and all communication to the project's new home on Drupal.org:

http://drupal.org/project/theme_generator

Nick

maczkojanos
last year

i try this module, but only this massage appaer: 'No regions found to generate.'
What i need to do?
im a drupal newbie :-)

thanks

last year

maczkojanos,

Within your HTML template that you're pointing to, you'll need to define your regions like so:

__%name_of_region%__

Nick

5 months ago

This is really cool. Have you thought about making something like this for wordpress; or will this project remain drupal-specific?

5 months ago

Josh,

This project will remain Drupal-only, though I imagine it wouldn't be difficult for someone to port it to WordPress. It is open source, so anyone may go ahead and do so.

Nick

4 months ago

Are there any particular names the regions have to be, or is that open?

Could you possibly link to an HTML document that'd be ready to run thru your generator?

That or just a more specific reference on how to do the ID stuff.

Thanks a lot,
Karoun Kasraie

4 months ago

I've tried conversion of XHTML--> Drupal a few times but have never achieved a near identical port. May be I'm trying the hard way...But this is ubber cool..I'll give it a spin...
infact i came across this in Drupal.org some time back but Now i am trying this...Thanks

3 months ago

Hey there! This seems like such a great module and I would really like to make use of it! The problem is I also get this message: 'No regions found to generate.'

I don't understand what you mean by that part of the regions. I understand the regions in Drupal, but entering region names which you used in your html page confuses me.

Can you explain this more clearly and give and example of what region names you used for the MPNnow.com html page for example...

Thanks!

3 months ago

Niel,

For the region, it's just some HTML text in your template file. For MPNNow, there's only one region, defined as:

__%content%__

See here:

http://www.mpnnow.com/drupal_owrap

You'd simply place that text throughout your template for each region. If I wanted 3 regions in my template, I might do something like this:

__%left_sidebar%__
__%content%__
__%right_sidebar%__

The module simply looks for strings that look like region placements in the template.

Hope this helps.

Nick

3 months ago

Oh okay... that's great. I think I get it now! Thanks for helping so quick.

2 months ago

Hey Nick wow you are a saviour... I have limited knowledge of drupal but still got my design to work perfectly http://www.mcknightmedia.com/blog/

There are a couple questions I have if you have the time to answer. I can't seem to find where it creates the page.tpl.php. I would love to add links to my current design and would had to create another template just to make a small change.

Also is there a way to make the node pages work as well with the design, maybe you explained it and it all went over my head.

Thanks for your awesome work, you made drupal life SOOOOO much easier.

2 months ago

Jeremy,

page.tpl.php should be located in:

/[drupal installation]/sites/all/themes/[name of your theme]/page.tpl.php

Hope this helps!

Nick

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>. Beside the tag style "<foo>" it is also possible to use "[foo]".

More information about formatting options