How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images

Use case examples (Wei, Bright Mode)

Though the block editor has come a long way, there are still growing pain points to most theme developers and ordinary users to create and design complex layouts with it.

Single post cover header pattern

Step 1: Using FSE interface, let’s create a new blank file and start building block structure as shown on the left panel.

Alternatively, this could be done in a post or page first, and then copy and paste the markup into a pattern file, later.

Step 2: Next, to covert the above markup into a pattern, first we should copy its code markup and paste into a new /patterns/header-single-cover.php in our code editor. We should also add required pattern file header markup (e.g., title, slug, categories, inserter, etc.).

Here is the entire code of the /patterns/header-single-cover.php file:

Alternatively, the filler image could also be changed by clicking Replace and selecting Use featured image option:

Now, the header cover patterns should be visible in the patterns inserter panel for use anywhere in the templates, posts, and pages.

Archive cover headers

First, let’s create the archive cover header pattern for author.html the template as well, following the above workflow. In this case, I am creating this in a new blank page, by adding blocks (as shown below in list view):

In the background for the cover, I used the same image used in the single post header cover.

Because we would like to display a short author biography on the author block, a biographical statement should also be added to the user profile page, or else a blank space will be displayed in the front-end.

The following is the markup code of the header-author-cover, that we will use pattern, in the next step:

To covert the markup into a header-author-cover pattern, we should add the required pattern file header markup as described earlier. By editing the header-author-cover.php pattern, we can create similar header covers for tags, taxonomy, and other custom templates.

Author template with cover block

Top (header section) markup of the author.html template is shown below (line 6):

Here are screenshots of cover headers for the author.html and category.html templates:

Single post with cover block

To display cover block in our single post, we have to call the header-cover-single pattern below the header section (line 3):

Here is a screen capture showing the front-end view of the single post with the header cover section:

There you have it!

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

source

If you need help creating a digital marketing strategy for your business, don’t hesitate to contact one of Digidude’s consultants.