Home » Guides » Wordpress » Wordpress Fse Related Projects Loop
📍 Unpin 🔗 Copy Link 📋 Copy Markdown ⬇️ Download
2 min read

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.

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.

<!-- 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.
Created: March 19, 2026 • Last Modified: March 19, 2026