Pattern Paste
Subscribe

Core Patterns Page header

FreeStandard

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.

All patterns

Loading patterns…

Theme
Preview size
Look
Twenty Twenty-Five·1280px

Manrope typefacergb(255, 255, 255) ground1280px viewport

Start here

What to change first

  1. The date column's width. It is 26%.
  2. core/post-terms. Shipped with term: category.
  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).
  5. The finish. Ship the base where the post deserves an announcement, and header-paper where the page should stay quiet.

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.

Theme handoff

What comes from where

From your theme

  • The typeface.
  • Your colours.
  • Your spacing scale.
  • The category link's colour is NOT inherited, on purpose.

Set by this pattern

  • Full bleed with a 1240px measure
  • The plate is the only lit ground
  • h1,
  • Bottom alignment.

Full pattern notes

Why it works, and how it is built

Open a topic for the complete design reasoning, editing guidance and implementation notes.

Design rationaleComposition, intent and nearest alternatives

Overview

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.

Why it is not the other two page headers

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.

Make it yoursVariations and the edits to make first

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.
Theme behaviourInheritance, fixed decisions and contrast

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.
Technical notesBlock mechanics, responsive behaviour and constraints

It shows YOUR post, and the preview is our sample content

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.

Notes

  • 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 7.0. No core/query-total anywhere: it is a recent core block, and an older WordPress parses it as core/missing.

Questions

Post header: common questions

Does Post header need a plugin?

No. It is built only from core WordPress blocks (column, columns, group, paragraph, post-author-name, post-date, post-terms and post-title), so it pastes into the block editor with nothing to install.

Will Post header match my theme?

Yes. It names no colour or font of its own: every colour, size and space is a preset from your theme, so it takes your theme’s palette and type when pasted.

How many variations does Post header have?

2: Plate on ink and Ruled slip. Each is its own markup; choose one in the toolbar above the preview before you copy.

Is Post header free?

Yes. It is one of 64 free Core Patterns: copy it and it is yours to keep and edit.

Which WordPress version does it need?

Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.

The markup

Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks. This is the file as authored; the copy button on the stage applies the finish you chose there.

5,303 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))","text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"},"blockGap":"0"},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background has-link-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));background-color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));padding-top:var(--wp--preset--spacing--50);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:var(--wp--preset--spacing--50);padding-left:clamp(1.25rem, 4vw, 4rem)"><!-- wp:columns {"verticalAlignment":"bottom","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|40","left":"var:preset|spacing|50"}}}} -->
<div class="wp-block-columns are-vertically-aligned-bottom"><!-- wp:column {"verticalAlignment":"bottom","width":"74%"} -->
<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:74%"><!-- wp:group {"style":{"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|50","right":"var:preset|spacing|50"},"blockGap":"0"},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-text-color has-background has-link-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--50)"><!-- wp:post-terms {"term":"category","style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"elements":{"link":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"}}},"typography":{"fontSize":"clamp(0.75rem, 0.85vw, 0.8125rem)","fontWeight":"600","letterSpacing":"0.22em","lineHeight":"1.6","textTransform":"uppercase"}}} /-->

<!-- wp:post-title {"level":1,"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"fontSize":"clamp(2.25rem, 5.4vw, 4.25rem)"}}} /-->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"margin":{"top":"var:preset|spacing|30"},"padding":{"top":"var:preset|spacing|30"},"blockGap":"0.75rem"}},"layout":{"type":"flex","flexWrap":"wrap","verticalAlignment":"bottom"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;margin-top:var(--wp--preset--spacing--30);padding-top:var(--wp--preset--spacing--30)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.75rem, 0.85vw, 0.8125rem)","fontWeight":"600","letterSpacing":"0.22em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:0;font-size:clamp(0.75rem, 0.85vw, 0.8125rem);font-weight:600;letter-spacing:0.22em;text-transform:uppercase">Words by</p>
<!-- /wp:paragraph -->

<!-- wp:post-author-name {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"typography":{"fontSize":"clamp(1rem, 1.15vw, 1.125rem)","lineHeight":"1.4"}}} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"bottom","width":"26%"} -->
<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:26%"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"0.5rem"}},"typography":{"fontSize":"clamp(0.75rem, 0.85vw, 0.8125rem)","fontWeight":"600","letterSpacing":"0.22em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:0.5rem;font-size:clamp(0.75rem, 0.85vw, 0.8125rem);font-weight:600;letter-spacing:0.22em;text-transform:uppercase">Published</p>
<!-- /wp:paragraph -->

<!-- wp:post-date {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"typography":{"fontSize":"clamp(1.0625rem, 1.3vw, 1.25rem)","lineHeight":"1.3"}}} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
Variation: Ruled slip
5,246 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"},"blockGap":"0"},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background has-link-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:var(--wp--preset--spacing--50);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:var(--wp--preset--spacing--50);padding-left:clamp(1.25rem, 4vw, 4rem)"><!-- wp:columns {"verticalAlignment":"bottom","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|40","left":"var:preset|spacing|50"}}}} -->
<div class="wp-block-columns are-vertically-aligned-bottom"><!-- wp:column {"verticalAlignment":"bottom","width":"74%"} -->
<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:74%"><!-- wp:group {"style":{"border":{"color":"currentColor","style":"solid","width":"1px"},"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|50","right":"var:preset|spacing|50"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-text-color has-border-color" style="border-color:currentColor;border-style:solid;border-width:1px;color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--50)"><!-- wp:post-terms {"term":"category","style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"elements":{"link":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"}}},"typography":{"fontSize":"clamp(0.75rem, 0.85vw, 0.8125rem)","fontWeight":"600","letterSpacing":"0.22em","lineHeight":"1.6","textTransform":"uppercase"}}} /-->

<!-- wp:post-title {"level":1,"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"fontSize":"clamp(2.25rem, 5.4vw, 4.25rem)"}}} /-->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"margin":{"top":"var:preset|spacing|30"},"padding":{"top":"var:preset|spacing|30"},"blockGap":"0.75rem"}},"layout":{"type":"flex","flexWrap":"wrap","verticalAlignment":"bottom"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;margin-top:var(--wp--preset--spacing--30);padding-top:var(--wp--preset--spacing--30)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.75rem, 0.85vw, 0.8125rem)","fontWeight":"600","letterSpacing":"0.22em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:0;font-size:clamp(0.75rem, 0.85vw, 0.8125rem);font-weight:600;letter-spacing:0.22em;text-transform:uppercase">Words by</p>
<!-- /wp:paragraph -->

<!-- wp:post-author-name {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"typography":{"fontSize":"clamp(1rem, 1.15vw, 1.125rem)","lineHeight":"1.4"}}} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"bottom","width":"26%"} -->
<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:26%"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0","bottom":"0.5rem"}},"typography":{"fontSize":"clamp(0.75rem, 0.85vw, 0.8125rem)","fontWeight":"600","letterSpacing":"0.22em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:0.5rem;font-size:clamp(0.75rem, 0.85vw, 0.8125rem);font-weight:600;letter-spacing:0.22em;text-transform:uppercase">Published</p>
<!-- /wp:paragraph -->

<!-- wp:post-date {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"typography":{"fontSize":"clamp(1.0625rem, 1.3vw, 1.25rem)","lineHeight":"1.3"}}} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
Back to Core Patterns

Continue exploring

Next in Page header

Explore all 6 Page header patterns

Page header rule rendered in Twenty Twenty-FiveShot in Twenty Twenty-FivePage headerNo plugin needed

Page header rule

The opening of an interior page, and nothing more: a tiny widely tracked breadcrumb, the page title at display size directly under it, one line of orientation held to a reading measure, and a currentColor hairline closing the whole thing.

Page headerPreview pattern
Page header cover strip rendered in Twenty Twenty-FiveShot in Twenty Twenty-FivePage headerNo plugin needed

Page header cover strip

An interior-page opener with a small location label, h1 title and short introduction in a narrow full-height plate of your theme's base beside a broad uninterrupted photograph.

Page headerPreview pattern
Facts beside the title rendered in Twenty Twenty-FiveShot in Twenty Twenty-FivePage headerNo plugin needed

Facts beside the title

An interior-page opening that splits in two: a small tracked kicker and the page title hold the left 46% on their own, and the right 54% carries four facts as a ruled ledger, label against value on each line, divided by currentColor hairlines and closed by one at the foot.

Page headerPreview pattern