Content · Elementor
Dynamic Posts Grid widget for Elementor
A filterable grid of posts with AJAX search and Load More — for blogs and resource libraries.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
A filterable grid of posts with AJAX search and Load More — for blogs and resource libraries.
render() writes HTML data attributes: data-card-clickable, data-columns, data-cpt-actions, data-cpt-icons, data-filter-taxonomy, data-max-pages, data-order, data-orderby.
Content is loaded with WP_Query in PHP (not a hardcoded list in the editor).
Some inspector controls are marked Pro in PHP (eicon-pro-icon / king-addons-pro-control). Those need King Addons Pro, not Elementor Pro.
The widget script reads data attributes: data-cpt-actions, data-cpt-icons, data-lg-uid, data-max-pages, data-page, data-post-type.
Clicks open LightGallery; the gallery is not a separate WordPress plugin.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Dynamic Posts Grid”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Post Types”, “Posts Per Page”, “Order By”, “Order”. Style and Content tabs are listed on this page.
- Preview the published page. render() writes HTML data attributes: data-card-clickable, data-columns, data-cpt-actions, data-cpt-icons, data-filter-taxonomy, data-max-pages, data-order, data-orderby.
When to use it
- A blog index with category chips.
- A resource library.
- A newsroom with load more.
Tip: After King Addons is active, type king in the Elementor search box to list every widget, including Dynamic Posts Grid.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Content — Post Types | Select post types to display. |
| Content — Posts Per Page | Number of posts to display initially. |
| Content — Order By | The chosen value is read in render() and applied on the front end. Options: Date; Title; Menu Order; Random; Comment Count. |
| Content — Order | The chosen value is read in render() and applied on the front end. Options: Descending; Ascending. |
| Filtering & Search — Enable Filters | When this switch is on, render() outputs the wrapped markup. |
| Filtering & Search — Filter Title Text | Printed in the widget HTML from render(). |
| Filtering & Search — Filter Taxonomy | The chosen value is read in render() and applied on the front end. |
| Filtering & Search — Enable Search | Switcher inspector control (`kng_dynamic_posts_enable_search`). |
| Filtering & Search — Search Placeholder | Printed in the widget HTML from render(). |
| Grid Layout — Columns | Writes CSS `grid-template-columns` onto the widget’s front-end markup. Options: 1; 2; 3; 4; 5; 6. |
| Grid Layout — Grid Gap | Writes CSS `gap` onto the widget’s front-end markup. (min 0, max 100). |
| Grid Spacing — Grid Bottom Margin | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 100). |
| Load More — Enable Load More | Switcher inspector control (`kng_dynamic_posts_enable_load_more`). |
| Load More — Load More Text | Printed in the widget HTML from render(). |
| Load More — Loading Text | Printed in the widget HTML from render(). |
| Filter Title — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-dpg-filter-title`. |
| Filter Title — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Filter Title — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Filter Bar — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-dpg-filter-bar`. |
| Filter Bar — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Filter Bar — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-dpg-filter-bar`. |
| Filter Section Spacing — Filter Bar Bottom Margin | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 100). |
| Filter Section Spacing — Filter Header Bottom Margin | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 50). |
| Filter Section Spacing — Controls Gap | Writes CSS `gap` onto the widget’s front-end markup. (min 0, max 60). |
| Filter Section Spacing — Controls Alignment | Writes CSS `justify-content` onto the widget’s front-end markup. Options: Start; Center; End; Space Between. |
| Filter Controls — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-dpg-posts-filter`. |
| Filter Controls — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Filter Controls — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Filter Controls — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-dpg-posts-filter`. |
| Filter Controls — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Filter Controls — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Filter Controls — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-dpg-posts-filter`. |
| Filter Controls — Use Custom Icon/Image | Replace default dropdown arrow with custom icon or image. |
| Filter Controls — Type | The chosen value is read in render() and applied on the front end. Options: Icon; Image. |
| Filter Controls — Choose Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Filter Controls — Choose Image | Media Library attachment(s); render() uses the URL/ID as the image source. |
| Filter Controls — Icon Size | Writes CSS (font-size, width, height) onto the widget’s front-end markup. (min 8, max 30). |
| Filter Controls — Image Size | Writes CSS (width, height, object-fit) onto the widget’s front-end markup. (min 8, max 100). |
| Filter Controls — Icon Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Filter Controls — Image Opacity | Writes CSS `opacity` onto the widget’s front-end markup. (min 0.1, max 1). |
| Filter Controls — Typography (Kng Dynamic Posts Search Input Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-dpg-posts-search`. |
| Filter Controls — Text Color (Kng Dynamic Posts Search Input Color) | Writes CSS `color` onto the widget’s front-end markup. |
| Filter Controls — Placeholder Color | Writes CSS (king-addons-dpg-posts-search, color) onto the widget’s front-end markup. |
| Filter Controls — Background Color (Kng Dynamic Posts Search Input Background) | Writes CSS `background-color` onto the widget’s front-end markup. |
| Filter Controls — Border (Kng Dynamic Posts Search Input Border) | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-dpg-search-input`. |
| Filter Controls — Border Radius (Kng Dynamic Posts Search Input Border Radius) | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Filter Controls — Padding (Kng Dynamic Posts Search Input Padding) | Writes CSS `padding` onto the widget’s front-end markup. |
| Filter Controls — Box Shadow (Kng Dynamic Posts Search Input Box Shadow) | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-dpg-search-input`. |
| Filter Controls — Button Size | Writes CSS (width, height) onto the widget’s front-end markup. (min 30, max 80). |
| Filter Controls — Button Color | Writes CSS `color` onto the widget’s front-end markup. |
| Filter Controls — Button Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Filter Controls — Button Hover Color | Writes CSS (king-addons-dpg-search-btn, color) onto the widget’s front-end markup. |
| Filter Controls — Button Hover Background | Writes CSS (king-addons-dpg-search-btn, background-color) onto the widget’s front-end markup. |
| Filter Controls — Button Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-dpg-search-btn`. |
| Filter Controls — Button Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Filter Controls — Button Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Filter Controls — Transition Duration (ms) | Writes CSS `transition` onto the widget’s front-end markup. (min 100, max 1000). |
| Filter Controls — Use Custom Icon | Switcher inspector control (`kng_dynamic_posts_search_use_custom_icon`). |
| Filter Controls — Choose Icon (Kng Dynamic Posts Search Custom Icon) | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Filter Controls — Icon Size (Kng Dynamic Posts Search Icon Size) | Writes CSS (width, height, font-size) onto the widget’s front-end markup. (min 10, max 50). |
| Filter Controls — Icon Color (Kng Dynamic Posts Search Icon Color) | Writes CSS (fill, color) onto the widget’s front-end markup. |
| Filter Controls — Icon Hover Color | Writes CSS (king-addons-dpg-search-btn, fill, color) onto the widget’s front-end markup. |
| Cards — Icon Position | Options: Left; Right. |
| Cards — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Cards — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-dpg-card`. |
| Cards — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Cards — Min Height | Writes CSS `min-height` onto the widget’s front-end markup. (min 100, max 800). |
| Cards — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-dpg-card`. |
| Cards — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-dpg-card`. |
| Card Hover Effects — Hover Transform | Writes CSS (king-addons-dpg-card, transform) onto the widget’s front-end markup. Options: None; Lift Small; Lift Medium; Lift Large; Scale Small; Scale Medium. |
| Card Hover Effects — Hover Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-dpg-card:hover`. |
| Card Hover Effects — Hover Border Color | Writes CSS (king-addons-dpg-card, border-color) onto the widget’s front-end markup. |
| Card Hover Effects — Transition Duration (ms) | Writes CSS `transition` onto the widget’s front-end markup. (min 100, max 1000). |
| Card Hover Effects — Make Card Clickable | Makes the entire card clickable to navigate to the post. Note: This feature works only on the live site. |
| Card Header — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Card Header — Icon Size | Writes CSS (font-size, width, height) onto the widget’s front-end markup. (min 12, max 50). |
| Card Header — Icon Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Card Header — Icon Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Card Header — Icon Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Card Header — Icon Container Size | Writes CSS (width, height) onto the widget’s front-end markup. (min 30, max 80). |
| Card Header — Icon Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-dpg-icon`. |
| Card Header — Label Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-dpg-label`. |
| Card Header — Label Color | Writes CSS `color` onto the widget’s front-end markup. |
| Card Header — Label Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Card Header — Label Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-dpg-label`. |
| Card Header — Label Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Card Header — Label Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Card Content — Content Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Card Content — Content Vertical Alignment | Writes CSS `justify-content` onto the widget’s front-end markup. Options: Top; Center; Bottom; Space Between; Space Around. |
| Card Content — Show Excerpt | Switcher inspector control (`kng_dynamic_posts_show_excerpt`). |
| Card Content — Title Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-dpg-title`. |
| Card Content — Title Color | Writes CSS `color` onto the widget’s front-end markup. |
| Card Content — Title Hover Color | Writes CSS (a, color) onto the widget’s front-end markup. |
| Card Content — Excerpt Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-dpg-excerpt`. |
| Card Content — Excerpt Color | Writes CSS `color` onto the widget’s front-end markup. |
| Card Content — Excerpt Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Card Button — Container Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Card Button — Button Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-dpg-button`. |
| Card Button — Border Style | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Dashed; Dotted. |
| Card Button — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Card Button — Default Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Card Button — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Card Button — Button Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Card Button — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-dpg-button`. |
| Load More Button — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-dpg-load-more-btn`. |
| Load More Button — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Load More Button — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-dpg-load-more-btn`. |
| Load More Button — Hover Text Color | Writes CSS (king-addons-dpg-load-more-btn, color) onto the widget’s front-end markup. |
| Load More Button — Hover Background | Writes CSS (king-addons-dpg-load-more-btn, background-color) onto the widget’s front-end markup. |
| Load More Button — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-dpg-load-more-btn`. |
| Load More Button — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Load More Button — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Load More Button — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-dpg-load-more-btn`. |
| Pagination — Section Top Margin | Writes CSS `margin-top` onto the widget’s front-end markup. (min 0, max 100). |
| Pagination — Info Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-dpg-pagination-info`. |
| Pagination — Info Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Pagination — Count Numbers Color | Writes CSS `color` onto the widget’s front-end markup. |
| Pagination — Info Bottom Margin | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 60). |
| Pagination — Loading Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Pagination — Finish Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-dpg-pagination-finish`. |
| Pagination — Finish Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Pagination — Finish Text Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Messages — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-dpg-no-posts`. |
| Messages — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Messages — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Messages — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-dpg-no-posts`. |
| Messages — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Messages — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Messages — Typography (Kng Dynamic Posts Error Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-dpg-error-message`. |
| Messages — Text Color (Kng Dynamic Posts Error Color) | Writes CSS `color` onto the widget’s front-end markup. |
| Messages — Background Color (Kng Dynamic Posts Error Background) | Writes CSS `background-color` onto the widget’s front-end markup. |
| Messages — Border (Kng Dynamic Posts Error Border) | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-dpg-error-message`. |
| Messages — Border Radius (Kng Dynamic Posts Error Border Radius) | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Messages — Padding (Kng Dynamic Posts Error Padding) | Writes CSS `padding` onto the widget’s front-end markup. |
| Messages — Bottom Margin | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 50). |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
Which Dynamic Posts Grid options need King Addons Pro?
Controls marked with the Pro icon in this widget’s PHP. King Addons Pro is a separate license from Elementor Pro.
How do I add Dynamic Posts Grid in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Dynamic Posts Grid”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related content widgets
Posts Grid & Slider
Posts in a grid, slider, or carousel with query and layout controls (the Posts Grid widget).
Magazine Grid & Slider
A magazine layout: mixed tile sizes for featured and secondary posts, as a grid or slider.
Content Ticker
A scrolling ticker of posts or custom items for headlines and announcements.
Timeline Post/Story
A vertical or horizontal timeline for events, history, or a changelog.
Quick Post Grid
A lightweight WordPress post grid with sane spacing defaults. Fewer layout modes than Posts Grid.
Quick Card Grid
A fast card grid with simple fields. Use when you do not need a post query or heavy animations.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Dynamic Posts Grid after you activate it.