---
tags:
  - wordpress
  - fse
  - taxonomies
  - templates
  - blocks
title: Displaying Custom Taxonomy Terms in FSE Templates
---

# 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)

1.  Open your template (e.g., **Single Item: Project**).
2.  Click the **+ (Add Block)** button.
3.  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`.*
4.  Insert the block.

## 3. Adding via HTML (Code)

If you are editing your `templates/single-portfolio.html` file manually, use the following markup.

**Syntax:**
```html
<!-- 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).

```html
<!-- 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:**
```html
<!-- wp:post-terms {"term":"skill","style":{"typography":{"fontSize":"0.8rem"},"border":{"radius":"20px"}},"backgroundColor":"light-gray","className":"is-style-pill"} /-->
```