[Library] 404

Catalogue accessStandard

404 search

A 404 that offers the one thing a lost visitor can use: a working search field set at display size and running the full measure, so the field is the largest thing on the page and the apology is the caption above it. Under a rule, three recent posts from your own site, dated. The field and the three entries are dynamic core blocks, so they search and list your content; the preview here is sample data. 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

A 404 that gives a lost visitor something to do: a working core/search at display size, and three recent posts from a core/query under a rule.

The signature moment

The field is the biggest thing on the page

The search input is set at up to 48px and runs the whole 1240 measure, and the apology is the caption above it. Every other 404 in this catalogue makes a mark out of the number. Here the number is a 13px tracked label, the headline is 38px, the instruction is 18px, and then the largest object on the page is a form control. The scale ramp runs the wrong way on purpose, and that inversion is the whole design: the page stops being an announcement that something is missing and becomes the tool for finding it.

The floor is held at 28px so the field is still the largest thing at 390, where the headline is 24px.

Under it, one currentColor rule, a 13px tracked label, and three dated entries in a grid that reflows from three columns to one. They are unruled, because a ruled index is what error-split does, and because after a rule that long the page has had enough structure.

What it inherits from your theme

  • The typeface. No font family is stated.
  • Your colours. The band asks for base and the type for contrast, both ending on a colour WordPress guarantees. The one rule is currentColor.
  • The field itself. Its border, its background and its submit button are your theme's form styling, and the pattern deliberately states no colour on the search block. Measured: a text colour stated on core/search is copied onto the SUBMIT BUTTON as well as the input, and Twenty Twenty-Four had already given that button a contrast background, so a contrast chain painted the magnifier the same colour as the button behind it, ratio 1.0. What this pattern states on the search block is its size and nothing else.

What it decides for itself

  • Full bleed with a 1240px measure, the message held to a 40rem column at the left, the field the full width under it. Measured at 1400 in Twenty Twenty-Four: 753px; at 390: 528px, no horizontal overflow.
  • minimumColumnWidth: 22rem on the post template's grid rather than a fixed column count, so three entries become one column on a phone instead of three squeezed ones.
  • h1, with its own explicit colour, because a theme's heading element style beats a colour inherited from the wrapping group.
  • Three posts, newest first, stated in the query rather than inherited.

What to change first

  1. The field's ceiling. clamp(1.75rem, 3.6vw, 3rem). It is the signature; lower it and the pattern becomes an ordinary 404 with a search box.
  2. The headline and the instruction. Both are ordinary text.
  3. The number of entries. perPage on the query. Four still fits the grid.
  4. The query's terms. Change postType, or add a category, if your 404 should point at something more specific than "recent".
  5. The finish. Ship the base where the search should dominate, and error-column where the page has to stay short.
Why it is not error-404 or error-split67 words

error-404 is one centred numeral at extreme size and nothing else. error-split is left-aligned, with the numeral huge on one side and a ruled index of destinations on the other, and it deliberately has no search field. This one has no numeral at display size at all, and it is the only 404 in the catalogue that is dynamic: it queries the site it is installed on.

It shows YOUR site, and the preview is our sample content88 words

The field searches your content, and the three entries are your three most recent posts, dated. The preview on the product page is our preview site's seeded writing. Nothing in the pattern names a post.

Unlike the other dynamic patterns in this batch, this one needs no post context: the query states its own terms rather than inheriting a template's, which is right for a 404 because a 404 has no query to inherit. So it renders wherever it is pasted, and it belongs in the 404 template.

Notes47 words
  • Core blocks only: group, paragraph, heading, search, query, post-template, post-date, post-title, column, columns. No plugin, no script.
  • No core/query-total: it does not exist at WordPress 6.6 and parses as core/missing there.
  • Valid at WordPress 6.6.7 and 7.0.4, base and variation, 13 and 14 blocks.
Back to the library

Continue exploring

Next in 404

Explore all 3 404 patterns