Add a Theme image to A Block Theme

Creating a WordPress Block theme? Looking to include your unique branding into your custom theme? Well look no further this post is for you!

Block Theme Template’s and Template Parts

Before you add an image to your block theme template, you might want to learn how to create block theme templates first. Check out the WordPress documentation here. It’s pretty simple to get started, so don’t over think it.

Just add a folder to your project root called /templates and then insert whichever templates you want to include, for example index.html, 404.html and so on.

Your file structure could look like this:

my-theme/templates/index.html

my-theme/templates/404.html

Don’t forget about your theme.json customTemplates attribute!

The easiest way to build block theme templates is to start with a blank index.html file in the templates folder. Next, in the site editor, add the blocks you want to the index.html visually. From there you can navigate to the sidebar on the right side of the Site Editor. Select the 3 vertical dots in the top menu and then ‘Code Editor’ under the Editor menu.

Copy the html comment code from the Site Editor and paste it into your index.html file. Repeat for each template you want to create.

Want to learn how to hide a block from a template or template part? Check out our post on the subject here.

Template Parts

Creating a template part is nearly identical to creating a template. The only difference is that you’ll create a separate folder titled ‘parts’ in your root theme folder. Within the parts folder is where you will have your template parts, for instance a header.html

Your file path for your template parts would look like this:

/my-theme/parts/header.html

Be sure to check out the official documentation on how to add parts to your block theme.

Add Theme Image to Block Theme Templates and Template Parts

The easiest way to get a theme branded image into a template part or template is going to be to create a “Pattern”. Once you create a pattern with your theme branded image, you can use that pattern within the part or template.

Adding a pattern to a block theme is easily done, with 3 steps:

Start by creating a folder in your project root titled “patterns”.
Next, add a php file with the name of your pattern, “pattern-name.php”
Finally, at the top of the file add a doc block comment like this filling out the pattern title, slug, viewport, and category for your pattern

<?php
/**
 * Title: My image pattern
 * Slug: my-theme/my-img-pattern
 * Categories: gallery, image
 * Viewport width: 1600
 */
?>

Next, add the image file location to the src attribute of the image.

Back in your site editor, add a blank image block to your template and adjust the image block settings however you want.

Paste the block html from the Site Editor into your pattern-name.php file under the comment block and closing php tag. (Note: that the blank image block has an img html tag with no src attribute.) Your image tag will look something like this:

<!-- wp:image -->
<figure class="wp-block-image">
<img src="" alt="" />
</figure>
<!-- /wp:image -->

Next, you’ll need to add your branding image into a folder in your theme files. You could create a folder called ‘assets’ in your root theme folder.

The file path would look like this:

/wp-content/themes/my-theme/assets/image-name.png

Because the pattern is a php file, this allows us to use some of the core WordPress functions to get the theme file path for our image.

The image block within the pattern file should look similar to this:

<!-- wp:image {"width":160,"height":160,"style":{"layout":{"selfStretch":"fixed","flexSize":"160px"}}} -->
<figure class="wp-block-image is-resized">
<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/image-name.png" alt="image created by Photo by Sunder Muthukumaran on Unsplash" width="160" height="160"/>
</figure>
<!-- /wp:image -->

Images can sometimes cause LCP scores to go down. Learn some tips on how to improve LCP without a developer here.

Now add the pattern to your template or part file

Finally, adding the newly registered pattern to your template or part file is easy. Once you have made the above changes, you should now be able to locate your pattern in the Site Editor.

Navigate to your custom template, or part and navigate to the Inserter > Pattern section and you should be able to search for your pattern: