Post grid

The Post grid widget lists posts as cards. Unlike a plain post list it can filter and order by field values (cheapest first, only posts where Color is red), shows field values on the cards, and loads more cards with a button. It is an Elementor widget in the WPM Fields category and needs a Pro plan.

Add the widget

1. Edit a page with Elementor and drag Post grid from the WPM Fields category onto the page.
2. Set the Query, Card and Pagination sections below.
3. Style it on the Style tab (see Styling the widgets).

Query section

The filter uses the same query as Query posts by field value, so it compares real column values: numbers are compared as numbers (greater than 30 works on a Number field), a Select compares its stored value (red) and contains looks for the text inside the value.

Always applied: only published posts of a public post type, password-protected posts are left out, and sticky posts get no special place.

Card section

Card content is a list of up to 30 items; every card shows them in this order. The default list is the featured image, the title (as h3), an excerpt (as p) and a button.

Field items print the field of each card's own post. An item with no value prints nothing for that card. Password fields never print. A card without a featured image skips the image item.

Pagination section

None

Shows the first page only (up to Posts per page).

Page numbers

Prints numbered links with Previous and Next under the grid. A link reloads the page with a query argument named after the widget (?wpmcf-grid-<element id>=2), so several grids on one page paginate independently. The links only show when there is more than one page.

Load more button

Prints the first page and a button. Clicking it fetches the next page and adds the cards below the existing ones, without reloading. Keyboard focus moves to the first new card, the button is disabled while loading and removed after the last page, and if a request fails the button stays so you can try again.

How it works, for developers and cache users:

• The widget's settings are written into the page as a signed payload (HMAC with your site's security keys), together with the id of the post the widget sits on. The request is GET /wp-json/wpmcf/v1/builders/grid?payload=…&signature=…&page=N.
• The route is public and anonymous: it only lists published posts of public types, with the settings the server signed when the page was built. A visitor cannot change the query. The response is { "html": "…", "hasMore": true|false }.
• page must be a number from 2 to 500 (page 1 is on the page). A request that is malformed (a payload over 12,000 characters or with other characters than letters, digits, - and _, a signature that is not 64 hex characters, a missing value or a page outside 2 to 500) answers HTTP 400. A request whose signature does not match the payload answers HTTP 403 "This list cannot load more posts. Reload the page and try again." Asking for a page past the last one returns empty html and hasMore: false.
• Because the signature depends on your security keys, a page cache that keeps a page for a long time can contain payloads that stop working after you change the keys in wp-config.php. Clear the cache then.
• The "Load more" requests are plain GET requests without cookies, so they can be cached by your server or CDN.

Example: a related products grid

• Post type: Product. Posts per page: 3.
• Only posts where: Category (Select) is equal to shoes.
• Order by: Field value, Order by field: Price, Order: Ascending.
• Leave out the current post: On.
• Card content: Featured image, Title, Field (Price, label "From"), Button "View".
• Pagination: Load more button.

Without a license

Placed grids keep printing and "Load more" keeps working; they only disappear from the Elementor panel, so you cannot add new ones. See License expiry.

Troubleshooting

• The grid shows "Nothing found." The filter matches no published post. Check the value (a Select compares the stored value), the post type and that the posts are not password protected.
• The grid lists the current post. Switch Leave out the current post on.
• Page numbers do nothing on a cached page. The cache serves the first page for every ?wpmcf-grid-… address. Tell the cache plugin to treat query strings as separate pages, or use Load more button.
• Load more says "Reload the page and try again." The signature no longer matches, for example after changing the security keys, or the cached page is older than the change. Clear the page cache.
• Ordering by a field gives a strange order. A field stored as JSON (checkboxes, repeater, gallery) is ordered by its stored JSON text. Order by a field with a plain column such as a Number, Date or Text.