Dynamic Featured Images in Cover Blocks: A Theme-Development Shortcut

Cover-style hero sections are a staple across the WordPress theme directory, and the trend carries over into the block theme space. Traditionally, building a cover template that pulls in a post’s featured image required custom PHP—a barrier for users who are not developers. Twenty Twenty, for instance, ships a dedicated cover template implemented in its template-parts/content-cover.php file to render full-width featured images with post meta.

Screenshot showing a single post with Twenty Twenty cover template.

The Shift to Code-Free Cover Layouts

Since WordPress 5.8, theme authors have been able to assemble similar hero sections using the block editor’s Cover block inside custom templates, with little to no PHP. Two themes illustrate the early approaches to this pattern. Twenty Twenty-Two hides a large image inside a pattern and references it from the header-dark-large part; Wabi takes a different route, using accent background colors and a 50px spacer block in its single.html template, with the color logic handled in assets/js/accent-colors.js.

Many other themes simply dropped a static Cover block into their templates. That worked, but it meant the featured image of each individual post still had to be added by hand if the goal was to feature it as the background for each single post.

Screenshot showing cover page thumbnails of Twenty Twenty-Two (left) and Wabi (right) themes.

WordPress 6.0 closed that gap by introducing a post featured image block that can be placed inside a Cover block. This allows any post’s or page’s featured image to function as the cover background dynamically, in a block-driven way. The cover background can then be styled further—for example, by applying duotone presets defined in theme.json.

Newer themes such as Archeo, Wei, and Frost have picked up this combination of Cover and post featured image blocks. The result is a hero region that updates automatically as you change the featured image on the post itself.

Screenshot showing cover page thumbnails of Wei (left) and Bright-mode (right) themes.

The Wei theme by Rich Tabor shows the pairing in a polished form. Its single.html template uses a Cover block that references the post’s featured image, and applies a duotone filter tied to the color scheme set for that post, which keeps images visually coherent with the surrounding palette. Brian Gardner’s Bright Mode theme applies a similar idea, pulling featured images into Cover blocks on single pages and augmenting them with custom block styles for shadows and a full-height option.

The Block Editor versus Custom PHP

The broader conversation about layout design has not settled. When WordPress redesigned its own marketing homepage, the process drew mixed reactions; one commenter noted that a designer was able to recreate a similar layout in under 20 minutes with the block editor, though only after reaching a level of familiarity with rows, groups, padding, and color assignments that many regular users would not have. The block editor has matured considerably, but it still is not a drop-in replacement for theme development experience at every complexity level. For the specific task of wiring a post’s featured image into a cover—a common need for cover templates and hero sections—the newer cover-plus-featured-image approach removes the PHP requirement and makes the behavior editable from the post editing screen.

Building Dynamic Cover Blocks for Block Themes

To add more visual interest to block themes, I extended the TT2 Gopher Blocks theme with three cover templates: author, category, and single-cover. These are positioned below the site header rather than blended into it, a layout approach seen on sites like BBC Future.

Creating Cover Header Patterns

The first step is designing cover header patterns for the author, single, and archive templates. If you're comfortable with the block editor, build the structure in the site editor. Otherwise, copy a pattern from the patterns directory into a post, modify it, and then convert it into a pattern file.

For the single post cover header, I built the markup in the site editor using a cover block with a product photo placeholder:

Screenshot of the WordPress UI with the Full Site Editor. A block is being assembled with post date, categories, and post title.

Next, copy that markup into a new file at /patterns/header-single-cover.php, adding the required pattern header (title, slug, categories, inserter settings):

<?php
    /**
     * Title: Header cover single
     * Slug: tt2gopher/header-cover-single
     * Categories: tt2gopher-header
     * Block Types: core/template-part/header
     * inserter: yes
     */
?>
    <!-- wp:cover {"url":"https://pd.w.org/2022/08/15062ed5f5707b5c5.85694718-2048x1536.jpg","id":100,"dimRatio":0,"overlayColor":"foreground","focalPoint":{"x":"0.40","y":"0.37"},"minHeight":50,"minHeightUnit":"vh","isDark":false,"align":"full","style":{"color":{"duotone":["#000000","#00a5ff"]},"spacing":{"margin":{"top":"0px","bottom":"0px"}}}} -->
    <div class="wp-block-cover alignfull is-light" style="margin-top:0px;margin-bottom:0px;min-height:50vh"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-100" alt="" src="https://pd.w.org/2022/08/15062ed5f5707b5c5.85694718-2048x1536.jpg" style="object-position:40% 37%"/><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}},"spacing":{"blockGap":"10px"}},"textColor":"base","layout":{"wideSize":"800px"}} -->
    <div class="wp-block-group has-base-color has-text-color has-link-color"><!-- wp:group {"style":{"spacing":{"blockGap":"10px"}},"textColor":"primary","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"},"fontSize":"small"} -->
    <div class="wp-block-group has-primary-color has-text-color has-small-font-size"><!-- wp:post-date {"textColor":"foreground"} /-->
    
    <!-- wp:paragraph -->
    <p>|</p>
    <!-- /wp:paragraph -->
    
    <!-- wp:post-terms {"term":"category","style":{"elements":{"link":{"color":{"text":"var:preset|color|foreground"}}}}} /--></div>
    <!-- /wp:group -->
    
    <!-- wp:post-title {"textAlign":"center","level":1,"style":{"typography":{"fontStyle":"normal","fontWeight":"400"}},"textColor":"foreground","fontSize":"max-60"} /--></div>
    <!-- /wp:group --></div></div>
    <!-- /wp:cover -->

To make the cover background dynamic, the key change is adding "useFeaturedImage":true to the cover block and removing the hard-coded image URL. In the demo, this replaced a photo from the WordPress photos directory on line 10:

<!-- wp:cover {"useFeaturedImage":true,"dimRatio":0,"overlayColor":"foreground","focalPoint":{"x":"0.40","y":"0.37"},"minHeight":50,"minHeightUnit":"vh","isDark":false,"align":"full","style":{"color":{"duotone":["#000000","#00a5ff"]},"spacing":{"margin":{"top":"0px","bottom":"0px"}}}} -->

Alternatively, use the editor's Replace button within the cover block and select the Use featured image option:

Screenshot of the WordPress UI with ‘Replace’ and ‘Use featured image’ selected.

The resulting header cover patterns then appear in the pattern inserter, available across templates, posts, and pages.

Archive and Author Headers

For the author.html template, I followed a similar workflow, structuring blocks in list view with a cover block as the background. Make sure the author profile has a biographical statement filled in — without it, the author block will render as blank space on the front end.

Screenshot of the WordPress UI for an Author page using a single post header cover.

The author cover header markup is:

    <!-- wp:cover {"url":"https://pd.w.org/2022/03/8256241eff74ef542.61868565.jpeg","id":226,"dimRatio":10,"focalPoint":{"x":"0.50","y":"0.75"},"minHeight":200,"minHeightUnit":"px","isDark":false,"align":"full","style":{"color":{"duotone":["#000000","#00a5ff"]}}} -->
    <div class="wp-block-cover alignfull is-light" style="min-height:200px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-10 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-226" alt="" src="https://pd.w.org/2022/03/8256241eff74ef542.61868565.jpeg" style="object-position:50% 75%"/><div class="wp-block-cover__inner-container"><!-- wp:group {"layout":{"inherit":true}} -->
    <div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"padding":{"top":"1rem","right":"2rem","bottom":"1rem","left":"2rem"}}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
    <div class="wp-block-group" style="padding-top:1rem;padding-right:2rem;padding-bottom:1rem;padding-left:2rem"><!-- wp:avatar {"size":70,"isLink":true,"align":"right","style":{"border":{"radius":"9999px"}}} /-->
    
    <!-- wp:group -->
    <div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"6px"}},"layout":{"type":"flex"},"fontSize":"large"} -->
    <div class="wp-block-group has-large-font-size"><!-- wp:paragraph {"textColor":"foreground","fontSize":"large"} -->
    <p class="has-foreground-color has-text-color has-large-font-size">Published by:</p>
    <!-- /wp:paragraph -->
    
    <!-- wp:post-author-name {"isLink":true,"style":{"typography":{"fontStyle":"large","fontWeight":"600"},"elements":{"link":{"color":{"text":"var:preset|color|background"}}}},"textColor":"foreground"} /--></div>
    <!-- /wp:group -->
    
    <!-- wp:post-author-biography {"textColor":"foreground","fontSize":"small"} /-->
    
    <!-- wp:separator {"backgroundColor":"foreground"} -->
    <hr class="wp-block-separator has-text-color has-foreground-color has-alpha-channel-opacity has-foreground-background-color has-background"/>
    <!-- /wp:separator --></div>
    <!-- /wp:group --></div>
    <!-- /wp:group --></div>
    <!-- /wp:group --></div></div>
    <!-- /wp:cover -->

The same pattern file can be adapted for tags and other taxonomies. The header-category-cover.php pattern for the category.html template is available on GitHub.

Building Templates in the Site Editor

WordPress 6.0 and Gutenberg 13.7 expanded template creation into the block editor, letting users without deep coding skills build custom templates. Combining the cover block with the post featured image block makes constructing hero-style templates straightforward.

Screenshot of the WordPress UI displaying available templates provided by TT2 Gopher Blocks – Single, Page, Index, Home, 404, Blank, and Archive.

For the author.html template, the header section contains a call to the author cover pattern, which renders the cover header with the author's name and biography overlay:

    <!-- wp:template-part {"slug":"header-small-dark","theme":"TT2-GOPHER-V2","tagName":"header"} /-->
    
    <!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"0","bottom":"0px"},"padding":{"bottom":"80px"},"blockGap":"0px"}},"className":"site-content"} -->
    <main class="wp-block-group site-content" style="margin-top:0;margin-bottom:0px;padding-bottom:80px">
    
        <!-- wp:pattern {"slug":"tt2gopher/header-author-cover"} /-->
    
    ...
    ...
    ...
    <!-- /wp:group -->
    ...

The resulting front-end views for the author.html and category.html templates show the cover headers positioned below the site header:

Screenshot of Author Page header (left) with author name, avatar, and biography. And screenshot of Category Page header (right).

Both templates' full code is on GitHub.

For single posts, the header-cover-single pattern is invoked below the site header section (line 3 of the template):

    <!-- wp:template-part {"slug":"header-small-dark","tagName":"header"} /-->
    
     <!-- wp:pattern {"slug":"tt2gopher/header-cover-single"} /-->
    
    <!-- wp:spacer {"height":32} -->
    <div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
    <!-- /wp:spacer -->
    ....
    ....
    ....

The front end of a single post with the cover header displays the featured image as the cover background:

Screenshot of TT2 Gopher Blocks Single Post with Header Cover Section Pattern.

The full single-cover.html template is on GitHub. Further walkthroughs are available on WP Tavern and Full Site Editing.

Resource Roundup

For those exploring dynamic covers further, the following materials cover featured image blocks, cover block bindings, and template building thoroughly:

Despite pushback from some WordPress community members, block themes are a promising direction. They lower the barrier for theme authors who lack deep PHP and JavaScript expertise to create layouts with hero covers and complex template structures using patterns and style variations alone.

New theming tools such as the create block theme plugin let users create themes, overwrite files, generate blank or child themes, and modify style variations straight from the block editor UI. Recent Gutenberg iterations also expose fluid typography, layout alignment, and other style controls purely through theme.json — no custom CSS or JavaScript required.