WP2Code

Porting a WordPress site to another stack normally means rebuilding the design by eye. That gets you to roughly 90% and stalls there, with nobody able to say exactly what is wrong.

WP2Code does the opposite. It serves a local mirror of the original next to the port, drives both in headless Chrome, and compares rendered geometry numerically. The output is a table: every top-level section, its height and its position on both sides, and the delta between them.

The process came out of a real job, moving a ten-page Elementor site to Laravel 13 and Tailwind 4, where nine of ten pages ended up matching the original to the pixel. The plugin generalises that process so the source can be any page builder and the target can be any stack.

The rule it encodes: never call a page done without a numeric comparison, and always compare position as well as height. Most layout bugs pass a height check.

The original process was tied to Laravel in exactly one place, and it was not the obvious one. It read the original's DOM through a same-origin iframe, which meant the mirror had to be served by the Laravel app itself. Driving a browser over the DevTools protocol instead removes that constraint entirely: two pages, measured independently, compared in Node. The mirror becomes a plain directory on a fixed port and the target can be anything.

Mirroring WordPress accurately is fiddlier than it looks. The same asset URL appears in four different encodings across HTML attributes, inline JSON, and JSON nested inside JSON. Elementor fetches bundles at runtime that never appear in the markup. Some URLs hide only inside inline JSON blobs where no attribute pattern finds them. Miss any of these and the mirror keeps quietly loading from the live site, which looks fine right up until the original goes away.

Headless measurement has its own traps, and three of them turned up during testing. Nested requestAnimationFrame never resolves under headless throttling, so the page-scroll pass hung forever. img.decode() never settles for an image whose source never resolves, and a mirrored page always has a few of those. Page builders start elements at opacity zero with a transform, and getBoundingClientRect reads the post-transform box, so animations have to be killed before anything is measured.

Then there are the failures that never announce themselves. A type token used but never defined emits no CSS, no warning, and no error. The element inherits its parent's size, and if the block is absolutely positioned every section height stays correct. On the original port that shipped at half size across four pages and survived a full geometry pass.

Nine commands covering the whole loop. The plugin detects the page builder and the target stack, mirrors the site, extracts design tokens, measures pages, and gates every page on a numeric diff before it can be called finished.

The browser layer is where most of the care went. Every measurement runs through one prepare step so the original and the port are always read under identical conditions: animations killed, the full page scrolled so lazy sections lay out, fonts and images awaited on a budget rather than indefinitely, and clientWidth reported so two measurements taken at different effective widths are rejected instead of trusted.

The diff compares position as well as height. A section can be the right height and in the wrong place, which is how a collapsed margin drags a background image 100px up a page while every height check passes. There is an end-to-end self-check that serves two fixture pages whose section heights are identical and whose positions differ, and asserts the gate fails them. If that test ever passes, the gate is not doing its job.

The static audit catches the silent failures: undefined tokens, class names built by string interpolation that Tailwind's scanner cannot resolve, line-height left at the browser default on large text, horizontal padding on fixed-width boxes, and arbitrary values duplicating a token that already exists.

Targets ship as short adapter files stating six things: where components go, the component syntax, the class attribute name, loop syntax, how routes are registered, and where global CSS lives. Four are written, and anything else falls back to a generic adapter. Writing a real one is about forty lines.

Verified against a live Elementor site. The mirror pulled 159 assets in 13 seconds with zero references left pointing at the origin. The token census independently recovered the same palette, both font families and the same breakpoint pairs that the original port had derived by hand, including the one token whose absence caused the half-size bug.