Grid Panda logo

Shortcodes

Grid Panda registers two shortcodes: [gridpanda_grid] for rendering the post grid and [gridpanda_facets] for rendering filter panels. Both can appear on the same page or in separate locations (e.g., facets in a sidebar, grid in the main content area).

[gridpanda_grid]

Renders a complete grid including all associated facets, cards, pagination, and JavaScript initialization. The grid can be identified by its numeric ID or its URL-safe slug.

Attributes

AttributeTypeDefaultDescription
idint0Numeric grid ID. Either id or slug is required.
slugstring''Grid slug. Alternative to id — whichever is provided first wins.
limitint''Override the grid's configured per_page value. Empty = use the grid's own setting.

Examples

<!-- Reference grid by ID -->
[gridpanda_grid id="5"]

<!-- Reference grid by slug -->
[gridpanda_grid slug="product-listing"]

<!-- Override items per page -->
[gridpanda_grid id="5" limit="24"]

<!-- Slug with limit override -->
[gridpanda_grid slug="job-board" limit="10"]

What Gets Rendered

The shortcode outputs a complete filterable grid including:

  • Server-side initial HTML for the first page of results (SEO-crawlable)
  • Facet widgets for all facets associated with the grid
  • Pagination controls (based on the grid's pagination_config)
  • JSON configuration embedded for the JavaScript frontend to pick up
  • Inline CSS for the card template (scoped to the card ID)

[gridpanda_facets]

Renders one or more facet filter widgets independently from a grid. Useful when the filter sidebar and the grid are in separate containers in the page layout.

Attributes

AttributeTypeDefaultDescription
idsstring''Comma-separated list of facet IDs to render. Required.
post_typestring''Filter the facets to only those associated with this post type. Optional.

Examples

<!-- Render facets 1, 2, and 3 -->
[gridpanda_facets ids="1,2,3"]

<!-- Filter by post type -->
[gridpanda_facets ids="1,2,3" post_type="product"]
Pairing with [gridpanda_grid]: When using facets in a separate location from the grid, Grid Panda's JavaScript automatically connects them via data attributes. Both shortcodes must be on the same page. The grid's facet IDs and the facets shortcode IDs should match.

Server-Side Rendering & SEO

Grid Panda renders the initial grid state server-side on every request. When a filtered URL is accessed (e.g., /shop/?fx_color=red or/shop/filter/color-red/), theFilterParamHandler intercepts the fx_ parameters, builds the WP_Query, and renders the filtered results in the initial HTML response — no JavaScript required for Googlebot to see the filtered content.

This means filtered pages are fully crawlable when they are marked as indexable in the SEO settings. See the SEO documentation for canonical URL strategy and robots meta configuration.

Shortcodes in Page Builders

Grid Panda shortcodes work in any context that processes WordPress shortcodes via do_shortcode(). Additionally, native integrations are available for:

Gutenberg

Use the Grid Panda Grid block or Grid Panda Facets block from the block inserter. No shortcode needed — blocks expose all attributes in the Inspector panel.

Elementor

Use the Grid Panda Grid and Grid Panda Facets Elementor widgets. Widget settings map directly to shortcode attributes. Requires Elementor plugin.

Classic Editor / Divi / WPBakery

Paste the shortcode directly into any text/HTML element. All classic page builders that process shortcodes are supported.

← IndexerREST API →