Accessing or manipulating a grid in the front-end

In the front-end you’ll have the WPUPG_Grids window variable available that can be accessed using JavaScript and is an object containing all the initialized grids on a web page. Use the grid HTML ID to access the grid object and its methods. For example:

WPUPG_Grids['wpupg-grid-post-grid'].layout();

This will execute the layout function for that grid.

Forcing a grid to relayout itself

The example code above is very simple but can be useful when you need to force a grid to relayout itself, basically making sure all of the grid items are aligned correctly in regards to the available space.

You might need to do this when using the grid in combination with a tab layout, where the grid is initially hidden en then suddenly comes into few. For a tab layout you could use JavaScript to hook into the click on a new tab link and then do that relayout after a few milliseconds, for example.

Waiting for the grid to be initialized

If you want to access any of the grid functions (like the .layout() example above, or the .on() function to hook into grid events), you’ll need to make sure the grid has already been initialized, so those functions actually exist. Whenever a grid is done initializing it will trigger the wpupgInitReady window event, so you can listen for that:

window.addEventListener( 'wpupgInitReady', function (e) {
	const grid = e.detail;
	// Do something with the grid.
} );

Hooking into grid events

We use a custom event system that can be hooked into look this:

WPUPG_Grids['wpupg-grid-post-grid'].on('itemsLoaded', function( data ) {
	console.log('Grid was filtered, do something!');
});

The code in that function will run whenever that event gets triggered. These are all the available events you can use:

Event Name	Event Trigger	Event Data
initReady	Will fire once, when the grid has been fully initialized	/
restoredDeeplink	Will fire once, when an optional deeplink has been restored	true/false wether there was a deeplink
itemsLoaded	Fires when new data is loaded through the API	data object return by API
visibleItemsChanged	Fires when the visible items in the grid change	/
filter	Fires when the grid gets filtered	/

Accessing the grid filter state

Each grid filter is its own object with their own functions. An array of the different grid filters can be accessed like this:

WPUPG_Grids['wpupg-grid-post-grid'].filters;

This will execute the layout function for that grid. When you have filter you can access its state like this:

filter.getSelectors();

A similar function is available for the optional grid pagination:

if ( false !== WPUPG_Grids['wpupg-grid-post-grid'].pagination ) {
	WPUPG_Grids['wpupg-grid-post-grid'].pagination.getSelector();
}

Alternatively, you can easily get the filter string used to filter the grid like this:

WPUPG_Grids['wpupg-grid-post-grid'].getFilterString();

All available variables and functions

We tried to list the most useful ones above. To find out all available functions and attributes you can use the following code in the JS console:

console.log( WPUPG_Grids['wpupg-grid-your-grid-id'] );

You can also dig into our code in the /wp-ultimate-post-grid/assets/js/public/ folder.