Displaying Custom Taxonomy Terms in FSE Templates
When you create a Single Project template (single-portfolio.html), you usually want to display metadata like "Project Type" or "Skills" under the title.
While WordPress has standard blocks for "Categories" and "Tags," displaying Custom Taxonomies requires using the specific Term List block logic.
1. The Block: core/post-terms
Under the hood, WordPress uses a single block to handle all taxonomies: core/post-terms.
When you search in the editor for your custom taxonomy (e.g., "Project Types"), WordPress is actually inserting a variation of this block with the term attribute set to your taxonomy slug.
2. Adding via the Site Editor (Visual)
- Open your template (e.g., Single Item: Project).
- Click the + (Add Block) button.
- Search for the name of your taxonomy (e.g., search for "Skills" or "Project Types").
- Note: If it doesn't appear, ensure you registered the taxonomy with
show_in_rest => true.
- Note: If it doesn't appear, ensure you registered the taxonomy with
- Insert the block.
3. Adding via HTML (Code)
If you are editing your templates/single-portfolio.html file manually, use the following markup.
Syntax:
<!-- wp:post-terms {"term":"YOUR_TAXONOMY_SLUG"} /-->Example: Project Header
Here is a common pattern for a portfolio header displaying the "Project Type" (like a Category) and "Skills" (like Tags).
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
<!-- Project Title -->
<!-- wp:post-title {"textAlign":"center"} /-->
<!-- Metadata Row -->
<!-- wp:group {"layout":{"type":"flex","justifyContent":"center"},"style":{"spacing":{"blockGap":"20px"}}} -->
<div class="wp-block-group">
<!-- 1. Display 'Project Type' (e.g., Web Design) -->
<!-- wp:post-terms {"term":"project_type","separator":""} /-->
<!-- 2. Display 'Skills' (e.g., Figma, React, PHP) as pill shapes -->
<!-- wp:post-terms {"term":"skill","separator":", ","style":{"elements":{"link":{"decoration":{"type":"none"}}}}} /-->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->4. Customizing the Output
The core/post-terms block has several useful attributes:
separator: What to put between terms. Default is a comma (,). Use|or an empty string for different looks.prefix: Text to show before the list (e.g., "Tagged: ").suffix: Text to show after.
Example: "Pill" Styling
To make your terms look like buttons or "pills," wrap them in a Group block or style the links directly in theme.json.
Inline Style Example:
<!-- wp:post-terms {"term":"skill","style":{"typography":{"fontSize":"0.8rem"},"border":{"radius":"20px"}},"backgroundColor":"light-gray","className":"is-style-pill"} /-->