Browse Source

phase 3: footers -> FSE template parts (bridged)

Migrate both footer variations to block template parts, kept live in the classic
theme via block_template_part():

- parts/footer.html (minimal) + parts/footer-home.html (full nav + social + cookie),
  block markup in wp:html blocks preserving the Bootstrap structure + JS hooks.
- footer.php / footer-home.php reduced to shims: block_template_part(...); wp_footer();
  + </body></html>.
- theme.json declares both parts (area "footer").
- home_url() links -> root-relative (/about ...): parts can't run PHP, and it's
  domain-agnostic ahead of the davidawindham -> davidwindham move.

block_template_part() resolves parts/*.html in a classic theme (verified), so these
render now AND are wired for the FSE flip. Establishes the migration pattern.
windhamdavid 3 days ago
parent
commit
1b3c4b5e88
7 changed files with 116 additions and 75 deletions
  1. 6 2
      _claude/notes/page-templates.md
  2. 13 0
      _claude/notes/upgrade-plan.md
  3. 9 53
      footer-home.php
  4. 9 19
      footer.php
  5. 54 0
      parts/footer-home.html
  6. 20 0
      parts/footer.html
  7. 5 1
      theme.json

+ 6 - 2
_claude/notes/page-templates.md

@@ -41,7 +41,11 @@ Companion: [[upgrade-plan]]. Diff metric = changed lines vs plain `page.php`.
   theme's only header; `header-home.php` and `header-studio.php` both removed. The full nav lives
   theme's only header; `header-home.php` and `header-studio.php` both removed. The full nav lives
   in the footer, so the header nav stays minimal. Pages needing the preloader call
   in the footer, so the header nav stays minimal. Pages needing the preloader call
   `get_template_part('loader')` directly (About, Studio). In FSE this `header.php` → one header part.
   `get_template_part('loader')` directly (About, Studio). In FSE this `header.php` → one header part.
-- **Footer split:** `get_footer('home')` → about, archive, bio, contact, desk, sitemap, studio. Default `get_footer()` → analytics, art, music, now. In FSE this becomes a **template-part choice**, not per-file.
-- **Header variants (now 2):** default `header.php` (most), `'home'` = `header-home.php` (index, about, studio). In FSE → one header part.
+- **Footer split (DONE 2026-06-19 — now block parts):** both kept, sourced from `parts/footer.html`
+  (minimal) + `parts/footer-home.html` (full). `footer.php`/`footer-home.php` are thin shims that
+  `block_template_part(...)`. `get_footer('home')` → footer-home (about, archive, bio, contact, desk,
+  sitemap, studio); default `get_footer()` → footer (analytics, art, music, now). In the FSE flip,
+  templates reference these parts directly via `<!-- wp:template-part -->`.
+- **Header (DONE):** single `header.php` (see note above).
 - **Already selectable (have `Template Name`):** about→Home, archive→Posts, desk→Desk, music→Music, now→Now, sitemap→Sitemap, + our no-title→No Title. The rest (analytics, art, bio, contact, studio) are **slug-based** (`page-{slug}.php` auto-applies).
 - **Already selectable (have `Template Name`):** about→Home, archive→Posts, desk→Desk, music→Music, now→Now, sitemap→Sitemap, + our no-title→No Title. The rest (analytics, art, bio, contact, studio) are **slug-based** (`page-{slug}.php` auto-applies).
 - **Bespoke/self-contained:** `front-page.php` (homepage) bypasses the header/footer system — decide in Phase 3 whether it stays bespoke PHP or becomes a block template.
 - **Bespoke/self-contained:** `front-page.php` (homepage) bypasses the header/footer system — decide in Phase 3 whether it stays bespoke PHP or becomes a block template.

+ 13 - 0
_claude/notes/upgrade-plan.md

@@ -136,6 +136,19 @@ Considering moving the whole site from **davidawindham.com → davidwindham.com*
 
 
 ## Changelog
 ## Changelog
 
 
+- **2026-06-19** — **Phase 3: footers migrated to FSE template parts (live via bridge).** Both
+  footer variations kept, now sourced from block template parts: `parts/footer.html` (minimal) +
+  `parts/footer-home.html` (full nav columns + social + cookie notice). The classic `footer.php` /
+  `footer-home.php` are now thin shims — `block_template_part('footer'|'footer-home'); wp_footer();`
+  + `</body></html>`. **Key finding:** `block_template_part()` DOES resolve `parts/*.html` in a
+  classic theme (tested via `wp eval`), so no `do_blocks()` fallback needed — the parts render live
+  now AND are ready for the FSE flip (templates will reference them via `<!-- wp:template-part -->`).
+  `home_url()` links converted to **root-relative** (`/about` etc.) since parts can't run PHP —
+  bonus: domain-agnostic ahead of the davidawindham→davidwindham move. `theme.json` now declares
+  `templateParts` (footer, footer-home → area "footer"). Verified `/about/` (footer-home) + `/now/`
+  (footer) render correctly, 200, no errors. **Pattern established for the rest of the FSE migration:
+  author `parts/*.html`, bridge from the classic template via `block_template_part()`.**
+
 - **2026-06-19** — **Phase 3: headers consolidated to one.** Retired `header-home.php` (the
 - **2026-06-19** — **Phase 3: headers consolidated to one.** Retired `header-home.php` (the
   nested Font-Awesome sidebar/offcanvas nav). About + Studio now use the single `header.php`
   nested Font-Awesome sidebar/offcanvas nav). About + Studio now use the single `header.php`
   (flat Bootstrap-Icons horizontal nav) like the rest of the site — the full navigation lives
   (flat Bootstrap-Icons horizontal nav) like the rest of the site — the full navigation lives

+ 9 - 53
footer-home.php

@@ -1,55 +1,11 @@
-<div class="container-fluid footer footer-home dark">
-	<div class="container">
-		<div class="row">
-			<div class="col-md-4">
-				<ul style="float:left;margin-right:10px;">
-					<li><a href="<?php echo home_url( '/' ); ?>about"><span class="fa fa-file-text-o fa-fw"></span> About</a></li>
-					<li><a href="<?php echo home_url( '/' ); ?>desk/archive" title="Archive"><span class="fa fa-archive fa-fw"></span> Archive</a></li>
-					<li><a href="<?php echo home_url( '/' ); ?>studio/music/"><span class="fa fa-microphone fa-fw"></span> Audio</a></li>
-					<li><a href="https://davidwindham.com/rtc"><span class="fa fa-comment fa-fw"></span> Chat</a></li>
-					<li><a href="http://chess.davidwindham.com"><span class="chess-html">&#9814;</span> Chess</a></li>
-					<li><a href="http://code.davidawindham.com"><span class="fa fa-code fa-fw"></span> Code</a></li>
-					<li><a href="<?php echo home_url( '/' ); ?>contact"><span class="fa fa-envelope-o fa-fw"></span> Contact</a></li>
-				</ul>
-				<ul style="float:left;margin-right:10px;">
-					<li><a href="<?php echo home_url( '/' ); ?>desk"><span class="fa fa-pencil-square-o fa-fw"></span> Desk</a></li>
-					<li><a href="<?php echo home_url( '/' ); ?>mail/" title="Newsletter"><span class="fa fa-paper-plane-o fa-fw"></span> Email</a></li>
-					<li><a href="<?php echo home_url( '/' ); ?>contact/guests" title="Guestbook"><span class="fa fa-pencil-square fa-fw"></span> Guests</a></li>
-					<li><a href="<?php echo home_url( '/' ); ?>"><span class="fa fa-home fa-fw"></span> Home</a></li>
-					<li><a href="<?php echo home_url( '/' ); ?>studio/art/" title="Art"><span class="fa fa-paint-brush fa-fw"></span> Paint</a></li>
-					<li><a href="<?php echo home_url( '/' ); ?>pay"><span class="fa fa-credit-card fa-fw"></span> Pay</a></li>
-				</ul>
-				<ul style="float:left;margin-right:10px;">
-					<li><a href="http://photo.davidwindham.com" title="Photo"><span class="fa fa-camera-retro fa-fw"></span> Photo</a></li>
-					<li><a href="http://radio.davidawindham.com"><span class="fa fa-microphone fa-fw"></span> Radio</a></li>
-					<li><a href="<?php echo home_url( '/' ); ?>shop"><span class="fa fa-credit-card fa-fw"></span> Shop</a></li>
-					<li><a href="<?php echo home_url( '/' ); ?>about/analytics/" title="analytics"><span class="fa fa-tachometer fa-fw"></span> Stats</a></li>
-					<li><a href="<?php echo home_url( '/' ); ?>studio"><span class="fa fa-flask fa-fw"></span> Studio</a></li>
-					<li><a href="<?php echo home_url( '/' ); ?>til/" title="Today I Learned"><span class="fa fa-book fa-fw"></span> TIL</a></li>
-				</ul>
-			</div>
-		</div>
-		<div class="row mt-5">
-			<div class="col-md-4">
-				<ul class="social">
-					<li><a href="https://bsky.app/profile/davidwindham.com" class="twitter" rel="me"><span class="fa fa-2x fa-twitter-square"></span></a></li>
-					<li><a href="https://www.facebook.com/davidawindham" class="facebook"><span class="fa fa-2x fa-facebook-square"></span></a></li>
-          <li><a href="https://www.reddit.com/user/windhamdavid" class="reddit"><span class="fa fa-2x fa-reddit-square"></span></a></li>
-					<li><a href="https://github.com/windhamdavid" class="github" rel="me"><span class="fa fa-2x fa-github-square"></span></a></li>
-				</ul>
-			</div>
-			<div class="col-md-3 offset-sm-5">
-				<p class="small dim right">&copy; 2004-2026<br />
-				<p class="small dim right"><a href="<?php echo home_url( '/' ); ?>sitemap"><span class="fa fa-sitemap fa-fw"></span> Sitemap</a><br />
-				<span class="small dull right">This website uses cookies</span></p>
-			</div>
-		</div>
-	</div>
-	<div class="cookie-notification js-cookie-notification">
-		<p>By using this website, you agree to the use of<br />cookies and the <a href="https://davidawindham.com/privacy/">privacy policy</a>.</p>
-		<button class="btn btn-default" type="submit"><a href="#" class="js-cookie-notification-hide">Agree and dismiss</a></button>
-	</div>
-</div>
-<?php wp_footer(); ?>
+<?php
+/**
+ * Full footer (nav columns + social + cookie notice). The markup now lives in
+ * parts/footer-home.html (a block template part), shared with the FSE flip; it is
+ * rendered here for the classic theme via block_template_part().
+ */
+block_template_part( 'footer-home' );
+wp_footer();
+?>
 </body>
 </body>
 </html>
 </html>

+ 9 - 19
footer.php

@@ -1,21 +1,11 @@
-<div class="container-fluid footer">
-	<div class="container">
-		<div class="row">
-			<div class="col-md-4">
-				</div>
-			<div class="col-md-4">
-				<p class="dim"><p>
-			</div>
-			<div class="col-md-4">
-				<p class="small dim right">&copy; 2004-2026</p>
-			</div>
-		</div>
-	</div>
-	<div class="cookie-notification js-cookie-notification">
-		<p>By using this website, you agree to the use of<br />cookies and the <a href="https://davidawindham.com/privacy/">privacy policy</a>.</p>
-		<button class="btn btn-default" type="submit"><a href="#" class="js-cookie-notification-hide">Agree and dismiss</a></button>
-	</div>
-</div>
-<?php wp_footer(); ?>
+<?php
+/**
+ * Minimal footer. The markup now lives in parts/footer.html (a block template part),
+ * so it is shared with the FSE flip; it is rendered here for the classic theme via
+ * block_template_part(). Pages wanting the full footer use get_footer('home').
+ */
+block_template_part( 'footer' );
+wp_footer();
+?>
 </body>
 </body>
 </html>
 </html>

+ 54 - 0
parts/footer-home.html

@@ -0,0 +1,54 @@
+<!-- wp:html -->
+<div class="container-fluid footer footer-home dark">
+	<div class="container">
+		<div class="row">
+			<div class="col-md-4">
+				<ul style="float:left;margin-right:10px;">
+					<li><a href="/about"><span class="fa fa-file-text-o fa-fw"></span> About</a></li>
+					<li><a href="/desk/archive" title="Archive"><span class="fa fa-archive fa-fw"></span> Archive</a></li>
+					<li><a href="/studio/music/"><span class="fa fa-microphone fa-fw"></span> Audio</a></li>
+					<li><a href="https://davidwindham.com/rtc"><span class="fa fa-comment fa-fw"></span> Chat</a></li>
+					<li><a href="http://chess.davidwindham.com"><span class="chess-html">&#9814;</span> Chess</a></li>
+					<li><a href="http://code.davidawindham.com"><span class="fa fa-code fa-fw"></span> Code</a></li>
+					<li><a href="/contact"><span class="fa fa-envelope-o fa-fw"></span> Contact</a></li>
+				</ul>
+				<ul style="float:left;margin-right:10px;">
+					<li><a href="/desk"><span class="fa fa-pencil-square-o fa-fw"></span> Desk</a></li>
+					<li><a href="/mail/" title="Newsletter"><span class="fa fa-paper-plane-o fa-fw"></span> Email</a></li>
+					<li><a href="/contact/guests" title="Guestbook"><span class="fa fa-pencil-square fa-fw"></span> Guests</a></li>
+					<li><a href="/"><span class="fa fa-home fa-fw"></span> Home</a></li>
+					<li><a href="/studio/art/" title="Art"><span class="fa fa-paint-brush fa-fw"></span> Paint</a></li>
+					<li><a href="/pay"><span class="fa fa-credit-card fa-fw"></span> Pay</a></li>
+				</ul>
+				<ul style="float:left;margin-right:10px;">
+					<li><a href="http://photo.davidwindham.com" title="Photo"><span class="fa fa-camera-retro fa-fw"></span> Photo</a></li>
+					<li><a href="http://radio.davidawindham.com"><span class="fa fa-microphone fa-fw"></span> Radio</a></li>
+					<li><a href="/shop"><span class="fa fa-credit-card fa-fw"></span> Shop</a></li>
+					<li><a href="/about/analytics/" title="analytics"><span class="fa fa-tachometer fa-fw"></span> Stats</a></li>
+					<li><a href="/studio"><span class="fa fa-flask fa-fw"></span> Studio</a></li>
+					<li><a href="/til/" title="Today I Learned"><span class="fa fa-book fa-fw"></span> TIL</a></li>
+				</ul>
+			</div>
+		</div>
+		<div class="row mt-5">
+			<div class="col-md-4">
+				<ul class="social">
+					<li><a href="https://bsky.app/profile/davidwindham.com" class="twitter" rel="me"><span class="fa fa-2x fa-twitter-square"></span></a></li>
+					<li><a href="https://www.facebook.com/davidawindham" class="facebook"><span class="fa fa-2x fa-facebook-square"></span></a></li>
+          <li><a href="https://www.reddit.com/user/windhamdavid" class="reddit"><span class="fa fa-2x fa-reddit-square"></span></a></li>
+					<li><a href="https://github.com/windhamdavid" class="github" rel="me"><span class="fa fa-2x fa-github-square"></span></a></li>
+				</ul>
+			</div>
+			<div class="col-md-3 offset-sm-5">
+				<p class="small dim right">&copy; 2004-2026<br />
+				<p class="small dim right"><a href="/sitemap"><span class="fa fa-sitemap fa-fw"></span> Sitemap</a><br />
+				<span class="small dull right">This website uses cookies</span></p>
+			</div>
+		</div>
+	</div>
+	<div class="cookie-notification js-cookie-notification">
+		<p>By using this website, you agree to the use of<br />cookies and the <a href="/privacy/">privacy policy</a>.</p>
+		<button class="btn btn-default" type="submit"><a href="#" class="js-cookie-notification-hide">Agree and dismiss</a></button>
+	</div>
+</div>
+<!-- /wp:html -->

+ 20 - 0
parts/footer.html

@@ -0,0 +1,20 @@
+<!-- wp:html -->
+<div class="container-fluid footer">
+	<div class="container">
+		<div class="row">
+			<div class="col-md-4">
+				</div>
+			<div class="col-md-4">
+				<p class="dim"><p>
+			</div>
+			<div class="col-md-4">
+				<p class="small dim right">&copy; 2004-2026</p>
+			</div>
+		</div>
+	</div>
+	<div class="cookie-notification js-cookie-notification">
+		<p>By using this website, you agree to the use of<br />cookies and the <a href="/privacy/">privacy policy</a>.</p>
+		<button class="btn btn-default" type="submit"><a href="#" class="js-cookie-notification-hide">Agree and dismiss</a></button>
+	</div>
+</div>
+<!-- /wp:html -->

+ 5 - 1
theme.json

@@ -130,5 +130,9 @@
         "typography": { "fontWeight": "700" }
         "typography": { "fontWeight": "700" }
       }
       }
     }
     }
-  }
+  },
+  "templateParts": [
+    { "name": "footer", "title": "Footer", "area": "footer" },
+    { "name": "footer-home", "title": "Footer (Home)", "area": "footer" }
+  ]
 }
 }