Welcome to part two of Query Loop‑a‑Palooza. In this tutorial, I’m going to show you how to build out a query loop based on a custom post type for a portfolio. I’ll first show you how I set up that custom post type with ACF and then the end result we’re going for — before we build out the query loop itself.
Setting Up the Portfolio Custom Post Type
This query loop will display a portfolio grid. I’m using the idea of a design firm that does package design for products, with a few different mockups, names, and an overall design layout.
On the backend, I created a custom post type with ACF called Portfolio, and I also set up a taxonomy for the portfolio called Portfolio Types. This allows us to create and display categories like Skincare, Food & Drink, and Home.
Once the post type was created, a new menu item appears under Portfolio. I’ve already added three example posts, each with a featured image and a selected category using the Portfolio Types taxonomy.
Starting the Query Loop Build
Next, I headed to the Portfolio page to start building out the query loop.
First, I inserted a Container Block. I opened the sidebar panel to follow the block structure and applied a Global Class called container‑medium, which sets up padding on the container. Then, I added an inner container and placed a Query Loop Block inside it.
Since this is a custom design that doesn’t match any of the GenerateBlocks presets, I chose Start Blank.
Configuring the Query Loop
Inside the Query Loop, we now have a Looper Block and a Loop Item Block. In the Looper settings, I set the layout to a three‑column grid, which matches our design.
Before continuing, I went back to the main Query Block and made sure it was pulling in Portfolio posts, not the default blog posts. To do that, I removed “Posts” from the post type and selected Portfolio instead. Then I limited it to show three posts per page for this demo.
Back in the Looper layout, I added 1rem for both column and row gaps so the items have some spacing.
Each Loop Item represents one card in the grid, and since the loop duplicates automatically, we only need to build one card — the rest populate dynamically.
Designing the Portfolio Card
Let’s break down the structure of one card.
At the top is the featured image, and below that is a content section with the category tag, the portfolio title, and a background color with a subtle watermark graphic in the bottom corner.
Adding the Featured Image
I added an Image Block and used the dynamic option to display the featured image for each post.
The images were all different heights, so I set a uniform height of 400px and width to 100%, ensuring each fills the entire card width. GenerateBlocks automatically sets object‑fit: cover, which works perfectly.
Creating the Content Container
Below the image, I added a new Container Block for the content area and gave it a background color (#556E6D) pulled from my Figma file. I manually applied this color since I hadn’t created a global variable for it yet.
For padding, I left the top at zero (to overlap the category tag later) and applied 1.5rem to the left, right, and bottom.
Adding the Watermark Background
Next, I wanted to add the watermark swoosh graphic in the background, positioned at the bottom‑right corner.
I uploaded the image to the media library, then under Backgrounds → Add Image, selected it.
By default, the image filled the entire space, so I adjusted it:
- Position: Bottom Right
- Repeat: No Repeat
- Size: Custom — 200px (using the three‑dot option to input a custom value)
That gave me the look I wanted — subtle and clean.
Adding the Category Tag
I inserted a Text Block and used a Dynamic Tag for the Terms List.
- Source: Current Post
- Taxonomy: Portfolio Types
- Separator: None (since each post only has one category)
Then, I created a Global Class named portfolio‑grid‑cat to style this element.
Inside that class, I added a background color (#D6FC00) and adjusted the layout. I made sure the parent content container was set to Display: Flex → Column, with Align Items: Left, to prevent the tag from stretching across the full width.
Padding for the tag was roughly .5em vertically and 1em horizontally, and I added a 500px border radius for the pill‑shaped look.
The text color matched the background of the main container (#556E6D), and I added a 2px border using the same color.
Finally, I positioned the tag by giving it a –1rem top margin so it overlapped nicely between the image and the container.
Adding the Title
Below the category, I inserted a Headline Block using a Dynamic Tag → Post Title and changed it to an H3 (since an H2 would likely exist elsewhere on the page).
I removed the default bottom margin, set the text color to white, and tightened the space between the category and title by adding a .5rem margin on the category tag.
Inside the global class, I bumped up the font weight to 600 and increased the side padding slightly for a better look.
Previewing and Adjusting Spacing
After saving, I previewed on the front end and noticed a thin white gap between the image and the container. That came from the image block, so I fixed it with a –6px bottom margin on the image. Later, I added one more pixel of adjustment to get it perfectly flush.
Linking the Post Title
To make the title clickable, I edited the Post Title dynamic tag and enabled Link to Post.
That changed the text styling, so I edited the link state:
- Text Color: White
- Text Decoration: None
Then I added a hover state with a slightly dimmed white to give it a small hover effect.
Making It Responsive
On tablet, the three‑column layout felt tight, so I changed it to a two‑column grid and adjusted the image height to 300px. That kept proportions similar to desktop.
On mobile, I switched the looper to 1FR (a single column) and lowered the image height to 350px, which looked great.
Wrapping Up
Now, every time a new portfolio piece is added to the site, it automatically appears in this query loop on the Portfolio page. That’s one of the things I love most about query loops — the dynamic nature and how seamlessly the content populates.
That wraps up Part Two of Query Loop‑a‑Palooza, where we built a portfolio query loop based on a custom post type.
Coming up in Part Three, I’ll show how to create a news article grid layout — a bit more complex and ideal for content‑heavy sites.
If you have any other query loop ideas, leave a comment with the type of loop you’d like to see. Thanks for reading — and stay tuned for Part Three!
