WP Grid Builder

https://docs.wpgridbuilder.com/
Admin
WP Grid Builder is a versatile WordPress plugin designed to streamline the creation of grid layouts...
Tokens:62,552
Snippets:676
Trust Score:9.7
Update:1 week ago
Show doc for...
Tokens:
Raw
### wpgb.lightbox.on('dragStart', callback)

Source: https://docs.wpgridbuilder.com/resources/event-lightbox-dragstart

Registers a callback to be executed when the lightbox drag starts and scrolling begins. The callback receives the original event object.

```APIDOC
## wpgb.lightbox.on('dragStart', callback)

### Description
This event is triggered when dragging starts and the lightbox starts scrolling.

### Method
`on`

### Arguments
- **event** (object) - Required - Original `event` object.

### Example
```js
wpgb.lightbox.on( 'dragStart', function( event ) {

	console.log( 'dragStart', event );

} );
```
```

--------------------------------

### wpgb.lightbox.on('load') event handler

Source: https://docs.wpgridbuilder.com/resources/event-lightbox-load

Use this snippet to listen for the 'load' event, which is triggered before the lightbox item starts to load. The callback receives the item node opened in the lightbox. This example logs the item to the console.

```javascript
wpgb.lightbox.on( 'load', function( item ) {

	console.log( 'load', item );

} );
```

--------------------------------

### wpgb.lightbox.on('load', callback)

Source: https://docs.wpgridbuilder.com/resources/event-lightbox-load

Registers a callback to be executed before the lightbox item starts to be loaded. The callback receives the item node that is about to be opened.

```APIDOC
## wpgb.lightbox.on('load', callback)

### Description
This event is triggered before the lightbox item starts to be loaded.

### Method
Event registration (JavaScript)

### Arguments
- **item** (node) - Node opened in the lightbox

### Example
```js
wpgb.lightbox.on( 'load', function( item ) {

	console.log( 'load', item );

} );
```
```

--------------------------------

### wpgb.carousel.on('dragStart', callback)

Source: https://docs.wpgridbuilder.com/resources/event-carousel-dragstart

Registers a callback for the dragStart event. The event is triggered when dragging starts and the slider starts scrolling. The callback receives the original event object.

```APIDOC
## wpgb.carousel.on('dragStart', callback)

### Description
Registers a callback for the dragStart event. This event is triggered when dragging starts and the slider starts scrolling.

### Method
Event subscription

### Arguments
- **event** (object) - Required - Original `event` object

### Example
```js
wpgb.carousel.on( 'dragStart', function( index ) {

	console.log( 'dragStart', event );

} );
```
```

--------------------------------

### wp_grid_builder/layout/wrapper_start

Source: https://docs.wpgridbuilder.com/resources/action-layout-wrapper-start

This action hook is fired after the HTML layout wrapper start. It allows developers to output custom HTML after the layout wrapper start.

```APIDOC
## Action: wp_grid_builder/layout/wrapper_start

### Description
This action is fired after the HTML layout wrapper start. It allows to add custom HTML after the layout wrapper start.

### Hook
`wp_grid_builder/layout/wrapper_start`

### Parameters
This action does not accept any parameters.

### Usage Example
```php
function prefix_wrapper_start() {

	// Output your HTML here.

}
add_action( 'wp_grid_builder/layout/wrapper_start', 'prefix_wrapper_start' );
```

```

--------------------------------

### wp_grid_builder/card/wrapper_start

Source: https://docs.wpgridbuilder.com/resources/action-card-wrapper-start

Action hook that fires before the HTML card wrapper start. Use it to output custom HTML before the card wrapper.

```APIDOC
## wp_grid_builder/card/wrapper_start

### Description
This action is fired before the HTML card wrapper start. It allows to add custom HTML before the card wrapper.

### Arguments
- **$card** - The card object.

### Example
```php
function prefix_card_wrapper_start( $card ) {

	// Output your HTML here.

}
add_action( 'wp_grid_builder/card/wrapper_start', 'prefix_card_wrapper_start', 10, 1 );
```
```

--------------------------------

### JavaScript: Listen to carousel dragStart event

Source: https://docs.wpgridbuilder.com/resources/event-carousel-dragstart

Use this snippet to attach a handler to the 'dragStart' event. The callback receives an 'index' parameter, but the example logs the 'event' object. Note: the example references 'event' which is not defined in the callback signature.

```JavaScript
wpgb.carousel.on( 'dragStart', function( index ) {

	console.log( 'dragStart', event );

} );
```

--------------------------------

### Listen to the 'refresh' event with wpgb.facets.on

Source: https://docs.wpgridbuilder.com/resources/event-facet-refresh

Use this JavaScript snippet to hook into the 'refresh' event, which fires before facets are refreshed. The example logs 'refresh' to the console when the event is triggered.

```JavaScript
wpgb.facets.on( 'refresh', function() {

	console.log( 'refresh' );

} );
```

--------------------------------

### Get facet parameters with wpgb.facets.getParams()

Source: https://docs.wpgridbuilder.com/resources/facet-methods

Retrieves the selected values (parameters) of a facet by slug.

```JavaScript
wpgb.facets.getParams( 'facet_slug' );
```

--------------------------------

### Hook into wp_grid_builder/loaded (PHP)

Source: https://docs.wpgridbuilder.com/resources/action-loaded

Use this action to run custom code when the plugin is loaded and instantiated, before it is initialized. The example shows adding a callback function via add_action.

```PHP
function prefix_plugin_loaded() {

	// Run any action you need here.

}
add_action( 'wp_grid_builder/loaded', 'prefix_plugin_loaded' );
```

--------------------------------

### Add custom HTML before card wrapper with wp_grid_builder/card/wrapper_start

Source: https://docs.wpgridbuilder.com/resources/action-card-wrapper-start

Use this snippet to hook into the 'wp_grid_builder/card/wrapper_start' action, which fires before the HTML card wrapper starts. The callback receives the $card object and allows you to output custom HTML before the wrapper. The action is registered with a priority of 10 and accepts one argument.

```php
function prefix_card_wrapper_start( $card ) {

	// Output your HTML here.

}
add_action( 'wp_grid_builder/card/wrapper_start', 'prefix_card_wrapper_start', 10, 1 );
```

--------------------------------

### Add custom HTML after layout wrapper start with wp_grid_builder/layout/wrapper_start

Source: https://docs.wpgridbuilder.com/resources/action-layout-wrapper-start

Use this action hook to insert custom HTML right after the layout wrapper starts. The example defines a callback function and registers it with add_action. Place this code in your theme's functions.php file.

```PHP
function prefix_wrapper_start() {

	// Output your HTML here.

}
add_action( 'wp_grid_builder/layout/wrapper_start', 'prefix_wrapper_start' );
```

--------------------------------

### wpgb.lightbox.on('open', callback)

Source: https://docs.wpgridbuilder.com/resources/event-lightbox-open

Registers a callback to be executed before the lightbox opens. The callback receives the node that will be opened in the lightbox.

```APIDOC
## wpgb.lightbox.on('open', callback)

### Description
This event is triggered before the lightbox opens.

### Method
Event registration

### Arguments
- **item** (node) - Node opened in the lightbox

### Example
```js
wpgb.lightbox.on( 'open', function( item ) {

	console.log( 'open', item );

} );
```
```

--------------------------------

### Initialize grid layout with wpgb.grid.init()

Source: https://docs.wpgridbuilder.com/resources/grid-methods

Initializes a grid layout. Mainly used after calling destroy() since the plugin auto-initializes on load.

```JavaScript
wpgb.grid.init();
```

--------------------------------

### Search route response example

Source: https://docs.wpgridbuilder.com/resources/guide-rest-api-routes

Example response from the search route. It returns an array of facet choices that match the search string, each with name, value, parent_id, term_id, and count.

```javascript
[
	{
		name: 'Overshirt',
		value: 'overshirt',
		parent_id: 0,
		term_id: 3,
		count: 34,
	},
	{
		name: 'Flannel Shirt',
		value: 'flannel-shirt',
		parent_id: 0,
		term_id: 8,
		count: 12,
	},
	{…},
	{…},
	{…},
]
```

--------------------------------

### wpgb.grid.init()

Source: https://docs.wpgridbuilder.com/resources/grid-methods

Initializes a grid layout. Mainly used after calling destroy() to re-initialize the grid.

```APIDOC
## wpgb.grid.init()

### Description
Initializes a grid layout. Mainly used after calling destroy() to re-initialize the grid.

### Method
init()

### Endpoint
wpgb.grid.init()

### Parameters
None

### Request Example
```js
wpgb.grid.init();
```

### Response
No return value.
```

--------------------------------

### Fetch route response example

Source: https://docs.wpgridbuilder.com/resources/guide-rest-api-routes

Example response from the fetch route. It contains a facets object indexed by facet IDs, a results array of raw post data, and a total count of posts found.

```javascript
{
	facets: { // Object of facets (index-based by facet ids).
		1: {
			name: 'Categories',
			slug: 'facet_slug_1',
			type: 'checkbox',
			selected: [ 'value_1', 'value_2' ],
			choices: [
				{
					name: 'Value 1',
					value: 'value_1',
					parent_id: 0,
					term_id: 1,
					count: 10,
				},
				{
					name: 'Value 2',
					value: 'value_2',
					parent_id: 0,
					term_id: 2,
					count: 8,
				},
				{…},
				{…},
				{…},
			],
			settings: {
				hierarchical: 0,
				show_less_label: '- Show less',
				show_more_label: '+ Show more',
			},
		},
		2: {…},
		3: {…},
		4: {…},
	},
	results: [ // Array of raw post data.
		{…},
		{…},
		{…},
		{…},
		{…},
		{…},
		{…},
		{…},
		{…},
		{…},
	],
	total: 3000 // Total amount of posts found.
}
```

--------------------------------

### wpgb.facets.init()

Source: https://docs.wpgridbuilder.com/resources/facet-methods

Initializes the facets script. This is mainly used after calling destroy() to reinitialize facets.

```APIDOC
## wpgb.facets.init()

### Description
Initializes the facets script. This is mainly used after calling destroy() to reinitialize facets.

### Method
init()

### Endpoint
wpgb.facets.init()

### Parameters
None

### Request Example
```js
wpgb.facets.init();
```

### Response
No return value.
```

--------------------------------

### Initialize lightbox with wpgb.lightbox.init()

Source: https://docs.wpgridbuilder.com/resources/lightbox-methods

Initializes the lightbox attached to a grid. Mainly used after calling destroy() since the plugin initializes it automatically on load.

```JavaScript
wpgb.lightbox.init();
```

--------------------------------

### Initialize facets with wpgb.facets.init()

Source: https://docs.wpgridbuilder.com/resources/facet-methods

Initializes the facets script. Mainly used after calling destroy() to reinitialize the instance. Automatically done on plugin load.

```JavaScript
wpgb.facets.init();
```

--------------------------------

### wpgb.facets.getParams()

Source: https://docs.wpgridbuilder.com/resources/facet-methods

Gets parameters (selected values) of a facet.

```APIDOC
## wpgb.facets.getParams()

### Description
Gets parameters (selected values) of a facet.

### Method
getParams()

### Endpoint
wpgb.facets.getParams()

### Parameters
#### Required Parameters
- **facet_slug** (string) - Required - The slug of the facet.

### Request Example
```js
wpgb.facets.getParams( 'facet_slug' );
```

### Response
Returns the parameters (selected values) of the facet.
```

--------------------------------

### wpgb.lightbox.init()

Source: https://docs.wpgridbuilder.com/resources/lightbox-methods

Initializes the lightbox attached to a grid. This is mainly used after calling destroy() to reinitialize the lightbox, as it is automatically initialized on plugin load.

```APIDOC
## wpgb.lightbox.init()

### Description
Initializes the lightbox attached to a grid. This is mainly used after calling destroy() to reinitialize the lightbox, as it is automatically initialized on plugin load.

### Method
init

### Syntax
wpgb.lightbox.init();

### Parameters
None

### Return Value
None

### Example
```js
wpgb.lightbox.init();
```
```

--------------------------------

### wpgb.facets.getFacet()

Source: https://docs.wpgridbuilder.com/resources/facet-methods

Gets facet properties by ID or slug.

```APIDOC
## wpgb.facets.getFacet()

### Description
Gets facet properties by ID or slug.

### Method
getFacet()

### Endpoint
wpgb.facets.getFacet()

### Parameters
#### Required Parameters
- **facet** (number or string) - Required - Facet ID (number) or slug (string).

### Request Example
```js
// Get specific facet by its id.
wpgb.facets.getFacet( 1 );
// Get specific facet by its slug.
wpgb.facets.getFacet( 'facet_slug' );
```

### Response
Returns the facet properties.
```

--------------------------------

### wpgb.facets.on('init', callback)

Source: https://docs.wpgridbuilder.com/resources/event-facet-init

Registers a callback to be executed when facets are initialized before asynchronous rendering. The callback receives an object containing facet ids and associated properties.

```APIDOC
## wpgb.facets.on( 'init', callback )

### Description
This event is triggered when facets are initialized before being rendered asynchronously. Facets can be empty at this time if they were not put into cache by the plugin.

### Method
Event subscription

### Arguments
- **facets** (object) - Required - Holds facet ids and associated properties.

### Example
```js
wpgb.facets.on( 'init', function( facets ) {

	console.log( 'init', facets  );

} );
```
```

--------------------------------

### Get facet properties with wpgb.facets.getFacet()

Source: https://docs.wpgridbuilder.com/resources/facet-methods

Retrieves properties of a specific facet by its ID or slug.

```JavaScript
// Get specific facet by its id.
wpgb.facets.getFacet( 1 );
// Get specific facet by its slug.
wpgb.facets.getFacet( 'facet_slug' );
```

--------------------------------

### wpgb.carousel.init()

Source: https://docs.wpgridbuilder.com/resources/carousel-methods

Initializes the carousel. Mainly used after calling destroy() to reinitialize the carousel instance.

```APIDOC
## wpgb.carousel.init()

### Description
Initializes the carousel. This is mainly used if you have destroyed the instance with destroy(). Otherwise, the carousel is initialized automatically on load.

### Method
init()

### Usage
```js
wpgb.carousel.init();
```

```

--------------------------------

### wpgb.lightbox.next()

Source: https://docs.wpgridbuilder.com/resources/lightbox-methods

Navigates to the next item in the lightbox when it is opened.

```APIDOC
## wpgb.lightbox.next()

### Description
Navigates to the next item in the lightbox when it is opened.

### Method
next

### Syntax
wpgb.lightbox.next();

### Parameters
None

### Return Value
None

### Example
```js
wpgb.lightbox.next();
```
```

--------------------------------

### Resize lightbox with wpgb.lightbox.resize()

Source: https://docs.wpgridbuilder.com/resources/lightbox-methods

Resizes the lightbox and its content when it is opened.

```JavaScript
wpgb.lightbox.resize();
```

--------------------------------

### Replace main loop in template.php with wpgb_render_grid

Source: https://docs.wpgridbuilder.com/resources/function-render-grid

Pass an array with 'id' and 'is_main_query' set to true to replace the main loop in archive.php, index.php, or search.php templates.

```php
wpgb_render_grid(
	[
		'id' => 1, // Grid id.
		'is_main_query' => true, // To replace loop in archive/index/search.php templates.
	]
);
```

--------------------------------

### wpgb.lightbox.on('loaded', callback)

Source: https://docs.wpgridbuilder.com/resources/event-lightbox-loaded

Registers a callback for the 'loaded' event, which is triggered when the lightbox item is loaded. The callback receives the item node that was opened in the lightbox.

```APIDOC
## wpgb.lightbox.on('loaded', callback)

### Description
This event is triggered when the lightbox item is loaded.

### Method
Event subscription

### Arguments
- **item** (_node_) - Node opened in the lightbox

### Example
```js
wpgb.lightbox.on( 'loaded', function( item ) {

	console.log( 'loaded', item );

} );
```
```

--------------------------------

### Select slide with wpgb.carousel.select()

Source: https://docs.wpgridbuilder.com/resources/carousel-methods

Use this method to select a slide and scroll to it in the carousel. The example passes the slide index 2. Place in the Grid settings – JS field.

```JavaScript
wpgb.carousel.select( 2 );
```

--------------------------------

### POST /wp-json/wpgb/v1/fetch

Source: https://docs.wpgridbuilder.com/resources/guide-rest-api-routes

The fetch route allows to get facets data according to query arguments and facet parameters. This POST route accepts as body content a JSON string.

```APIDOC
## POST /wp-json/wpgb/v1/fetch

### Description
The fetch route allows to get facets data according to query arguments and facet parameters. This POST route accepts as body content a JSON string.

### Method
POST

### Endpoint
/wp-json/wpgb/v1/fetch

### Parameters
#### Request Body
- **facets** (object) - Required - Object of facet slugs with arrays of selected values.
- **source_type** (string) - Required - The source type (e.g., 'post_type').
- **query_args** (object) - Required - Query arguments for the source (e.g., post_type, posts_per_page).

### Request Example
{
  "facets": {
    "facet_slug_1": ["value_1", "value_2"],
    "facet_slug_2": ["value_1"],
    "facet_slug_3": [],
    "facet_slug_4": []
  },
  "source_type": "post_type",
  "query_args": {
    "post_type": "post",
    "posts_per_page": 10
  }
}

### Response
#### Success Response (200)
- **facets** (object) - Object of facets (index-based by facet ids). Each facet contains name, slug, type, selected, choices, and settings.
- **results** (array) - Array of raw post data.
- **total** (number) - Total amount of posts found.

#### Response Example
{
  "facets": {
    "1": {
      "name": "Categories",
      "slug": "facet_slug_1",
      "type": "checkbox",
      "selected": ["value_1", "value_2"],
      "choices": [
        {
          "name": "Value 1",
          "value": "value_1",
          "parent_id": 0,
          "term_id": 1,
          "count": 10
        },
        {
          "name": "Value 2",
          "value": "value_2",
          "parent_id": 0,
          "term_id": 2,
          "count": 8
        }
      ],
      "settings": {
        "hierarchical": 0,
        "show_less_label": "- Show less",
        "show_more_label": "+ Show more"
      }
    }
  },
  "results": [],
  "total": 3000
}
```

--------------------------------

### Go to next item with wpgb.lightbox.next()

Source: https://docs.wpgridbuilder.com/resources/lightbox-methods

Moves to the next item in the lightbox when it is opened.

```JavaScript
wpgb.lightbox.next();
```

--------------------------------

### wpgb.grid.on('layout', callback)

Source: https://docs.wpgridbuilder.com/resources/event-grid-layout

Subscribe to the 'layout' event to be notified after grid items are laid out. The callback receives an array of grid items.

```APIDOC
## Event: layout

### Description
This event is triggered after grid items are laid out.

### Arguments
- **items** (array) - Hold grid items

### Example
```js
wpgb.grid.on( 'layout', function( items ) {

	console.log( 'layout', items );

} );
```
```

--------------------------------

### POST /wp-json/wpgb/v1/search

Source: https://docs.wpgridbuilder.com/resources/guide-rest-api-routes

The search route is pretty similar to the fetch route excepted that it allows to search for choices from a facet slug. It is pretty handy to create autocomplete list or asynchronous combobox for example.

```APIDOC
## POST /wp-json/wpgb/v1/search

### Description
The search route is pretty similar to the fetch route excepted that it allows to search for choices from a facet slug. It is pretty handy to create autocomplete list or asynchronous combobox for example.

### Method
POST

### Endpoint
/wp-json/wpgb/v1/search

### Parameters
#### Request Body
- **facets** (object) - Required - Object of facet slugs with arrays of selected values.
- **source_type** (string) - Required - The source type (e.g., 'post_type').
- **query_args** (object) - Required - Query arguments for the source (e.g., post_type, posts_per_page).
- **search** (object) - Required - Object containing the facet slug to search and the search string.
  - **facet** (string) - Required - The facet slug to search within.
  - **string** (string) - Required - The search string.

### Request Example
{
  "facets": {
    "facet_slug_1": ["value_1", "value_2"],
    "facet_slug_2": ["value_1"]
  },
  "source_type": "post_type",
  "query_args": {
    "post_type": "post",
    "posts_per_page": 10
  },
  "search": {
    "facet": "facet_slug_3",
    "string": "shirt"
  }
}

### Response
#### Success Response (200)
- **array** (array) - Array of facet choices from the searched facet. Each choice contains name, value, parent_id, term_id, and count.

#### Response Example
[
  {
    "name": "Overshirt",
    "value": "overshirt",
    "parent_id": 0,
    "term_id": 3,
    "count": 34
  },
  {
    "name": "Flannel Shirt",
    "value": "flannel-shirt",
    "parent_id": 0,
    "term_id": 8,
    "count": 12
  }
]
```

--------------------------------

### Handle carousel dragEnd event

Source: https://docs.wpgridbuilder.com/resources/event-carousel-dragend

Registers a callback for the 'dragEnd' event on the carousel. The callback logs the event object to the console. Note: the example uses 'event' in the log, but the parameter is named 'index'.

```JavaScript
wpgb.carousel.on( 'dragEnd', function( index ) {

	console.log( 'dragEnd', event );

} );
```

--------------------------------

### Render grid by ID in functions.php

Source: https://docs.wpgridbuilder.com/resources/function-render-grid

Call wpgb_render_grid( 1 ) to render the grid with ID 1. Place this in functions.php.

```php
// Render grid id 1.
wpgb_render_grid( 1 );
```

--------------------------------

### wp_grid_builder/grid/the_object

Source: https://docs.wpgridbuilder.com/resources/filter-grid-the-object

Filter hook to modify object properties after setup in the loop. Called for each object (post, term, user) after the query. Allows modification of properties like title, excerpt, thumbnail, media, etc.

```APIDOC
## Filter: wp_grid_builder/grid/the_object

### Description
This filter is called when an object (post, term or user) has been setup in the loop after the `WP_Query`, `WP_Term_Query` or `WP_User_Query`. It allows to modify object properties like the title, excerpt, etc.

### Hook
`wp_grid_builder/grid/the_object`

### Arguments
- **$object** (object) - The object (post, term, or user) that has been set up in the loop.

### Return Value
- **$object** (object) - The modified object.

### Usage
Add a callback function to the filter using `add_filter()`. The callback receives the object and must return the modified object.

### Examples

#### Custom thumbnail
Display a custom image in a card from a custom field that stores the image ID. Works with ACF or Meta Box image field (not from a repeater/clone/group). Also works with any custom fields plugin that stores the image ID.

```php
function set_custom_card_thumbnail( $object ) {

	// Get settings of the current grid.
	$grid = wpgb_get_grid_settings();

	// If it does not match the grid id 1.
	if ( 1 !== $grid->id ) {
		return $object;
	}

	// You have to change "custom_field_name" by yours.
	$image_id = get_post_meta( $object->ID, 'custom_field_name', true );

	if ( ! empty( $image_id ) ) {
		$object->post_thumbnail = $image_id;
	}

	return $object;

}
add_filter( 'wp_grid_builder/grid/the_object', 'set_custom_card_thumbnail' );
```

#### Custom gallery
Display a custom gallery in a card from a custom field that stores the image IDs. Works with ACF or Meta Box gallery field (not from a repeater/clone/group). Also works with any custom fields plugin that stores the image IDs.

```php
function set_custom_card_gallery( $object ) {

	// Get settings of the current grid.
	$grid = wpgb_get_grid_settings();

	// If it does not match the grid id 1.
	if ( 1 !== $grid->id ) {
		return $object;
	}

	// You have to change "custom_field_name" by yours.
	$image_ids = get_post_meta( $object->ID, 'custom_field_name', true );

	if ( empty( $image_ids ) ) {
		return $object;
	}

	$object->post_format = 'gallery';
	$object->post_media  = [
		'format'  => 'gallery',
		'sources' => $image_ids,
	];

	// Sets post thumbnail from the first image in the gallery.
	$object->post_thumbnail = reset( $image_ids );

	return $object;

}
add_filter( 'wp_grid_builder/grid/the_object', 'set_custom_card_gallery' );
```

#### Custom video
Display a custom video in a card from a custom field that stores the video URL (hosted video).

```php
function set_custom_card_video( $object ) {

	// Get settings of the current grid.
	$grid = wpgb_get_grid_settings();

	// If it does not match the grid id 1.
	if ( 1 !== $grid->id ) {
		return $object;
	}

	// You have to change "custom_field_name" by yours.
	$video_url = get_post_meta( $object->ID, 'custom_field_name', true );

	if ( empty( $video_url ) ) {
		return $post;
	}

	$object->post_format = 'video';
	$object->post_media  = [
		'format'  => 'video',
		'type'    => 'hosted',
		'sources' => [ $video_url ],
	];

	return $object;

}
add_filter( 'wp_grid_builder/grid/the_object', 'set_custom_card_video' );
```
```

--------------------------------

### Listen to facet change and update price range

Source: https://docs.wpgridbuilder.com/resources/event-facet-change

Use this snippet to react to facet changes. The event fires before content refresh. In the example, when the 'price_range' facet changes, it sets new parameters [10, 20].

```javascript
wpgb.facets.on( 'change', function( slug, values ) {

	// We change the price range
	if ( slug === 'price_range' ) {
		wpgb.facets.setParams( slug , [10, 20] );
	}

} );
```

--------------------------------

### wpgb.facets.on('loaded', callback)

Source: https://docs.wpgridbuilder.com/resources/event-facet-loaded

Registers a callback to be executed when all facets are rendered. The callback receives an object containing facet IDs and associated HTML properties.

```APIDOC
## Event: loaded

### Description
This event is triggered when all facets are rendered.

### Method
Event listener registration via `wpgb.facets.on`.

### Arguments
- **facets** (object) - Holds facet ids and associated HTML properties.

### Example
```js
wpgb.facets.on( 'loaded', function( facets ) {

	console.log( 'loaded', facets );

} );
```
```

--------------------------------

### wpgb_render_grid( array $args )

Source: https://docs.wpgridbuilder.com/resources/function-render-grid

Renders a grid and optionally replaces the main loop in archive, index, or search templates by passing an array with 'id' and 'is_main_query' keys.

```APIDOC
## wpgb_render_grid( array $args )

### Description
Renders a grid and can replace the main loop of archive, index, or search templates.

### Method
Function

### Signature
wpgb_render_grid( $args )

### Parameters
- **$args** (array) - Required - An array of arguments.
  - **id** (int) - Required - The grid ID to render.
  - **is_main_query** (bool) - Optional - Set to true to replace the main loop in archive/index/search.php templates.

### Example
```php
wpgb_render_grid(
	[
		'id' => 1, // Grid id.
		'is_main_query' => true, // To replace loop in archive/index/search.php templates.
	]
);
```
```

--------------------------------

### Add custom HTML before layout wrapper ends (PHP)

Source: https://docs.wpgridbuilder.com/resources/action-layout-wrapper-end

Hooks a custom function into the 'wp_grid_builder/layout/wrapper_end' action to output custom HTML before the layout wrapper ends. The example defines a function 'prefix_layout_wrapper_end' and attaches it to the action.

```PHP
function prefix_layout_wrapper_end() {

	// Output your HTML here.

}
add_action( 'wp_grid_builder/layout/wrapper_end', 'prefix_layout_wrapper_end' );
```

--------------------------------

### PHP: Hook into wp_grid_builder/rest_api/callback to bypass REST response

Source: https://docs.wpgridbuilder.com/resources/action-rest-api-callback

Use this action to intercept the REST API callback and return an earlier response. The callback receives $request and $params. The example shows returning a response via rest_ensure_response().

```PHP
function prefix_rest_api_callback( $request, $params ) {

	// Return an earlier response.
	rest_ensure_response( [...] );

}
add_action( 'wp_grid_builder/rest_api/callback', 'prefix_rest_api_callback', 10, 2 );
```

--------------------------------

### Listen to facet init event with wpgb.facets.on

Source: https://docs.wpgridbuilder.com/resources/event-facet-init

Use this JavaScript snippet in the Grid settings JS field to log the facets object when the 'init' event is triggered. The facets may be empty if not cached by the plugin.

```javascript
wpgb.facets.on( 'init', function( facets ) {

	console.log( 'init', facets  );

} );
```

--------------------------------

### wpgb.facets.on('render', callback)

Source: https://docs.wpgridbuilder.com/resources/event-facet-render

Registers a callback to be executed when a facet is rendered. The callback receives the facet element and the facet object as arguments.

```APIDOC
## wpgb.facets.on('render', callback)

### Description
This event is triggered when a facet is rendered. Use this event to perform custom actions after a facet has been rendered.

### Method
Event listener registration

### Arguments
- **element** (HTMLElement) - The DOM element of the rendered facet.
- **facet** (Object) - The facet object containing facet data and settings.

### Example
```js
wpgb.facets.on( 'render', function( element, facet ) {

	console.log( 'render', element, facet );

} );
```
```

--------------------------------

### Hook into wp_grid_builder/activated in functions.php

Source: https://docs.wpgridbuilder.com/resources/action-activated

Use this PHP snippet in your theme's functions.php file to run custom code when the WP Grid Builder plugin is activated. The example defines a function and registers it with add_action for the 'wp_grid_builder/activated' hook.

```PHP
function prefix_plugin_activated() {

	// Run any action you need here.

}
add_action( 'wp_grid_builder/activated', 'prefix_plugin_activated' );
```

--------------------------------

### wpgb.lightbox.on('close', callback)

Source: https://docs.wpgridbuilder.com/resources/event-lightbox-close

Registers a callback to be executed when the lightbox is about to close. The callback receives the node that was opened in the lightbox.

```APIDOC
## wpgb.lightbox.on('close', callback)

### Description
This event is triggered before the lightbox closes. It provides the node that was opened in the lightbox as an argument.

### Method
Event subscription

### Arguments
- **item** (_node_) - Node opened in the lightbox

### Example
```js
wpgb.lightbox.on( 'close', function( item ) {

	console.log( 'close', item );

} );
```
```

--------------------------------

### Hook into wp_grid_builder/deactivated in functions.php

Source: https://docs.wpgridbuilder.com/resources/action-deactivated

Add this PHP code to your theme's functions.php file to run custom logic when the WP Grid Builder plugin is deactivated. The example defines a function and registers it with the 'wp_grid_builder/deactivated' action hook.

```PHP
function prefix_plugin_deactivated() {

	// Run any action you need here.

}
add_action( 'wp_grid_builder/deactivated', 'prefix_plugin_deactivated' );
```

--------------------------------

### Exclude current post from grid (wp_grid_builder/grid/query_args)

Source: https://docs.wpgridbuilder.com/resources/filter-grid-query-args

Excludes the current post from a grid with ID 1. Handles Ajax requests by getting the post ID from the referer instead of the WordPress global. Uses the post__not_in query argument.

```PHP
function grid_query_exclude_current_post( $query_args, $grid_id ) {

	global $post;

	// If it matches grid id 1.
	if ( 1 === $grid_id ) {

		// The grid is also queried during Ajax requests when filtering or rendering facets.
		// So we have to get the ID of the current post/page thanks to the referer.
		$referer = wp_get_referer();
		$post_id = wp_doing_ajax() ? url_to_postid( $referer ) : $post->ID;

		$query_args['post__not_in'] = [ $post_id ];

	}

	return $query_args;

}
add_filter( 'wp_grid_builder/grid/query_args', 'grid_query_exclude_current_post', 10, 2 );
```

--------------------------------

### wpgb.lightbox.resize()

Source: https://docs.wpgridbuilder.com/resources/lightbox-methods

Resizes the lightbox and its content when it is opened.

```APIDOC
## wpgb.lightbox.resize()

### Description
Resizes the lightbox and its content when it is opened.

### Method
resize

### Syntax
wpgb.lightbox.resize();

### Parameters
None

### Return Value
None

### Example
```js
wpgb.lightbox.resize();
```
```

--------------------------------

### Query upsell products with wp_grid_builder/grid/query_args

Source: https://docs.wpgridbuilder.com/resources/filter-grid-query-args

Adds a filter to modify the grid query to show upsell products for the current product. It checks for grid ID 1 and the wc_get_product function, then retrieves upsell IDs from the product. If no product or IDs, it sets post__in to [0] to return no results.

```PHP
function grid_query_upsell_products( $query_args, $grid_id ) {

	global $post;

	// If it does not match grid id 1.
	if ( 1 !== $grid_id || ! function_exists( 'wc_get_product' ) ) {
		return $query_args;
	}

	$referer = wp_get_referer();
	$post_id = wp_doing_ajax() ? url_to_postid( $referer ) : $post->ID;
	$product = wc_get_product( $post_id );

	if ( empty( $product ) ) {
		$product_ids = [];
	} else {
		$product_ids = $product->get_upsell_ids();
	}

	$query_args['post_type'] = [ 'product' ];
	$query_args['post__in']  = empty( $product_ids ) ? [ 0 ] : $product_ids;

	return $query_args;

}
add_filter( 'wp_grid_builder/grid/query_args', 'grid_query_upsell_products', 10, 2 );
```
Tokens:
Raw