Rebuilding an event page layout after a plugin's major update

The Events Calendar 6.0 wiped out the custom single-event layout a client had built. I rebuilt it in CSS on top of the plugin's new default templates, desktop first and then mobile.

The objective

A major version of The Events Calendar rewrote its templates and broke the client's custom single-event layout. They'd reverted to the standard layout with some of their old CSS still hanging around, which left the page in a half-finished state.

They weren't after an exact copy of the old design. They had screenshots of what they wanted, close to the previous look but not identical.

I built it in CSS rather than template overrides on purpose. Template overrides are the thing that breaks the next time the plugin ships a major release.

What I did

I worked from their screenshots against the plugin's new default markup and built the layout in CSS.

I cleaned out the leftover CSS from the old version that was still applying and fighting the new templates.

Desktop went first. Once they'd signed off on it, I did mobile separately.

They came back to me later for another code fix and for a timing problem with a script running on the event page.

The result

The event pages got the layout the client wanted, built so the next plugin update is far less likely to undo it. Three contracts with the same client over the course of a year.