It’s been a busy few weeks, but I have been able to do a lot of work on the exciting next release of WP-United.

The integration code has been reworked from the ground-up, with the aim of simplifying the code, while incorporating an exciting new automatic template integration system.

I will have a preview available later today or tomorrow for you to download and test out. In the meantime, I wanted to introduce the new template system — what it is, and how it works, along with some screenshots

WP-United’s new automatic template integration — CSS Magic

The new template integration system is called “CSS Magic”. Under the hood it verges on the magic, but what it does is actually quite straightforward:

• It looks through your integrated page, looking for all the CSS used — including links to stylesheets and inline CSS.
• It identifies the CSS that was intended for the inner part of the page (i.e. phpBB for phpBB-in-WordPress integrations, or WordPress for WordPress-in-phpBB integrations).
• It takes the identified CSS, and parses all the CSS selectors, modifying them to make them more specific, so that they only apply to the inner portions of the page, without messing up other elements.
• It also prepends a “reset” stylesheet that, again, only applies to the inner portion of the page. This wipes out any changes made by the outer stylesheets to the inner portion of the page.

This is quite a simple concept, and the first steps were quite easy — I had the initial CSS parser up and running over a month ago. However, dealing with real-world CSS — complete with browser-specific hacks and things like nested stylesheets — was a little more tricky.

It is now pretty much complete. For the last few days, I have been doing real-world testing with as many WordPress themes as I have been able to download, and made tweaks as appropriate. Provided you have reasonably compliant CSS in your templates, it should work for you. The only exception is templates where a lot of style work is done via JavaScript.

So, CSS Magic completely prevents our WordPress and phpBB stylesheets from conflicting with each other. For most templates, this solves 95% of the display issues users experience when integrating.

What are the other 5% of issues? These are caused when your WordPress and phpBB templates contain the same IDs and classes.

In valid HTML, the same ID cannot be declared twice, so we want to prevent that. For classes — even though having the same class name defined in your outer template and inner template is not invalid HTML, it can prevent styles from displaying as expected.

This is where the other half of the new template system comes in — Template Voodoo!

Template Voodoo

Template Voodoo modifies the inner template by identifying IDs and class names that already exist in the outer template, and renaming them. It then makes the appropriate changes to the selectors in the relevant CSS.

It took several iterations of the code to come up with something worthwhile. Take, for example, a phpBB-in-WordPress integration. It is not enough to simply look at all the IDs and classes in page and rename conflicts. This would be a very wasteful way to do it, as every phpBB forum page is different — the index page has different classes and IDs from, say, the user control panel, or the viewtopic page.

What we really needed was a way to generate a canonical list of all the conflicts that could exist. We can then cache this list, and reference it to quickly modify each page as it is being generated. (The actual modification process is not very expensive, as there are usually, at most, only 1 or 2 conflicting IDs/classes per page).

This is how Template Voodoo achieves this:

• Template Voodoo looks through all the CSS used in the page, building up “CSS catalogues” for the inner and outer portions of the page.
• It then scans through each CSS catalogue, generating a list of all the ID names and class names that are referenced for each.
• It compares the two lists, looking for duplicates.

Caching

Of course, all of the above are quite expensive operations. They involve a lot of number crunching, both when the page is generated, and when each stylesheet is called. On low-traffic sites they’re no problem, but on many sites every CPU cycle and kB of RAM counts.

So, to ensure that CSS Magic and Template Voodoo aren’t wasteful of resources, everything they do is cached — every modified bit of CSS is stored for later retreival, and Template Voodoo catalogues are cached.

Here’s how it works:

• On the first page load, CSS Magic does its thing.
• On the second page load, Template Voodoo is called into action, using the CSS Magic cache to fill its CSS catalogues. It then caches its results.
• On the third and any subsequent page loads, the caches are used for everything.

The result: It just works!

This all sounds like a lot of work, and it is — but the good news is: it works! In most instances, Random phpBB template A now peacefully co-exists with Random WordPress template B right out of the box, with no modifications needed to either.

Here are some screenshots. All these templates are fresh, out-of-the-box:

Atahulpa in Prosilver

Prosilver in Cordobo Green Park

subSilver2 in Pixel

As part of the overhaul, I will remove several options pertaining to template integration from the WP-United Setup Wizard. For example, the “CSS Order” option is now worthless, and the “doctype” option isn’t needed by most users and can be moved over to options.php instead.

These options will be replaced by simple “Use CSS Magic?” and “Use Template Voodoo?” options.

Next steps

After testing the new integration system myself over the last several weeks, I’m confident that it works well — however, I intend to release a preview of CSS Magic and Template Voodoo shortly, to gauge feedback and to iron out any last remaining bugs prior to release.

After this, more work is still to be done on v0.8:

• More work-arounds for wayward plugins. I aim to ‘fix’ most plugins that are currently reported not to be working with WP-United. The work-arounds themselves are quite simple, and they should be ready this week. If you have a WordPress plugin that doesn’t work with WP-United v0.7.1, please post it here!
• Simplification of the “Full page” phpBB-in-WordPress option.
• A few outstanding bugs still to track down

As always, I’m a little behind schedule with the release. But I’m hopeful that when I am finally able to get v0.8 out, it will be a very worthwhile upgrade.