Dynamic Cover Template in WordPress Theme: Use featured image blocks to enhance user experience

Many WordPress themes feature cover images, which is a popular feature. This trend is also evident in screenshots of the block theme catalog.

Taking the Twenty Twenty theme as an example, it contains a cover template that can be used in single articles and pages. Featured images of the article will be displayed at the top, spanning the entire browser screen, with the article title and other metadata below. Cover templates allow the creation of content that is different from the traditional way of displaying content.

Currently, creating a cover template requires writing PHP code, such as the cover template for Twenty Twenty default theme. In the template-parts/content-cover.php file, it contains code to display content when using the cover template.

For ordinary WordPress users who are not proficient in PHP, the only option is to use plugins like Custom Post Type UI, as shown in the video.

Cover block in block theme

Starting with WordPress 5.8, topic authors can use the cover block of the block editor to create a custom template (such as single posts, authors, categories, etc.) and include it in the topic without writing or just a small amount of code.

Before diving into how to create large cover blocks in block theme templates, let's briefly take a look at the two block themes Twenty Twenty-Two and Wabi by Rich Tabor.

Twenty Twenty-Two implements large titles by adding a hidden image as schema storage in the header-dark-large section. In the Wabi theme, the large-title background color of a single article is achieved by emphasizing the background color and a 50px height interval block. Emphasizing colors are managed by assets/js/accent-colors.js files.

Many other themes choose to use cover blocks to create top cover blocks, which allows the user to change the background color and add static images without writing any code. In this way, if you want to use the featured image of the article as the background image of a single article, you must manually add the image to each single article.

Cover block with dynamic article featured pictures

WordPress 6.0 provides a cool featured picture cover block feature that allows the use of featured pictures of any article or page as the background image of the cover block.

In the short video below, Automattic engineers discussed how to add featured images to the cover block and demonstrated them with the Archeo theme as an example:

The picture blocks containing the special images of the article can be further customized using the two-tone colors in theme.json.

User case (Wei, Bright Mode)

When browsing thumbnail images in the block theme directory, we see that most images contain large cover title blocks. If you dig deeper into their template files, you will see that they use cover blocks with static image backgrounds.

Some recently developed topics use cover blocks with backgrounds of dynamic article featured images (e.g., Archeo, Wei, Frost, Bright Mode, etc.). A brief overview of this new feature can be found in the GitHub video.

Rich Tabor combines the dynamic accent color features of the Wabi theme with cover and post featured image blocks, further expanding his creativity in his new topic to display dynamic cover images from a single post.

In his Wei Announcement article, Rich Tabor wrote: "Background the scenes, the single.html template uses a cover block that takes advantage of the featured images of the article. Then, a two-tone is applied through the color scheme assigned to the article. This way, almost any image will look good."

If you want to have a deeper look at the title cover blocks of Wei themes and learn how to create your own cover blocks, here is a short video from Fr?nk Klein (WP Development Courses) that explains its creation process step by step.

Similar to Wei theme, Brian Gardner also used a cover block with post featured image blocks in his recent Bright Mode theme to show compelling content and bright colors.

Brian told WPTavern: "His favorite theme is how cover blocks are used on a single page. It pulls featured images into the cover block and offers custom block styles for shadow and full height options. …I feel like this really shows the possibilities of modern WordPress."

For more details, please visit their demo website and the full review of Brian's Bright Mode theme.

Design complex layouts using the block editor

Recently, WordPress released a new block editor for designing login home pages and download pages. The announcement sparked various reactions from readers, including Matt Mullenweg of Automatic, who commented on the 33 days it took to design and publish such a "simple page". You can find other behind-the-scenes discussions here.

In response, Pootlepress's Jamie Marsland created this YouTube video, and he recreated a nearly identical homepage in nearly 20 minutes.

WP Travern's Sarah Gooding commented on Marsland's video, "He can be said to be a veteran user of the block editor. He can quickly adjust rows, columns, and groups, adjust pads and margins as needed, and assign corresponding design colors to each block. Currently, most regular WordPress users cannot do this."

Although block editor has made great progress, there are still some difficulties with creating and designing complex layouts for most theme developers and average users.

Add enhancements to TT2 Gopher blocks

In this section, I will walk you through how to add enhancements to the TT2 Gopher Blocks theme I mentioned in my previous post. Inspired by the cover blocks in the theme described earlier, I wanted to add three cover templates (author, category, and single page cover) to the theme.

When browsing the website, we will notice two types of cover titles. The most common title is that the cover block is fused with the website title (site title and top navigation) into the cover block (e.g., Twenty Twenty, Twenty Twenty-Two, Wei, Wabi, Frost, Bright Mode, etc.). We will also find that the title cover block does not blend with the website title, but is located directly below it, such as the BBC Future website. For the TT2 Gopher Blocks theme, I chose the latter.

Create cover title mode

First, let's create a cover title pattern for author, single article, and other (category, label) templates using the cover block. We then convert them to patterns and call the corresponding title cover pattern into the template.

If you are familiar with Block Editor, design your title block with Cover Blocks in the Site Editor and convert the cover title code to a pattern. However, if you are not familiar with the FSE editor, the easiest way is to copy the pattern from the pattern directory in the article, make the necessary modifications, and then convert it to the pattern.

In my previous CSS-Tricks article, I discussed in detail the creation and use of block patterns. Here is an overview of the workflow for creating a single article cover title pattern:

Single article cover title mode

Step 1: Using the FSE interface, let us create a new blank file and start building the block structure shown in the left panel.

Alternatively, this can be done first in an article or page, and then copy and paste the markup into the schema file.

Step 2: Next, to convert the above mark into mode, we should first copy its code mark and paste it into a new file in the code editor. We should also add the required schema file title tags (e.g., title, slug, category, inserter, etc.). /patterns/header-single-cover.php

The following is the complete code of the

file: /patterns/header-single-cover.php

<?php /**
     * Title: Header cover single
     * Slug: tt2gopher/header-cover-single
     * Categories: tt2gopher-header
     * Block Types: core/template-part/header
     * inserter: yes
     */
?>
<div style="margin-top:0px;margin-bottom:0px;min-height:50vh">
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174157159443067.jpg" class="lazy" alt="" data-object-fit="cover" data-object-position="40% 37%"   style="max-width:90%">
    <div>
        <div>
            <div>


                <p>|</p>


            </div>


        </div>
    </div>
</div>

Step 3: For this demonstration, I used this image from the photos directory as the fill background image and applied the Midnight two-tone color. To dynamically use the article featured image, we should add before dimRatio:50 by replacing the above-mentioned fill image link so that line 10 looks like this: "useFeaturedImage":true

<code></code>

Alternatively, you can also change the fill image by clicking

and selecting to use the featured image option: Now, title cover mode should be visible in the Mode Insert Panel and can be used anywhere in templates, articles, and pages.

Archive cover title Inspired by this WP Tavern article and a step-by-step walkthrough of creating the author template title, I wanted to create a similar cover title and add it to the TT2 Gopher topic.

First, let's create an archive cover title pattern for the author.html template, following the above workflow. In this case, I create it in a new blank page by adding a block (as shown in the list view below):

In the background of the cover, I used the same image used in the cover of the single post title.

Because we want to display a short author profile in the author block, we should add a biographical statement to the user profile page, otherwise the front end will show a blank space.

The following is the tag code for header-author-cover we will use as the pattern:

<?php /**
     * Title: Header cover single
     * Slug: tt2gopher/header-cover-single
     * Categories: tt2gopher-header
     * Block Types: core/template-part/header
     * inserter: yes
     */
?>
<div style="margin-top:0px;margin-bottom:0px;min-height:50vh">
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174157159443067.jpg" class="lazy" alt="" data-object-fit="cover" data-object-position="40% 37%"   style="max-width:90%">
    <div>
        <div>
            <div>


                <p>|</p>


            </div>


        </div>
    </div>
</div>

To convert the tag to header-author-cover mode, we should add the required pattern file title tag as described earlier. By editing the header-author-cover.php mode, we can create similar cover titles for labels, taxonomy, and other custom templates.

header-category-cover.php mode is available on GitHub in my category.html template.

Create templates using cover blocks

WordPress 6.0 and most recently Gutenberg 13.7 extend template creation capabilities into the block editor, so many WordPress users can now create their custom templates even without in-depth coding knowledge.

For more details and use cases, see Justin Tadlock's comprehensive customization instructions.

The block editor allows the creation of various types of templates, including cover templates. Let's briefly outline how to combine cover blocks and post featured image blocks with the new template UI to easily create various types of cover custom templates without or with a small amount of coding skills.

Creating templates is much easier with Gutenberg 13.7. How to create block templates in code and in site editor are described in the topic manual and in my previous post.

Author template with cover block

The top (title block) mark of the template is as follows (line 6): author.html

<code></code>

The following is a screenshot of the cover title of the

and author.html templates: category.html

The complete code for these two templates can be found on GitHub.

Single article with cover block To display the cover block in a single article, we must call the

mode (line 3):

header-cover-single

This is a screenshot showing the front-end view of a single post with a title cover block:

<code><div style="min-height:200px">
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174157159750414.jpeg" class="lazy" alt="" data-object-fit="cover" data-object-position="50% 75%"   style="max-width:90%">
    <div>
        <div>
            <div style="padding-top:1rem;padding-right:2rem;padding-bottom:1rem;padding-left:2rem">


                <div>
                    <div>
                        <p>Published by:</p>


                    </div>



                    <hr>
                </div>
            </div>
        </div>
    </div>
</div>
</code>

The full code for the

template is available on GitHub.

single-cover.html You can find more step-by-step walkthrough tutorials on creating hero title post blocks and using post featured image background cover blocks on the

WP Tavern

and Full Site Editing websites. That's it!

Useful Resources

Featured picture cover block

• Article featured picture block (WordPress support)
• Use article featured images with cover block YouTube (Dave on WP)
• Step-by-step tutorial on cover blocks (WordPress support)
• Featured cover blocks and the future of binding data to universal WordPress blocks (WP Tavern)
• Customize single article layout with WordPress Gutenberg (Pootlepress)
• Dynamicize the cover block and add featured image bindings #39658 (GitHub)

Blog Posts

• Featured cover blocks and the future of binding data to universal WordPress blocks (WPTavern)
• Leave an Impression: How to Use Blocks to Build Article Hero Title (WPTavern)
• Core Editor Improvement: Use more template options for deeper customization (Make WordPress Core)

Although block themes have been heavily boycotted by members of the WordPress community in general, I think they are also the future of WordPress. Using block themes, even without in-depth coding skills and mastery of PHP and JavaScript languages, amateur theme authors can now use the hero cover blocks combined with pattern and style variants described in this article to create themes with complex layouts.

As an early Gutenberg user, I was very excited about new theme tools (like create block theme plugins, etc.) that allow theme authors to implement the following functions directly from the block editor UI without writing any code:

• (i) Create
• (ii) Overwrite the theme file and export
• (iii) Generate blank theme or sub-theme, and
• (iv) Modify and save the style variation of the current theme

In addition, recent versions of the Gutenberg plugin allow for smooth typography and layout alignment and other styling controls to be enabled using only theme.json files (no JavaScript and one-line CSS rules required).

Thank you for reading, please share your comments and thoughts below!

The above is the detailed content of How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images. For more information, please follow other related articles on the PHP Chinese website!