---
tags:
  - wordpress
  - fse
  - query-loop
  - templates
  - portfolio
title: Creating a "Related Projects" Query Loop
---

# Creating a "Related Projects" Query Loop

A standard feature of any portfolio is the "See Also" or "Related Projects" section at the bottom of a single project page. In FSE, we build this using the **Query Loop Block** inside the `single-portfolio.html` template.

## 1. The Strategy: "More Projects" vs. "Strictly Related"

Native WordPress (without plugins) handles "Latest Projects" or "Random Projects" very well.

*   **Strictly Related (Same Category):** Surprisingly difficult in pure FSE without plugins. It requires complex context inheritance that isn't fully exposed in the UI yet.
*   **More Projects (Exclude Current):** This is the standard native pattern. It shows 3 other projects, ensuring the one the user is currently viewing doesn't appear in the list.

## 2. Editing the Template

1.  Go to **Appearance > Editor > Templates**.
2.  Select **Single Item: Project** (or `single-portfolio`).
3.  Scroll to the bottom of the layout (before the Footer).

## 3. The Block Structure

We will create a query that fetches 3 items of the `portfolio` post type.

```html
<!-- wp:group {"layout":{"type":"constrained"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|60"}}}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--60)">
    
    <!-- Section Title -->
    <!-- wp:heading {"textAlign":"center"} -->
    <h2 class="has-text-align-center">More Projects</h2>
    <!-- /wp:heading -->

    <!-- The Query Loop -->
    <!-- wp:query {"queryId":10,"query":{"perPage":3,"pages":0,"offset":0,"postType":"portfolio","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
    <div class="wp-block-query">
    
        <!-- Grid Layout (3 Columns) -->
        <!-- wp:post-template {"layout":{"type":"grid","columnCount":3}} -->
            
            <!-- Featured Image -->
            <!-- wp:post-featured-image {"isLink":true,"aspectRatio":"4/3","style":{"border":{"radius":"8px"}}} /-->

            <!-- Title -->
            <!-- wp:post-title {"isLink":true,"style":{"typography":{"fontSize":"1.2rem","fontStyle":"normal","fontWeight":"600"}}} /-->

        <!-- /wp:post-template -->

    </div>
    <!-- /wp:query -->

</div>
<!-- /wp:group -->
```

## 4. Key Configurations (The "How")

If you are building this visually in the editor, here are the specific settings to check on the Query Loop block:

1.  **Inherit Query from Template:** **OFF**. (We want a custom query, not the main project itself).
2.  **Post Type:** Set to **Projects** (or `portfolio`).
3.  **Order By:** **Date** (Newest) or **Random** (if you want variety).
4.  **Sticky Posts:** **Exclude**.
5.  **Exclude Current Post:** **ON**. (Look for the toggle in the Display Settings or Filters section of the block sidebar. This ensures the project the user is reading doesn't appear in the "More" list).

## 5. Styling Tips

*   **Aspect Ratio:** Use the "Aspect Ratio" setting on the **Post Featured Image** block (e.g., `4/3` or `16/9`). This ensures perfect grids even if your clients upload images of different sizes.
*   **No Pagination:** Usually, you don't want pagination buttons in a "Related" section. Just show the 3 cards and stop.
*   **Columns:** Use the List View to select the **Post Template** block (inside the Query) and set it to **Grid View** with **3 Columns**.