WP Manifestindependent plugin directory
manifest / content / cj-filter-grid

Dynamic Post Grid Pro (DPG)

CJ Filter Grid

by CJ · github.com/qkpros5040/cj-filter-grid

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/qkpros5040/cj-filter-grid/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/qkpros5040/cj-filter-grid ↗

Dynamic Post Grid Pro is a universal WordPress plugin that dynamically scans post types and taxonomies to generate a modern grid system with search, filters, and pagination.

Install

  • Zip this repo root folder and upload it via WP Admin → Plugins → Add New → Upload Plugin.
  • Activate Dynamic Post Grid Pro (DPG).
  • (Recommended) Install and activate WPGraphQL (the grid queries posts via POST /graphql).

Helper (optional):

  • bash make-zip.sh → writes dist/dynamic-post-grid-pro.zip

Usage

  • Add the shortcode: [dpg_grid]
  • Optional overrides:
    • Layouts:
      • layout="card" | "logo" | "overlay" | "blog" | "categories"
      • Categories layout groups posts by a taxonomy term and repeats the blog pattern per term.
      • Example: [dpg_grid layout="categories" taxonomies="category" group_by="category" ad_term_id="123" posts_per_page="9"]
      • The ad uses the existing grid preset ad image/link settings and is shown only for ad_term_id (or the first category if omitted).
    • Different grid per post type:
      • [dpg_grid post_type="post" taxonomies="category,post_tag" posts_per_page="12"]
      • [dpg_grid post_type="page" taxonomies="" posts_per_page="20"]
    • Multiple post types in one grid:
      • [dpg_grid post_types="post,page" taxonomies="category" posts_per_page="12"]
    • Use a saved preset from Settings:
      • [dpg_grid grid="products"]

Admin settings

WP Admin → Settings → Dynamic Grid

  • Post types (which types to query)
  • Taxonomy filter visibility (default fallback if shortcode taxonomies is not provided)
  • Posts per page
  • Grid Presets: choose taxonomies and optionally restrict which terms appear per taxonomy

Development (frontend)

Source lives in src/ and compiled assets live in build/ (these are what WordPress enqueues).

Commands:

  • npm install
  • npm run build
  • npm run start (watch mode)

Features

  • Auto-detects post types and taxonomies
  • Configurable taxonomy filters
  • GraphQL-powered filtering (WPGraphQL)
  • Live search (debounced)
  • Pagination
  • React frontend
  • Admin settings for post types, taxonomies, and posts per page
  • Performance optimizations (debounced search, optimized queries, lazy loading)
  • Security: sanitization and capability checks

System Architecture

User → React UI → GraphQL → WPGraphQL → WP_Query → Database → Response → UI

Technical Architecture

  • Backend:
    • DPG_Plugin (core)
    • DPG_Admin (admin panel)
    • DPG_GraphQL (GraphQL integration)
    • DPG_Query_Builder (query logic)
  • Frontend:
    • GridContainer
    • SearchBar
    • FiltersPanel
    • Pagination
    • GridItem

Delivery

  • WordPress plugin ZIP
  • React build
  • GraphQL schema