[Library] Page header

Catalogue accessStandard

Post header

Single-post furniture, built as a lit plate on an unlit band: the post's category, title and byline sit on a paper plate held to 74% of the measure, while the publication date hangs outside it on the ink, aligned to the plate's foot. Dynamic core blocks, so it shows the post it is placed on; the preview here is our sample content. Drop it into a single template, above the content. States no colour and no font of its own.

Variation View
Before you copy
Open in a new window

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

Single-post furniture: the post's category, title, byline and date, set as a lit plate on an unlit band. Core blocks only, but four of them are DYNAMIC: core/post-terms, core/post-title, core/post-author-name and core/post-date, plus core/group and core/columns around them.

The signature moment

The date is outside the plate

The plate holds three of the four facts and the fourth hangs beside it. The band runs edge to edge in your contrast colour; the plate is your base colour and takes 74% of the 1240 measure, so the ink shows as a wide margin down the right. The publication date sits in that margin, bottom-aligned with the plate's foot, in the band's own light type. Nothing else is out there.

That is the composition, and it is doing two jobs. It gives the header an asymmetry that survives colourlessness, and it puts the one fact a reader scans for where a reader scans for it, without spending a row of the plate on it.

Inside the plate the ramp is a collapse, on the same principle as page-header-rule: a 13px category at 0.22em, then the title at up to 68px, then a currentColor hairline, then the byline back at 13px against the author name at 18px.

What it inherits from your theme

  • The typeface. No font family is stated. The effect is tracking, scale and the plate.
  • Your colours. The band asks for contrast and the plate for base, each ending on a colour WordPress itself guarantees, so neither can resolve to nothing. The hairline in the plate is currentColor.
  • Your spacing scale. Every vertical measure is a spacing preset, so the header is roomier in Twenty Twenty-Four than in Twenty Twenty-Five and that is inheritance working. Measured at 1400: 570px in Twenty Twenty-Four, 384px in Twenty Twenty-Five.
  • The category link's colour is NOT inherited, on purpose. core/post-terms always renders anchors, and an anchor carries a colour rule of its own that beats anything the group hands down. So the block states style.elements.link.color.text as well as its text colour, and the category is the same ink as the title in every theme.

What it decides for itself

  • Full bleed with a 1240px measure, and a plate at 74% of it.
  • The plate is the only lit ground, so every link in the pattern sits on paper. That is deliberate: a theme paints its links from theme.json, and a category link on an ink ground can land ink on ink with nothing to warn you.
  • h1, with its own explicit colour, because a theme's heading element style beats a colour inherited from the wrapping group.
  • Bottom alignment. The columns row is verticalAlignment: bottom and both columns restate it, because a columns-level alignment alone does nothing on the front end.

What to change first

  1. The date column's width. It is 26%. A long date format wants more.
  2. core/post-terms. Shipped with term: category. Change it to post_tag for a tags header, or delete it and the collapse starts at the title.
  3. The byline label. "Words by" is an ordinary paragraph beside core/post-author-name, so it takes any wording; the author's name is the dynamic half.
  4. The title ceiling. clamp(2.25rem, 5.4vw, 4.25rem). Long post titles are the normal case here, so this is lower than a page header's; raise it only if your titles are short.
  5. The finish. Ship the base where the post deserves an announcement, and header-paper where the page should stay quiet.
Why it is not the other two page headers62 words

page-header-rule and page-header-meta open an INTERIOR PAGE and carry text somebody typed. This one opens a POST and carries data WordPress resolved, which is the whole reason it exists, and it is the only header in the section with a filled ground. article-opener is a drop cap and a standfirst: furniture for the article's first paragraph rather than for the page's title.

It shows YOUR post, and the preview is our sample content151 words

This is the first thing to understand about it. A static pattern's preview holds the same words the buyer pastes; this one holds whatever post it is rendered on. The preview on the product page is our preview site's own seeded content, so the category reads "Field Notes", the title reads "The weight of a line" and the byline reads "Dana Rivera". None of that is in the markup you paste. Paste it and it prints your post.

It belongs in a template, not in a post. The four dynamic blocks read the post from their block context, which WordPress supplies inside a single post template (Appearance, Editor, Templates, Single Posts) or inside a query loop. Pasted into the body of one post it prints nothing at all, with no warning anywhere, which is exactly the silent failure this catalogue refuses; so it is said here and on the product page.

Notes57 words
  • Core blocks only: group, columns, column, paragraph, post-terms, post-title, post-author-name, post-date. No plugin, no script.
  • Every colour is a fallback chain ending on a guaranteed colour; the only rule in the pattern is currentColor.
  • Valid at WordPress 6.6.7 and 7.0.4. No core/query-total anywhere: it does not exist at 6.6 and parses as core/missing there.
Back to the library

Continue exploring

Next in Page header

Explore all 4 Page header patterns