Core Framework/practice/Hands-On Challenges

Solution: Page Title and Sidebar

A complete Page template combining the current Page title, a Gutenberg body slot, and a fixed responsive sidebar.

On This Page

This completes Connect the Page Title and Add a Sidebar. Replace the recipe's Page component with this version and keep the same file and export name.

Complete Page template

src/app/pages/AboutStay.tsx

1import { BlockArea, useWpTitle } from "@forgewp/react"
2
3export function AboutStay() {
4  const title = useWpTitle()
5
6  return (
7    <main className="mx-auto max-w-6xl px-6 py-16">
8      <header className="mb-10 border-b border-slate-200 pb-8">
9        <p className="text-sm font-semibold uppercase tracking-wide text-slate-500">
10          Welcome to our hotel
11        </p>
12        <h1 className="mt-3 text-4xl font-bold text-slate-950 md:text-5xl">
13          {title}
14        </h1>
15        <p className="mt-5 max-w-2xl text-lg leading-relaxed text-slate-600">
16          Thoughtful spaces, local character, and a warmer welcome.
17        </p>
18      </header>
19      <div className="grid items-start gap-10 md:grid-cols-3">
20        <div className="min-w-0 space-y-6 text-slate-700 md:col-span-2 [&_h2]:text-2xl [&_h2]:font-bold [&_p]:leading-relaxed">
21          <BlockArea name="about-body" />
22        </div>
23        <aside className="border border-slate-200 bg-slate-50 p-6">
24          <h2 className="text-xl font-bold text-slate-950">Plan your stay</h2>
25          <p className="mt-4 leading-relaxed text-slate-600">
26            Contact our team to discuss arrival times and make yourself at home.
27          </p>
28        </aside>
29      </div>
30    </main>
31  )
32}

Why it works

Table · 2 columns


Binding or layout choice	Result
`useWpTitle()` inside the Page component	Reads the Page currently being rendered
One `BlockArea`	Renders that Page's saved body in one location
Sidebar beside the body wrapper	Keeps fixed information outside the editor-composed body
`md:grid-cols-3` with `md:col-span-2`	Gives the body two columns and the sidebar one on wider screens
`min-w-0` on the body column	Lets wide content fit its grid region and use its own overflow behavior

The generated PHP Page wrapper enters the WordPress Loop before including the fragment, giving both bindings the correct Page context. Each Page assigned this template supplies its own title and body.

Verify in WordPress

Theme terminal: check and export the solution

pnpm typecheck
pnpm forgewp export --validate --strict

Update the test site's theme and confirm the About Stay template is selected.
Change the Page title and add a distinctive body paragraph. Save and view the Page.
Confirm the title appears in the main heading and the paragraph appears beside the fixed sidebar on a wider screen.
Reload the editor, reorder body blocks, and confirm their saved order on the visitor page.
Assign the same template to a second Page with different content and compare their URLs.
Check a narrow viewport, where the sidebar follows the body.

Editing the native Page title controls this example's main heading. The eyebrow, introduction, and sidebar are maintained in the React source. For additional named content fields, continue with Page Content Slots and Editable Fields.