Tutorial

Featured Posts – Query-Powered Grid & Flex Layouts

Home / Tutorials / Featured Posts – Query-Powered Grid & Flex Layouts

In this series

  1. 1

    Getting Started with Groundworx Core

    Level: Beginner Estimated reading time: 4 minutes
  2. 2

    Static Flow – Carousel With Inner-Block For Each Slide

    Level: Beginner, Intermediate Estimated reading time: 3 minutes
  3. 3

    Dynamic Flow – Query-Powered Carousels

    Level: Beginner, Intermediate Estimated reading time: 4 minutes
  4. 4

    Featured Posts – Query-Powered Grid & Flex Layouts

    Level: Beginner, Intermediate Estimated reading time: 4 minutes
  5. 5

    Filters – Interactive Filtering for WordPress Query Loop

    Level: Beginner, Intermediate Estimated reading time: 5 minutes
Series:

Featured Posts displays your posts, products, or custom post types in responsive grid or flex layouts. It uses the same powerful query system as Dynamic Flow—but without the carousel.

Use Featured Posts when you want to:

  • Display posts in a grid or flex layout (no carousel)
  • Show curated or dynamically filtered content
  • Build responsive post grids that adapt to screen size

Use Dynamic Flow instead when:

  • You want carousel/slider functionality
  • Content should animate between slides
  1. Edit a page or create a new one
  2. Click + to add a block
  3. Search for “Featured Posts”
  4. Choose a variation or start with the default

Starter Variations

When you insert Featured Posts, you’ll see preset templates:

Title & Date – Display post title and date

Title & Excerpt – Display post title and excerpt

Title, Date, & Excerpt – Display post title, date, and excerpt

Image, Date, & Title – Display featured image, date, and title

Each variation is fully customizable after insertion. Add or remove blocks inside the template.

Configuring Your Query Settings

First, select your Post Type—Posts, Pages, Products (WooCommerce), or any custom post type registered on your site.

Then choose your Query Mode: Dynamic or Curated.

Automatically pulls content based on filters. New posts appear automatically without editing.

Max Items – How many items to display (1-20)

Order By:

  • Newest first / Oldest first
  • A → Z / Z → A
  • Last modified
  • Menu order
  • Most comments
  • Random
  • Author
  • Post ID

Taxonomies – Filter by categories, tags, or custom taxonomies

Date – Last 7 days, 30 days, 90 days, 6 months, or 1 year

Authors – Show posts from specific authors

Keyword – Search by keyword in title or content

Parents – For hierarchical post types, filter by parent

Formats – Filter by post format (standard, video, gallery, etc.)

Hand-pick specific posts and arrange them in your preferred order.

Search for posts by title, add them to your list, then use the up/down arrows to reorder. Remove posts with the X button.

Search for posts by title, add them to your list, then use the up/down arrows to reorder. Remove posts with the X button.


Layout Settings

Choose your layout Mode: Grid or Flex.

CSS Grid layout with automatic column distribution.

Column Size Mode – Auto (set number of columns) or Manual (set pixel width)

Columns – Number of columns (1-10)

Equal Heights – Make all grid items the same height

Flexbox layout with more control over item alignment.

Column Size Mode – Auto (set number of columns) or Manual (set pixel width)

Columns – Number of columns (1-10)

Justification – Align items to Start, Center, End, or Space Between

Orientation – Horizontal (row) or Vertical (column)

Allow to wrap to multiple lines – Enable or disable wrapping

Responsive Breakpoints

Layout settings use a mobile-first approach with 5 breakpoints. Settings cascade upward—a value set at Mobile applies to all larger screens unless overridden.

Each breakpoint tab lets you customize:

  • Mode (Grid, Flex)
  • Column Size Mode
  • Columns / Column Width
  • Equal Heights (Grid)
  • Justification, Orientation, Wrap (Flex)

Use “Inherit” to keep the value from the previous breakpoint.

Example: Show 1 column on mobile, 2 on tablet, 3 on laptop, 4 on desktop.

Template Content

Inside Featured Posts, you can add any WordPress blocks to define how each post displays:

  • Post Title – The post’s title as a link
  • Post Date – Publication date
  • Post Excerpt – Summary text
  • Post Featured Image – Thumbnail image
  • Post Author – Author name
  • Post Terms – Categories, tags, or custom taxonomies
  • Any other WordPress or Groundworx blocks

Design your template once, and it applies to all query results.

Example Use Cases

Blog Archive: Display your latest posts in a 3-column grid with featured images, titles, and dates.

Product Grid: Show WooCommerce products from a specific category in a responsive grid.

Team Directory: Display team members from a custom post type in a flex layout.

News Section: Curate specific news posts for your homepage with custom ordering.

Optional: Customize with theme.json

This is optional—Featured Posts works great with default styling.

Featured Posts inherits your theme’s styles automatically. Use theme.json to customize block-level styling:

{
  "styles": {
    "blocks": {
      "groundworx/featured-posts": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--small)"
        },
        "spacing": {
          "blockGap": "2rem"
        }
      }
    }
  }
}

Next Steps

  • Experiment with different query configurations
  • Try combining Featured Posts with Card blocks for richer layouts
  • Check how the layout responds on mobile devices