Creating a Page Template Using RSS Blocks

Written by Tinjure WP Posted on

Note: This post is part 4 of leaning efforts to understand and use full site editing (FSE) and block-based themes. This learning post is still in active development and updated regularly.

In previous posts, I have described how to create a RSS Blog Feed pattern and use it in a page is described in detail. I have been using such a RSS Feed page in one of my personal project sites.

Learning Goals
Part 1: Modifying Fonts & Basic Typography
Part 2: Adding Custom Block Patterns
Part 3: Creating a RSS Blog Feed page using RSS Block
Part 4: Creating a Page Template Using RSS Blocks (this post)

The objective of this learning-note post is to convert the RSS Feed Page created previously into a page template and bundle with my theme.

Building Custom page Template

There are two ways we can create a template in a block base theme – starting a black template or from an existing template and customizing. In both methods, we have to use full site editing (FSE) interface to add desired components in the template.

  • Building from a blank template. In this method, the template page is literally black without header and footer template parts and needs to be build.
  • Modify from existing templates. Many block theme (eg. Blockbase, already include bare-bone templates with headers and footers only (Blockbase, Aino), page-without-title (Quadrat, Tove)  or blank (Aino) templates.

Because my block theme is based on Quadrat and it already has an existing page-without-title template, I thought to just make a copy and build over my RSS Feed Template.

Step 1: First make a copy of page-without-title template

Make a copy of page-without-title page from the quadrat’s block-templates folder and renamed as rss-feed-template.

<pre class="line-numbers"><!-- wp:template-part {"slug":"header"} /-->

<!-- wp:spacer {"height":60} -->
<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group">
<!-- wp:post-content {"layout":{"inherit":true}} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","className":"site-footer-container"} /-->
Step 2. Open the newly renamed rss fee pattern template from the site Editor

From Site editor > CLICK the currently selected index template and CLICK over Browse all template button (shown below in screenshot).

Screenshot showing index template sub-menus viewed from site editor.

That should open up template panel on the left side of your browser screen.

Step 3. From the FSE editor, select > templates > rss-feed-template which is current

From the FSE editor, select > templates > rss-feed-template which is currently a blank page with just header and footer (see below)

Screenshot showing a blank rss-feed-template in site editor.

Because we will like to have page title in our template, we will add page-title block in the next step.

Step 4. Add page-title block to rss-feed-template

Add Page title, a brief introduction and place holder for post content block for adding a pattern.  Save, publish and view – which shows as see in the following screen shot (see below).

Screenshot showing hierarchical outline of blocks (left) with inherit default layout selected (right).
Step 4: Create a New page with newly created rss-feed-template

Add Page title, a brief introduction. Then add previously created rss-feed pattern in the place holder area. Save, publish and view – which shows as seen in the screen shot (below).

Screenshot showing a page created with the newly created rss-feed-pattern template.

When I copied the block tried to change URL of the rss feed for a different site I encountered following error, but this error is not associated with creating a pattern but rss-block itself.

While changing URL of rss block, you may encounter  RSS Error: WP HTTP Error: cURL error 60: SSL certificate problem: certificate has expired.

Often this much is sufficient to display above content in a site, however if the theme is used in another site, the recently created rss-feed-template will not be available. To bundle the template, the template code should be exported and added to theme as described here in the post.

Adding the new template to theme

The next step is to include the newly created rss-feed template into my Labreblocks theme as described in this article and custom templates section in the create a block theme documentation.

Step 1: Exporting the template from Site Editor

First we should export the template from the site editor by clicking on more tools  & options (three dots button on the top-right hand side) and click export button (see below).

Screenshot showing template export window.

The file is downloaded as … in download folder.

Step 2: Copy the template source code from file archive into theme’s rss-feed.html file

After file extraction, copy the rss-feed-template source code from block-templates and paste in entirety in theme’s block-templates/rss-feed file (as seen below).

<!-- wp:template-part {"slug":"header"} /-->

<!-- wp:spacer {"height":60} -->
<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group">
	<!-- wp:post-content {"layout":{"inherit":true}} /-->
     <!-- wp:paragraph -->
	<p> Start writing your brief introduction here. </p>
	<!-- /wp:paragraph -->
	<!-- wp:spacer {"height":20} -->
	<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
	<!-- /wp:spacer -->

	<!-- wp:group {"className":"my-rssfeed","layout":{"inherit":true}} -->
	<div class="wp-block-group my-rssfeed"><!-- wp:columns {"align":"wide"} -->
	<div class="wp-block-columns alignwide"><!-- wp:column -->
	<div class="wp-block-column"><!-- wp:group {"layout":{"inherit":true}} -->
	<div class="wp-block-group"><!-- wp:heading {"level":4} -->
	<h4>WordPress News</h4>
	<!-- /wp:heading -->

	<!-- wp:rss {"feedURL":"https://wordpress.org/news/feed","itemsToShow":4,"displayDate":true} /--></div>
	<!-- /wp:group --></div>
	<!-- /wp:column -->

	<!-- wp:column -->
	<div class="wp-block-column"><!-- wp:group {"layout":{"inherit":true}} -->
	<div class="wp-block-group"><!-- wp:heading {"level":4} -->
	<h4>WP Tavern</h4>
	<!-- /wp:heading -->

	<!-- wp:rss {"feedURL":"https://wptavern.com/feed","itemsToShow":4,"displayDate":true} /--></div>
	<!-- /wp:group --></div>
	<!-- /wp:column --></div>
	<!-- /wp:columns --></div>
	<!-- /wp:group -->

	<!-- wp:separator {"className":"is-style-labreblocks-separator-thin"} -->
	<hr class="wp-block-separator is-style-labreblocks-separator-thin"/>
	<!-- /wp:separator -->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","className":"site-footer-container"} /-->

Next, the template needs to be listed in theme.json so that it’s available for editing in block editor.

Step 3: Adding rss-feed template in theme.json file

In Block themes, all templates are listed in theme ..

"customTemplates": [
    {
        "name": "rss-feed",
        "title": "RSS Feed Pattern"
        "postTypes": [
            "page",
            "post"
        ]
    }
]

Now the rss-feed template should be available via theme, even if the theme is used in any other site. To verify that the new template is bundled with the theme, first delete the rss feed pattern template from Appearance > Templates folder and try opening from Site editor – the rss-feed template should be visible which can be edited as described above.

Wrapping Up

In this learning post, we created a rss-feed-pattern template page and bundled the code into  theme. Now the newly created rss feed template is available for use in my project site.

Useful Resources

The following is list of references link that I gathered during my brief research. While preparing this post, I have also referred some of the following references extensively.