FlexPlat logoFlx Modernize

Step 4: Header and footer

Template parts are the easiest large win: they appear on every page, and a block theme renders them from fixed markup.

Method

  1. Capture the native HTML of any page (the harness saves native.html) and cut out the <footer class="wp-block-template-part">…</footer> element.
  2. Reproduce it in the renderer, keeping every class, and put the dynamic parts (site title, menu) back in. See src/platforms/wp/twentytwentyfive/footer.ts and header.ts.
  3. Find the rules the global stylesheet doesn't contain. WordPress prints a few per-page layout rules inline (.wp-container-core-group-is-layout-cf54d0a6{…}). For each class in the captured element, check whether the inlined global CSS defines it; copy the missing rules verbatim into src/styles/tailwind.css.
  4. Double the class in those selectors (.x.x { … }). The renderer's stylesheet loads before the inlined theme CSS, whose generic rules (.is-layout-flex{align-items:center}) have the same single-class specificity and would otherwise win. On Twenty Twenty-Five the footer title was centred and the link columns squeezed until this was fixed.
  5. Wire it only for this theme: renderLayout({ …, header: renderTt25Header, footer: renderTt25Footer }). Other themes keep the generic layout.

The menu

The header menu comes from the payload (navigation.primary: label, url, current). Render it with the theme's Navigation block classes (renderNavigation(items, { theme: 'tt25' })) and keep the responsive-overlay structure, because the mobile-menu script (public/static/navigation.js) relies on those class names.

The plugin reads the menu from the Navigation block in the theme's header template part. It supports custom, page, post and category links, one level deep.

Check: the header band's difference drops to about 0 (Twenty Twenty-Five: 0.1% desktop, 0.4% phone), and the footer screenshot matches the native one column for column.

Result on Twenty Twenty-Five: the footer alone took fidelity from 60.6% / 58.3% to 70.1% / 69.6%, because the tall native footer had been counted as missing rows on every page.

Published from rickey29/twenty-twenty-five at commit 2541c1d · Flx Modernize 1.0.0 · Flx Render 1.0.0