Dynamic Post Grid – Gutenberg Blocks, Shortcodes & Elementor Addon

The Elementor widget requires Elementor 3.0 or higher. However, the Standalone Shortcode Builder works independently — you can use the [depg_grid] shortcode in the Block Editor, classic editor, widgets, or any page builder.

Go to Grid Shortcodes > Add New in your WordPress admin. Give your layout a title, configure the query settings (post type, columns, etc.), drag blocks into the layout builder, and publish. Copy the generated shortcode and paste it into any post, page, or widget area.

Three layout modes are available in the Post Query settings:

• Grid — Classic column-based grid layout.
• Masonry — Pinterest-style layout with CSS columns (no JavaScript dependency).
• List — Horizontal layout with featured image on the left and content on the right.

You can also override the layout mode via shortcode attribute:

[depg_grid id="123" layout_mode="masonry"]

Hover effects are configured per Thumbnail block. In the Layout Builder, click Settings on a Thumbnail block and select a hover effect from the dropdown. Available effects:

• Zoom In — Image scales up on hover.
• Zoom Out — Image starts zoomed and scales to normal on hover.
• Grayscale to Color — Image transitions from black-and-white to full color.
• Blur — Image blurs on hover.
• Brightness — Image brightens on hover.
• Overlay Fade — Dark overlay with link icon fades in.
• Overlay Slide Up — Dark overlay slides up from bottom.
• Overlay Slide Left — Dark overlay slides in from the right.
• Overlay Scale — Circular overlay expands from center (Material Design style).
• Border Draw — Blue border appears on hover.

Enable filtering in the Post Query section by checking “Show category filter buttons”. On the frontend, clicking a filter button reloads the grid content via AJAX without a page refresh. The filter respects your category restrictions — if you limit the grid to specific categories, only those categories appear as filter buttons.

You can also enable it via shortcode attribute:

[depg_grid id="123" filter="yes" filter_tax="category"]

Enable Load More in the Post Query section by selecting “Load More” as the pagination mode. A “Load More (X remaining)” button appears below the grid. Clicking it loads the next page of posts via AJAX and appends them to the grid. The button disappears when all posts are loaded.

Enable Infinite Scroll in the Post Query section by selecting “Infinite Scroll” as the pagination mode. As the user scrolls near the bottom of the grid, new posts are automatically loaded via AJAX and appended to the grid. A spinner shows while loading, and a “No more posts” message appears when all posts are loaded.

You can also enable it via shortcode attribute:

[depg_grid id="123" infinite_scroll="yes"]

Grid output is cached using WordPress transients for 1 hour by default. Cache is automatically invalidated when:

• A post is saved, deleted, or its status changes.
• A grid shortcode is updated.
• You click “Clear All Grid Cache” in the Shortcode Builder.

You can change the cache duration with the depg_cache_duration filter:

add_filter( 'depg_cache_duration', function() { return 30 * MINUTE_IN_SECONDS; } );

All grid data is available via REST API for headless/decoupled usage:

GET /wp-json/depg/v1/grid/{id}

Optional parameters: page, per_page, filter (term ID), taxonomy, layout_mode.

The response includes structured post data (title, permalink, excerpt, author, featured image, terms) and paging information. No authentication required.

On WordPress 6.9+, the plugin registers 5 AI-agent-ready abilities that can be discovered and executed by AI agents, automation tools (Zapier, n8n), and MCP servers:

• dynamic-post-grid/render-grid — Render a grid as HTML.
• dynamic-post-grid/get-grid-data — Get structured post data as JSON.
• dynamic-post-grid/create-shortcode — Create a new grid programmatically.
• dynamic-post-grid/export-layout — Export a grid layout as portable JSON.
• dynamic-post-grid/import-layout — Import a layout JSON.

Yes. You can pass any of these attributes to override the saved settings:

[depg_grid id="123" layout_mode="masonry" columns="2" per_page="12" orderby="title" order="ASC" filter="yes" load_more="yes"]

Available attributes: id (required), layout_mode (grid/masonry/list), columns (1-4), per_page (number of posts), orderby (date, title, ID, modified, rand, menu_order), order (ASC or DESC), filter (yes/1/true), filter_tax (taxonomy slug), load_more (yes/1/true).

Yes. Build a layout in the Shortcode Builder, click Save Current as Preset, enter a name, and save. Your custom presets appear in the My Presets dropdown alongside the built-in presets.

Yes. Use the REST API or Abilities API to export a grid configuration as JSON. The JSON contains the full settings and block configuration. Import it on another site to create an identical grid.

Yes. Select “Product” as the post type in the query settings. The shortcode builder includes Price and Rating blocks specifically for WooCommerce products.

Yes. It works with all WordPress themes.