Creative Andrew’s Blog

Web development articles focused on WordPress and headless applications.

How to select a single post in the query loop block?

  • Block Editor
  • WordPress

TL;DR:

Install the Single Post Query Loop Selector plugin now available in the official WordPress repository.

Understanding the Challenge: Selecting a single post in the query loop block.

A while back, a successful blog client approached with a simple ask: "I'd like to manually select a featured post, including an image and title, that readers can click to open". It should look something like the image above:

"No problem," I thought, diving into the Block editor in search of solutions. Surprisingly, existing plugins fell short—they focused on related posts, not on manually selecting a specific post. Even on Reddit, fellow developers were grappling with a similar puzzle.

Block Experimentation: Testing the Query Loop Functionality

Anticipating the Query Loop block to provide the flexibility of handpicking a single post, my initial attempt involved tweaking post-per-page and utilizing the keyword field. Despite initial promise, the broad keyword search led to unpredictable outcomes. Frequently, I found myself navigating through related but ultimately incorrect results.

Introducing the Single Query Loop Selector

Despite its closeness to the goal, the Query Loop block needed refinement. Inspired by a guide on extending the block, I crafted a variation—the Single Query Loop Selector. This version incorporated a search field for precise post selection:

The Single Query Loop Selector: This variation hit the mark, enabling me to curate a list of posts and choose the exact one I needed.

Creating a design pattern aligned with my client's preferences, I delivered a solution that not only pleased her but worked seamlessly.

You can now find the Single Post Query Loop Selector plugin in the official WordPress repository.

Here is a look at the open-source code: https://github.com/creative-andrew/single-post-query-loop-selector…