### WP Grid Builder - Core Documentation Links

Source: https://docs.wpgridbuilder.com/resources/guide-create-a-facet

Provides links to the main documentation sections for WP Grid Builder, including getting started guides, FAQs, and specific resource categories.

```en
* [Documentation](https://docs.wpgridbuilder.com)
* [Guides](https://docs.wpgridbuilder.com/category/guides/)
* [Getting Started](https://docs.wpgridbuilder.com/resources/introduction/)
* [FAQ](https://docs.wpgridbuilder.com/resources/general/)
```

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

### WP Grid Builder - Documentation Overview

Source: https://docs.wpgridbuilder.com/resources/guide-create-a-grid

This provides a high-level overview of the WP Grid Builder documentation, including links to getting started, guides, FAQs, and developer resources like PHP functions, filters, actions, and JavaScript events/methods.

```en
* Getting Started
* Guides
  * What are facets?
  * What are styles?
  * Create a Card
  * Create a Facet
  * Create a Style
  * Filter WordPress Blocks
  * Filter Custom Queries
  * Filter Archive Queries
  * Display Archive Results
  * REST API Routes
  * Shortcodes, Blocks, Widgets
* FAQ
* PHP Functions
* PHP Filters
* PHP Actions
* JS Events
* JS Methods
```

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

### WP Grid Builder Installation Methods

Source: https://docs.wpgridbuilder.com/category/getting-started

Outlines the methods for installing the WP Grid Builder plugin, including installation via the WordPress dashboard and via SFTP.

```html
Via WordPress dashboard
Via SFTP
```

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

### Install WP Grid Builder via SFTP

Source: https://docs.wpgridbuilder.com/resources/installation

This guide explains how to install the WP Grid Builder plugin using an SFTP client. It involves uploading the plugin folder to the server and activating it via the WordPress admin panel.

```bash
1. Use a SFTP client (like FileZilla or Cyberduck) to connect to your server
2. Upload **wp-grid-builder** folder to the `/wp-content/plugins/` directory
3. Activate the plugin through the Plugins Menu in WordPress
4. After installation and activation , you will find a new menu item **Gridbuilder ᵂᴾ**
```

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

### Create a Grid Guide

Source: https://docs.wpgridbuilder.com/category/guides/page/2

This guide outlines the main steps for creating a fully functional grid using WP Grid Builder. It mentions that grid settings offer further options not covered in this guide.

```html
<h2><a href="https://docs.wpgridbuilder.com/resources/guide-create-a-grid/">Create a Grid</a></h2>
<p>Posted on <a href="https://docs.wpgridbuilder.com/resources/guide-create-a-grid/">Published April 23, 2019</a> in <a href="https://docs.wpgridbuilder.com/category/guides/">Guides</a></p>
<p>In this guide, we will show you the main steps to create a fully functional grid. Grid settings provide further options and possibilities which are not presented in this guide</p>
```

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

### Install WP Grid Builder via WordPress Dashboard

Source: https://docs.wpgridbuilder.com/resources/installation

This guide details the process of installing the WP Grid Builder plugin using the WordPress admin dashboard. It involves uploading the plugin file after downloading it from your account.

```php
1. Log in to your WP install
2. From the Administration Panels, click on the Plugins Menu
3. Under Plugins, click the **Add New** sub menu
4. Click **Upload Plugin**, and choose the file you’ve downloaded 
5. Then click the **Install Now** button
6. After installation and activation, you will find a new menu item **Gridbuilder ᵂᴾ**
```

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

### WP Grid Builder Create a Grid Guide

Source: https://docs.wpgridbuilder.com/resources

Provides a guide on the fundamental steps to create a functional grid using WP Grid Builder. It mentions that grid settings offer advanced options beyond the scope of this basic guide.

```APIDOC
WP Grid Builder Create a Grid:
  Objective: Create a fully functional grid layout.
  Process:
    1. Access the Grid Builder interface.
    2. Configure basic grid settings (e.g., content source, layout).
    3. Add and configure facets for filtering and interaction.
    4. Customize the appearance of cards and the grid itself.
  Note: Advanced options are available in detailed grid settings.
```

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

### WP Grid Builder - Guides Overview

Source: https://docs.wpgridbuilder.com/resources/guide-create-a-facet

Lists various guides available for WP Grid Builder, covering topics such as understanding facets and styles, creating grids and cards, filtering different query types, and utilizing REST API routes.

```en
* [What are facets?](https://docs.wpgridbuilder.com/resources/guide-what-are-facets/)
* [What are styles?](https://docs.wpgridbuilder.com/resources/what-are-styles/)
* [Create a Grid](https://docs.wpgridbuilder.com/resources/guide-create-a-grid/)
* [Create a Card](https://docs.wpgridbuilder.com/resources/guide-create-a-card/)
* [Create a Style](https://docs.wpgridbuilder.com/resources/create-a-style/)
* [Filter WordPress Blocks](https://docs.wpgridbuilder.com/resources/filter-wordpress-blocks/)
* [Filter Custom Queries](https://docs.wpgridbuilder.com/resources/guide-filter-custom-queries/)
* [Filter Archive Queries](https://docs.wpgridbuilder.com/resources/guide-filter-archive-queries/)
* [Display Archive Results](https://docs.wpgridbuilder.com/resources/guide-display-archive-results/)
* [REST API Routes](https://docs.wpgridbuilder.com/resources/guide-rest-api-routes/)
* [Shortcodes, Blocks, Widgets](https://docs.wpgridbuilder.com/resources/shortcodes-blocks-widgets/)
```

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

### Create a Card Guide

Source: https://docs.wpgridbuilder.com/category/guides/page/2

This guide explains the principle of the card builder in WP Grid Builder, detailing how to use various blocks to display content from posts, terms, or users.

```html
<h2><a href="https://docs.wpgridbuilder.com/resources/guide-create-a-card/">Create a Card</a></h2>
<p>Posted on <a href="https://docs.wpgridbuilder.com/resources/guide-create-a-card/">Published April 25, 2019</a> in <a href="https://docs.wpgridbuilder.com/category/guides/">Guides</a></p>
<p>In this guide, we will describe the principle of the card builder in order to easily create cards. The card builder offers plenty of blocks to insert in card in order to show off content from your posts, terms or users</p>
```

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

### WP Grid Builder Installation Methods

Source: https://docs.wpgridbuilder.com/resources

Explains the two primary methods for installing the WP Grid Builder plugin: through the WordPress dashboard or via SFTP. It assumes the plugin has already been downloaded.

```APIDOC
WP Grid Builder Installation:
  Method 1: Via WordPress Dashboard
    - Navigate to Plugins > Add New > Upload Plugin.
    - Choose the downloaded plugin file and click 'Install Now'.
  Method 2: Via SFTP
    - Connect to your server using an SFTP client.
    - Navigate to the wp-content/plugins/ directory.
    - Upload the plugin folder.
    - Activate the plugin through the WordPress admin area.
```

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

### Gutenberg Block Preview Examples

Source: https://docs.wpgridbuilder.com/changelog

Adds preview examples for Gutenberg blocks within the block inserter. This helps users visualize how blocks will appear and function before inserting them into their content.

```JavaScript
// Conceptual JavaScript for Gutenberg block previews.
// This would typically involve registering blocks with preview content.

// wp.blocks.registerBlockType( 'wpgb/example-block', {
//     title: 'Example Grid Block',
//     icon: 'grid-view',
//     category: 'widgets',
//     edit: function() {
//         return wp.element.createElement( 'div', null, 'This is a preview of the grid block.' );
//     },
//     save: function() {
//         return null; // Save function is for the actual block content
//     }
// });
```

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

### Fetch Route JavaScript Example

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

Example of how to use the Fetch route with JavaScript to retrieve facet data.

```javascript
fetch(
	'//example.com/wp-json/wpgb/v1/fetch',
	{
		method: 'POST',
		headers: {
			'Content-Type': 'application/json'
		},
		body: JSON.stringify(
			{
				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,
				},
			}
		),
	}
)
.then( response => response.json() )
.then( response => console.log( response ) );
```

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

### Search Route JavaScript Example

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

Example of how to use the Search route with JavaScript to find facet choices.

```javascript
fetch(
	'//example.com/wp-json/wpgb/v1/search', {
  	method: 'POST',
	headers: {
        'Content-Type': 'application/json'
    },
  	body: JSON.stringify(
		{
			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',
			},
		}
	),
}
 )
.then( response => response.json() )
.then( response => console.log( response ) );
```

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

### WP Grid Builder Documentation Navigation

Source: https://docs.wpgridbuilder.com/resources/create-a-style

Provides an overview of the documentation structure for WP Grid Builder, including links to guides, FAQs, PHP functions, filters, actions, and JS events/methods.

```APIDOC
Project: /context7/wpgridbuilder

Documentation Structure:
  - Getting Started
  - Guides:
    - What are facets?
    - What are styles?
    - Create a Grid
    - Create a Card
    - Create a Facet
    - Filter WordPress Blocks
    - Filter Custom Queries
    - Filter Archive Queries
    - Display Archive Results
    - REST API Routes
    - Shortcodes, Blocks, Widgets
  - FAQ
  - PHP Functions
  - PHP Filters
  - PHP Actions
  - JS Events
  - JS Methods
```

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

### WP Grid Builder Layout Wrapper Start Action

Source: https://docs.wpgridbuilder.com/resources/page/6

This action is fired after the HTML layout wrapper starts. It allows adding custom HTML after the layout wrapper start.

```APIDOC
action: /layout/wrapper_start
Description: Adds custom HTML after the layout wrapper starts.
Category: PHP Actions
Posted: April 19, 2019
```

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

### Card Wrapper Start Action

Source: https://docs.wpgridbuilder.com/resources/page/5

This action is fired before the HTML card wrapper begins. It allows for the insertion of custom HTML before the card wrapper.

```APIDOC
action: /card/wrapper_start
Description: This action is fired before the HTML card wrapper start. It allows to add custom HTML before the card wrapper
Category: PHP Actions
Posted: April 18, 2019
```

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

### WP Grid Builder /grid/query_args Examples

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

Demonstrates how to use the /grid/query_args filter to modify the arguments used for querying posts or products in WP Grid Builder. This includes examples for excluding the current post, including specific posts, and handling related or on-sale products.

```php
// Exclude current post
add_filter( '/grid/query_args', function( $args ) {
    if ( is_singular() ) {
        $args['post__not_in'] = array( get_the_ID() );
    }
    return $args;
} );

// Include posts by IDs
add_filter( '/grid/query_args', function( $args ) {
    $args['post__in'] = array( 10, 20, 30 );
    return $args;
} );

// Related posts (example assumes a custom field for related posts)
add_filter( '/grid/query_args', function( $args ) {
    global $post;
    $related_ids = get_post_meta( $post->ID, 'related_posts', true );
    if ( ! empty( $related_ids ) ) {
        $args['post__in'] = explode( ',', $related_ids );
    }
    return $args;
} );

// Related products (WooCommerce example)
add_filter( '/grid/query_args', function( $args ) {
    global $product;
    if ( $product ) {
        $related_ids = wc_get_related_products( $product->get_id() );
        if ( ! empty( $related_ids ) ) {
            $args['post__in'] = $related_ids;
        }
    }
    return $args;
} );

// Cross-sell products (WooCommerce example)
add_filter( '/grid/query_args', function( $args ) {
    global $product;
    if ( $product ) {
        $cross_sell_ids = $product->get_cross_sell_ids();
        if ( ! empty( $cross_sell_ids ) ) {
            $args['post__in'] = $cross_sell_ids;
        }
    }
    return $args;
} );

// Upsell products (WooCommerce example)
add_filter( '/grid/query_args', function( $args ) {
    global $product;
    if ( $product ) {
        $upsell_ids = $product->get_upsell_ids();
        if ( ! empty( $upsell_ids ) ) {
            $args['post__in'] = $upsell_ids;
        }
    }
    return $args;
} );

// On Sale products (WooCommerce example)
add_filter( '/grid/query_args', function( $args ) {
    $args['post__in'] = wc_get_product_ids_on_sale();
    return $args;
} );
```

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

### WP Grid Builder - Create a Grid Guide

Source: https://docs.wpgridbuilder.com/resources/guide-create-a-grid

This section outlines the steps and options for creating a grid in WP Grid Builder. It covers the main sections of grid configuration: Query, Layout, Carousel, Cards, Media, and Advanced settings, with links to detailed sub-sections for each.

```en
## Introduction
A grid is a powerful tool that enables you to query and present content in a structured grid layout. In this comprehensive guide, we will delve into all the grid settings, providing you with the necessary knowledge to create a fully functional and visually appealing grid for your website.
## Query
### Content
### Query Posts
### Query Terms
### Query Users
## Layout
### Behaviour
### Sizing
### Builder
## Carousel
### Behaviour
### Appearance
### Physics
## Cards
### Sizing
### Animation
### Loading
### Colors
## Media
### Behaviour
### Thumbnails
### Loading
## Advanced
### Messages
### Custom CSS
### Custom JavaScript
```

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

### Add Custom HTML Before Card Wrapper

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

Example of how to use the 'wp_grid_builder/card/wrapper_start' action to add custom HTML before the card wrapper begins. This function hooks into the action and outputs custom content.

```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 );
```

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

### Callback Functions for Rendering

Source: https://docs.wpgridbuilder.com/resources/templates

Provides example callback functions for rendering individual posts within a grid and for displaying a message when no results are found. These functions are essential for customizing the output of WP Grid Builder templates.

```php
<?php

/**
 * This callback is called for each post in the loop.
 *
 * @param object $post Holds post, term or user object (depending of the source_type).
 */
function prefix_render_callback( $post ) {
	
	?>
	<article>
		<?php the_title( '<h3>', '</h3>' ); ?>
		<?php the_excerpt(); ?>
	</article>
	<?php
	
}

/**
 * This callback is called when no results match selected facets.
 */
function prefix_noresults_callback() {
	
	?>
	<p><?php esc_html_e( 'Sorry, no results match your search criteria.', 'text-domain' ); ?></p>
	<?php
	
}
```

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

### WP Grid Builder Lightbox Drag Start Event

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

This snippet demonstrates how to listen for the 'dragStart' event on the WP Grid Builder lightbox. It logs the event object to the console when dragging begins.

```JS
wpgb.lightbox.on( 'dragStart', function( event ) {

	console.log( 'dragStart', event );

} );
```

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

### WP Grid Builder Card Wrapper Start Action

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

This PHP action hook is triggered before the HTML card wrapper begins. It allows developers to inject custom HTML content into the card structure. The hook passes the card's layout definition as an argument.

```APIDOC
Action: wp_grid_builder/card/wrapper_start

Description: Fires before the HTML card wrapper start. Allows adding custom HTML before the card wrapper.

Arguments:
  $card (array): Holds card layout (layers/blocks) definition.

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 );
```
```

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

### Callback Functions for Rendering

Source: https://docs.wpgridbuilder.com/resources/filter-templates

Provides example callback functions for rendering individual posts within a grid and for displaying a message when no results are found. These functions are essential for customizing the output of WP Grid Builder templates.

```php
<?php

/**
 * This callback is called for each post in the loop.
 *
 * @param object $post Holds post, term or user object (depending of the source_type).
 */
function prefix_render_callback( $post ) {
	
	?>
	<article>
		<?php the_title( '<h3>', '</h3>' ); ?>
		<?php the_excerpt(); ?>
	</article>
	<?php
	
}

/**
 * This callback is called when no results match selected facets.
 */
function prefix_noresults_callback() {
	
	?>
	<p><?php esc_html_e( 'Sorry, no results match your search criteria.', 'text-domain' ); ?></p>
	<?php
	
}
```

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

### Alphabetical Facet Class Example

Source: https://docs.wpgridbuilder.com/resources/filter-facets

Provides a PHP class 'My_Facet_Class' that implements the necessary methods for an alphabetical facet. It includes methods for querying facet names, rendering the facet UI, and filtering content based on selected letters.

```php
/**
 * Alphabetical Facet class example
 *
 * @class My_Facet_Class
 * @since 1.0.0
 */
class My_Facet_Class {

	/**
	 * Constructor
 *
	 * @access public
	 */
	public function __construct() {}

	/**
	 * Query facet choices
 *
	 * @access public
 *
	 * @param array $facet Holds facet settings.
	 * @return array Holds facet items.
	 */
	public function query_facet( $facet ) {

		global $wpdb;

		$where_clause = wpgb_get_where_clause( $facet );

		// We query facet_name distinctly by the first letter.
		// In this example, we do not use the facet_value because depending of its length it may be encoded (md5).
		$facet_names = $wpdb->get_col(
			$wpdb->prepare(
				"SELECT DISTINCT UPPER(LEFT(facet_name, 1)) AS letter
				FROM {$wpdb->prefix}wpgb_index
				WHERE slug = %s
				AND $where_clause
				GROUP BY letter",
				$facet['slug']
			)
		); // WPCS: unprepared SQL ok.

		return $facet_names;

	}

	/**
	 * Render facet choices
 *
	 * @access public
 *
	 * @param array $facet Holds facet settings.
	 * @param array $items Holds facet items.
	 * @return string Facet markup.
	 */
	public function render_facet( $facet, $items ) {

		$output  = '<div class="wpgb-alphabetical-facet">';
		$output .= '<ul class="wpgb-inline-list">';
		$output .= $this->render_letters( $facet, $items );
		$output .= '</ul>';
		$output .= '</div>';

		return $output;

	}

	/**
	 * Render letter buttons
 *
	 * @access public
 *
	 * @param array $facet Holds facet settings.
	 * @param array $items Holds facet items.
	 * @return string Letter buttons markup.
	 */
	public function render_letters( $facet, $items ) {

		$output  = '';
		$letters = str_split( 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' );

		foreach ( $letters as $letter ) {
			$output .= '<li>' . $this->render_button( $facet, $items, $letter ) . '</li>';
		}

		return $output;

	}

	/**
	 * Render letter button
 *
	 * @access public
 *
	 * @param array  $facet Holds facet settings.
	 * @param array  $items Holds facet items.
	 * @param string $letter Current letter.
	 * @return string Letter button markup.
	 */
	public function render_button( $facet, $items, $letter ) {

		$checked  = in_array( $letter, $facet['selected'], true );
		$disabled = ! in_array( $letter, (array) $items, true );
		$pressed  = $checked ? 'true' : 'false';
		$tabindex = $disabled ? -1 : 0;

		$output  = '<div class="wpgb-button" role="button" aria-pressed="' . esc_attr( $pressed ) . '" tabindex="' . esc_attr( $tabindex ) . '">';
		$output .= '<input type="hidden" name="' . esc_attr( $facet['slug'] ) . '" value="' . esc_attr( $letter ) . '"' . disabled( $disabled, true, false ) . '>';
		$output .= '<span class="wpgb-button-label">' . esc_html( $letter ) . '</span>';
		$output .= '</div>';

		return $output;

	}

	/**
	 * Query object ids (post, user, term) for selected facet values
 *
	 * @since 1.0.0
	 * @access public
 *
	 * @param array $facet Holds facet settings.
	 * @return array Holds queried facet object ids.
	 */
	public function query_objects( $facet ) {

		global $wpdb;

		$placeholders = rtrim( str_repeat( '%s,', count( $facet['selected'] ) ), ',' );

		// We query object ids that match selected letter(s) from index table.
		$object_ids = $wpdb->get_col(
			$wpdb->prepare(
				"SELECT DISTINCT object_id
				FROM {$wpdb->prefix}wpgb_index
				WHERE slug = %s
				AND UPPER(LEFT(facet_name, 1)) IN ($placeholders)",

```

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

### WP Grid Builder Shortcodes, Blocks, and Widgets

Source: https://docs.wpgridbuilder.com/category/guides

WP Grid Builder integrates seamlessly with various WordPress content editing methods, including Shortcodes, Gutenberg Blocks, and Widgets. This ensures flexibility for users regardless of their preferred page building approach.

```php
// Example of using a shortcode to insert a grid
[wp_gridbuilder id="123"]

// Example of using a Gutenberg Block for a facet
// (Block UI would handle specific settings)

// Example of using a Widget in a sidebar
// (Widget UI would handle specific settings)
```

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

### WP Grid Builder PHP Actions

Source: https://docs.wpgridbuilder.com/resources/filter-blocks

This section details the PHP actions available in WP Grid Builder, which allow developers to hook into specific points in the execution flow to perform custom tasks. The 'loaded' action is a primary example, often used for initialization.

```php
add_action( 'wpgridbuilder/loaded', 'my_custom_init_function' );
```

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

### Modify Cron Max Execution Time

Source: https://docs.wpgridbuilder.com/resources/filter-cron-max-execution-time

This filter allows you to modify the maximum execution time (in seconds) for the WP Grid Builder cron indexer. It's called every time the indexer starts a cron process. The provided example sets the execution time to 60 seconds.

```php
function prefix_cron_max_execution_time( $execution_time ) {

	// Set execution time to 60s.
	return 60;

}
add_filter( 'wp_grid_builder/cron/max_execution_time', 'prefix_cron_max_execution_time', 10, 1 );
```

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

### Filter Query String Example

Source: https://docs.wpgridbuilder.com/resources/filter-facet-query-string

A PHP code example demonstrating how to use the `wp_grid_builder/facet/query_string` filter to modify query parameters. This example sets specific facet values for a given grid ID and action.

```PHP
function prefix_filter_query( $query_string, $grid_id, $action ) {

	// If the grid ID is "1234" and the content is not filtered on first render.
	if ( 1234 === $grid_id && 'render' === $action && empty( $query_string ) ) {
		
		$query_string = [
			'rating_facet_slug'   => [ '4' ],
			'price_facet_slug'    => [ '35', '150' ],
			'category_facet_slug' => [ 'clothing', 'hoodies' ]
		];
	}
	
	return $query_string;

}
add_filter( 'wp_grid_builder/facet/query_string', 'prefix_filter_query', 10, 3 );
```

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

### WP Grid Builder Requirements

Source: https://docs.wpgridbuilder.com/category/getting-started

Details the system requirements for running the WP Grid Builder plugin. It specifies the minimum versions for PHP and MySQL/MariaDB, and browser compatibility.

```php
PHP 5.6+
MySQL 5.5+ or MariaDB 10.0+
```

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

### General FAQ

Source: https://docs.wpgridbuilder.com/category/faq

Provides information about what WP Grid Builder is and its core functionality as a WordPress plugin for querying content.

```html
<h2>[General FAQ](https://docs.wpgridbuilder.com/resources/general/)
Posted on [Published April 23, 2019](https://docs.wpgridbuilder.com/resources/general/) in [FAQ](https://docs.wpgridbuilder.com/category/faq/)
What is WP Grid Builder ? WP Grid Builder is a WordPress plugin which allows to query WordPress content (post types, users
```

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

### Modify Index Row Data with PHP

Source: https://docs.wpgridbuilder.com/resources/filter-indexer-row

A PHP example demonstrating how to use the 'wp_grid_builder/indexer/row' filter to modify index row data. This example specifically targets facet ID '1' and reformats the date.

```PHP
function prefix_row_data( $row, $object_id, $facet ) {

	// We only process facet ID "1".
	if ( 1 !== $facet['id'] ) {
		return $row;
	}

	// We change the date format to match date facet format (Y-m-d or Y-m-d h:i:s).
	$row['facet_value'] = date( 'Y-m-d', strtotime( $row['facet_value'] ) );
	$row['facet_name']  = $row['facet_value'];

	// Return row to insert in the index table.
	return $row;

}
add_filter( 'wp_grid_builder/indexer/row', 'prefix_row_data', 10, 3 );
```

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

### WP Grid Builder Core Concepts

Source: https://docs.wpgridbuilder.com/resources/introduction

Explains the fundamental concepts of WP Grid Builder, including grids, facets, and their independent or combined usage. It highlights the plugin's flexibility in integrating with various content types and page builders.

```markdown
## Concept[#Concept](https://docs.wpgridbuilder.com/resources/introduction/#concept)
WP Grid Builder is a versatile WordPress plugin designed to streamline the creation of **grid layouts** for various types of WordPress content and to filter them. With its intuitive interface and robust features, WP Grid Builder enables users to **query any WordPress content type** and effortlessly build grids. One of its standout features is the integrated **faceted search system** , which allows users to filter content dynamically.
The concepts of grids and facets can be used independently. A grid can function effectively without a facet, and similarly, a facet can stand alone on a page without a grid. Furthermore, facets can be seamlessly integrated with any content besides grids, leveraging [add-ons](https://wpgridbuilder.com/add-ons/) that connect various page builders and [other methods](https://docs.wpgridbuilder.com/resources/guide-filter-custom-queries/).
```

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

### License FAQ

Source: https://docs.wpgridbuilder.com/category/faq

Addresses questions regarding license upgrades for WP Grid Builder, confirming that users can upgrade their plans at any time by covering the difference.

```html
<h2>[License FAQ](https://docs.wpgridbuilder.com/resources/faq-license/)
Posted on [Published April 23, 2019](https://docs.wpgridbuilder.com/resources/faq-license/) in [FAQ](https://docs.wpgridbuilder.com/category/faq/)
Can I upgrade my license plan? Yes, you can upgrade your license at any time. You will only need to cover the
```

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

### WP Grid Builder Lightbox Methods

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

Provides essential methods for managing the lightbox component in WP Grid Builder. These methods allow for initialization, destruction, closing, resizing, and navigating through lightbox content. The `init()` method is primarily for re-initializing after destruction, as it's automatically called on load. The `destroy()` method removes the lightbox instance. `close()` hides the lightbox, `resize()` adjusts its dimensions, and `next()` and `previous()` navigate between items.

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

```javascript
wpgb.lightbox.destroy();
```

```javascript
wpgb.lightbox.close();
```

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

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

```javascript
wpgb.lightbox.previous();
```

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

### v1.4.3 Fixes

Source: https://docs.wpgridbuilder.com/changelog

Addresses issues related to add-on installation from the plugin dashboard and incorrect French translations for add-ons.

```changelog
* fixedIssue when installing add-ons from plugin dashboard.
* fixedWrong French translation when installing add-ons.
```

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

### WP Grid Builder Layout Options

Source: https://docs.wpgridbuilder.com/resources/introduction

Describes the layout features of WP Grid Builder, including support for various grid styles like Masonry, Metro, and Justified, as well as its card editor for customizing individual grid items.

```markdown
## Layout[#Layout](https://docs.wpgridbuilder.com/resources/introduction/#layout)
Organizing and presenting WordPress content through grid layouts is streamlined with WP Grid Builder. The plugin offers an intuitive interface to build grid layouts, supporting various styles such as **Masonry, Metro, and Justified**. Additionally, WP Grid Builder provides a powerful **card editor** for each grid item, enabling users to customize the content and interaction of individual cards within their grid layouts.
```

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

### Grid Object Setup Filter

Source: https://docs.wpgridbuilder.com/category/php-filters/page/3

This filter is called when an object (post, term, or user) is set up in the loop after the WP_Query, WP_Term_Query, or WP_User_Query.

```PHP
add_filter( 'wpgridbuilder/grid/the_object', 'my_custom_grid_object', 10, 2 );
function my_custom_grid_object( $object, $grid_id ) {
    // Modify $object here
    // Example: Add a custom property to the object
    $object->custom_property = 'some_value';
    return $object;
}
```

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

### Support FAQ

Source: https://docs.wpgridbuilder.com/category/faq

Details the type of support offered by WP Grid Builder, emphasizing one-to-one assistance through a ticket system for faster help.

```html
<h2>[Support FAQ](https://docs.wpgridbuilder.com/resources/faq-support/)
Posted on [Published April 23, 2019](https://docs.wpgridbuilder.com/resources/faq-support/) in [FAQ](https://docs.wpgridbuilder.com/category/faq/)
What kind of support do you offer? We provide one-to-one support through our ticket system, means you would get helps faster and more
```

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

### WordPress Version Requirement

Source: https://docs.wpgridbuilder.com/resources/requirements

Specifies the minimum WordPress version required for WP Grid Builder. Ensure your WordPress installation meets this version or higher.

```APIDOC
WordPress Version:
  Minimum: 6.0 or Greater
```

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

### Lightbox Load Event

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

This JavaScript event is triggered before the lightbox item starts to be loaded. It provides access to the node being opened in the lightbox.

```javascript
/**
 * Triggered before the lightbox item starts to be loaded.
 *
 * @param {Node} item - The node opened in the lightbox.
 */
wpGridBuilder.events.on('lightbox/load', function(item) {
  console.log('Lightbox item is about to load:', item);
});

```

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

### Facet Configuration Options

Source: https://docs.wpgridbuilder.com/resources/guide-create-a-facet

This section details the various options available for configuring a facet, including data source and display settings. These options are crucial for defining how a facet interacts with and filters content.

```APIDOC
Option | Description  
---|---  
Content Type to Filter | Type of content used for the grid query/content to be filtered  
Filter Content By | Data used to filter content (WordPress field, taxonomy or custom field)  
Include Terms | Specify terms to retrieve  
Exclude Terms | Specify terms not to retrieve  
Term Depth | Depth level of terms to be retrieved  
Child Of | Parent term to retrieve child terms of  
Parent Term | Parent term to retrieve direct-child terms of  
Include Choices | Specify choices to retrieve  
Exlude Choices | Specify Choices not to retrieve  
Order By | Display order of choices in the facet  
Order | Ascending or descending order of the order by parameter  
Number | Total number of choices to display in the facet  
Limit Choices Number | Display a toggle button if the limit is lower than the Number option  
Expand Button Label | Button label used for expand state  
Collapse Button Label | Button label used for collapse state  
```

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

### Lightbox dragStart Event

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

This event is triggered when dragging starts and the lightbox begins scrolling. It provides access to the original event object.

```APIDOC
event: lightbox:dragStart
  Description: Triggered when dragging starts and lightbox starts scrolling.
  Arguments:
    event (_object_): The original event object.
```

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

### Server Stack Recommendations

Source: https://docs.wpgridbuilder.com/resources/requirements

Provides recommendations for server configurations to enhance performance, especially when filtering large numbers of posts. This includes using VPS or dedicated servers with sufficient RAM, MariaDB, and in-memory data stores like Redis. Support for server settings is not provided.

```APIDOC
Server Stack Recommendations:
  - VPS or Dedicated Server
  - Sufficient RAM
  - MariaDB
  - In-memory data structure store (e.g., Redis)

Recommended Host: Kinsta
```

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

### Carousel dragStart Event

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

This event is triggered when dragging starts and the slider begins to scroll. It provides access to the original event object.

```APIDOC
event carousel dragStart
  Description: This event is triggered when draging starts and slider starts scrolling.
  Arguments:
    event (object): Original `event` object
```

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

### Plugin Initialization Action

Source: https://docs.wpgridbuilder.com/resources/page/5

This action is fired when the plugin is fully initialized, meaning all necessary classes have been instantiated.

```APIDOC
action: /init
Description: This action is fired when the plugin is fully initialized (when all necessary Class are instanciated)
Category: PHP Actions
Posted: April 18, 2019
```

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

### Get Facet Properties

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

Retrieves the properties of a specific facet, either by its ID or slug. This method is essential for accessing facet configurations.

```JS
wpgb.facets.getFacet( 1 );
wpgb.facets.getFacet( 'facet_slug' );
```

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

### Modify Facet Response for Date Facets

Source: https://docs.wpgridbuilder.com/resources/filter-facet-response

Example of a PHP function that hooks into 'wp_grid_builder/facet/response' to modify the response for date facets by adding minDate and maxDate settings.

```PHP
function prefix_facet_response( $response, $facet, $choices ) {

	// If it's a date facet.
	if ( 'date' === $facet['type'] ) {

		// We push min/max dates to be used on the frontend.
		$response['settings']['minDate'] = '2017-04-16';
		$response['settings']['maxDate'] = '2019-01-13';

	}

	return $response;

}
add_filter( 'wp_grid_builder/facet/response', 'prefix_facet_response', 10, 3 );
```

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

### License Management

Source: https://docs.wpgridbuilder.com/resources/faq-license

This section details how to manage your WP Grid Builder license, including upgrading plans, transferring domains, and using the plugin on staging environments.

```APIDOC
Upgrade License Plan:
  - You can upgrade your license plan at any time.
  - You will only need to cover the price difference.
  - Manage licenses from your account: https://wpgridbuilder.com/account/

License Expiration:
  - Usage continues as normal after expiration.
  - Miss direct support and latest feature updates without renewal.

Transfer License Domain:
  - Activate or deactivate a license from the plugin admin panel.
  - Manage license keys directly from your account: https://wpgridbuilder.com/account/

Staging Site Usage:
  - The plugin can be used on staging sites.
  - The following TLDs will not be considered for activation: .dev, dev., *.staging., staging-*, *.test., .test, .local.
  - Usage on localhost is also not considered for activation.
```

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

### Modify Card Tag Example

Source: https://docs.wpgridbuilder.com/resources/filter-card-tag

A PHP code snippet demonstrating how to use the 'wp_grid_builder/card/tag' filter to change the card holder tag to 'div' for a specific grid.

```PHP
function prefix_change_card_tag( $tag, $card, $settings ) {

	// If it matches grid id 1.
	if ( 1 === $settings->id ) {
		$tag = 'div';
	}

	return $tag;

}
add_filter( 'wp_grid_builder/card/tag', 'prefix_change_card_tag', 10, 3 );
```

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

### Support Policy Details

Source: https://docs.wpgridbuilder.com/resources/faq-support

Details the type of support offered, access requirements for paid customers, and the policy regarding customization services.

```text
What kind of support do you offer?
We provide one-to-one support through our [ticket system](https://wpgridbuilder.com/account/support/), means you would get helps faster and more accurate from us. Support does not offer customization.

Who can access support? 
Support is accessible to all paid customers who have active license of the plugin.

Do you offer customization?
We do not offer customization through our support. If you are looking for customization service, you can take a look at [Codeable.io](https://codeable.io/?ref=paT8V).

What does customization mean?
Customisation means modifying the appearance or functionality of the plugin beyond what the plugin options provide.
```

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

### Get Facet Parameters

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

Retrieves the currently set parameters (selected values) for a given facet, identified by its slug. This is useful for understanding user selections.

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

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

### WP Grid Builder Cron Max Execution Time Filter

Source: https://docs.wpgridbuilder.com/resources/page/6

This filter is called every time the indexer starts a cron process. It allows modification of the max_execution_time (in seconds) of the cron indexer.

```APIDOC
filter: /cron/max_execution_time
Description: Modifies the max_execution_time for indexer cron processes.
Category: PHP Filters
Posted: April 19, 2019
```

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

### WP Grid Builder Plugin License Activation

Source: https://docs.wpgridbuilder.com/resources

Describes the process of activating the WP Grid Builder plugin using a license key. Activation is necessary for receiving automatic updates via the WordPress dashboard.

```APIDOC
WP Grid Builder Plugin License Activation:
  1. Obtain your license key from your purchase confirmation.
  2. In the WordPress dashboard, navigate to WP Grid Builder settings.
  3. Enter your license key in the designated field.
  4. Click 'Activate'.
```

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

### WP Grid Builder Media Loading Options

Source: https://docs.wpgridbuilder.com/resources/guide-create-a-grid

Implements lazy loading for thumbnails to improve grid loading times by deferring the loading of off-screen images. Includes options for loading spinners and blurred placeholders.

```APIDOC
Media Loading:
  Lazy Load Images: Defer loading of images until they are visible in the viewport.
  Loading Spinner: Show a loading animation until the image is loaded.
  Blurred Image: Display a blurred image during loading.
  Background color: Background color of the thumbnail placeholder.
  Spinner Color: Color of the loading spinner if enabled.
```

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

### Carousel dragStart Event

Source: https://docs.wpgridbuilder.com/category/js-events/page/3

This JavaScript event fires when the user initiates a drag action on the carousel. It signals the beginning of a drag operation, allowing for setup or tracking of drag interactions.

```javascript
document.addEventListener('carousel:dragStart', function(event) {
  console.log('Carousel drag start event triggered:', event);
});
```

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

### WP Grid Builder Query Content Options

Source: https://docs.wpgridbuilder.com/resources/guide-create-a-grid

Defines the general query settings applicable to all content types in WP Grid Builder, including pagination and ordering.

```APIDOC
Query Content Options:
  Per page: Number of items to display per page.
  Offset: Number of items to skip.
  Order By: Parameter to sort retrieved items.
  Order: Sorting order (Ascending or Descending).
```

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

### Introduction to WP Grid Builder Styles

Source: https://docs.wpgridbuilder.com/resources/create-a-style

Explains the purpose of styles in WP Grid Builder, emphasizing their role in controlling facet appearance through CSS properties.

```APIDOC
Styles in WP Grid Builder:
  - Purpose: Change the appearance of one or several facets.
  - Method: Adjust every detail using CSS properties.
  - Version Introduced: WP Grid Builder V2.
  - Further Information: Link to 'What are styles?' documentation.
```

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

### Replace Main Loop with Grid

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

This example shows how to use wpgb_render_grid to replace the default WordPress loop in template files such as archive.php, index.php, or search.php. It requires setting the 'is_main_query' argument to true.

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