JavaScript API

ID Post Grid exposes a JavaScript class and a custom jQuery event for developers who need to integrate with or extend the grid’s behavior.

The IDPostGrid Class

The plugin initializes an IDPostGrid instance for each .id-post-grid-wrapper element on the page. The class is exposed globally as window.IDPostGrid, so you can instantiate it manually if you add grid markup dynamically:

new IDPostGrid( document.querySelector('.my-dynamic-grid') );

The idPostGrid:loaded Event

After every AJAX response (search, filter, or load more), the grid wrapper triggers a custom jQuery event called idPostGrid:loaded. Use this to run custom code whenever the grid content updates:

$('.id-post-grid-wrapper').on('idPostGrid:loaded', function(e, data, reset) {
    console.log('Posts found:', data.found);
    console.log('Current page:', data.page);
    console.log('Max pages:', data.maxPages);
    console.log('Was grid reset:', reset);
});

Event Parameters

• data — The response object from the server, containing:
  • data.html — The rendered HTML for the loaded posts.
  • data.found — Total number of posts matching the current query.
  • data.maxPages — Total number of pages available.
  • data.page — The current page number.
• reset — Boolean. true when the grid was reset (search or filter changed), false when posts were appended (load more).

AJAX Endpoint

For advanced integrations, the AJAX handler details are:

• Action: id_post_grid_load
• Method: POST
• Nonce: id_post_grid_nonce (available via idPostGrid.nonce in JavaScript)
• AJAX URL: Available via idPostGrid.ajaxUrl in JavaScript

POST parameters:

• settings — JSON string of all grid settings.
• page — Page number to load.
• search — Search term (empty string for no search).
• category — Term ID to filter by (empty string for all).
• reset — Boolean indicating whether this is a fresh load or an append.