JS Methods

How it worksHow it works

JS Methods are actions done by the plugin. Public methods allows to trigger an action programmatically and at any time.

Methods can be set directly in your grid settings or in your own JS script.

Methods in grid settingsMethods in grid settings

All Method examples presented in this documentation can be directly applied in your grid settings under customization tab in the JS field and will be done only for this grid. In this case the variable wpgb represents the main instance of the plugin holding all sub instances of the current grid.

JavaScript
Grid settings – JS field
console.dir( wpgb ); // Holds all instances.

// Where 'instanceName' can be: facets, grid, carousel, lightbox.
// Where 'methodName' is the method name of the instance.
wpgb.instanceName.methodName();

Methods in external scriptMethods in external script

To use your own .js file to set methods from the plugin, you need at first to enqueue your script in the WordPress way and to set as dependency Gridbuilder ᵂᴾ handle script:

PHP
functions.php
function prefix_custom_script() {

	// We check if CONSTANT 'WPGB_SLUG' from the plugin exists.
	if ( defined( 'WPGB_SLUG' ) ) {
		// We enqueue our script with as dependency the plugin script 'WPGB_SLUG'.
		wp_enqueue_script( 'my-script-handle', 'url/test.js', [ WPGB_SLUG ], 1, true );
	}

}

add_action( 'wp_enqueue_scripts', 'prefix_custom_script' );

Now that we have enqueued our own script we will be able to trigger methods from the plugin.

Because a page can contain several grids and facets (attached to each grid), we need to listen for each grid initialization thanks to the global event manager of the plugin stored in the global window object WP_Grid_Builder:

JavaScript
your-script.js
// We listen every time a grid/template is initialized.
window.WP_Grid_Builder && WP_Grid_Builder.on( 'init', function( wpgb ) {

    console.dir( wpgb ); // Holds all instances.

    // Where 'instanceName' can be: facets, grid, carousel, lightbox.
    // Where 'methodName' is the method name of the instance.
    wpgb.instanceName.methodName();

} );