AJAX Loading & Pagination

All interactive features — search, category filtering, and load more — are powered by AJAX. This means the page never reloads; the grid updates in place.

Initial Render

When the page loads, the plugin renders the first batch of posts server-side as part of the page HTML. This ensures the grid is visible immediately and works even if JavaScript fails to load. The grid’s configuration is stored as a data-settings attribute on the wrapper element for the JavaScript to read.

Search

When a visitor types in the search input, the JavaScript waits 300 milliseconds after the last keystroke before sending an AJAX request. This debouncing prevents the server from being hit on every character. The request sends the search term along with all current grid settings. The server runs a WP_Query with the search parameter and returns the matching post HTML. The grid replaces its contents with the results.

Category Filter

Clicking a category filter button sends an AJAX request with the selected term ID. The server queries posts limited to that term and returns the HTML. The active button is highlighted and the grid resets to page 1. Clicking “All” clears the filter.

Load More

Clicking “Load More” increments the page counter and sends an AJAX request for the next batch. The server returns the next set of posts, and the JavaScript appends them below the existing items (rather than replacing). When the current page reaches the maximum page count, the button hides automatically.

Combined Behavior

Search and filter can be used together. When a visitor searches while a category filter is active, both constraints are applied to the query. Changing either one resets pagination back to page 1.

Featured Post Behavior

The featured post is rendered separately at the top of the grid and excluded from the regular query. When a search or filter is active, the featured post is temporarily hidden. When the visitor clears the search and resets the filter, the featured post reappears in its original position.