Shortcodes, Blocks, Widgets

Introduction#Introduction

WP Grid Builder seamlessly integrates with Shortcodes, Blocks, and Widgets. This ensures that, regardless of your preferred editing method, whether it’s Gutenberg, the Classic Editor, or a Page builder, you can effortlessly insert your grids or facets into your pages.

Insert Shortcodes#Insert Shortcodes

If you are using the WordPress Classic Editor or a page builder not natively integrated with WP Grid Builder, you can still utilize shortcodes to showcase grids and facets on your pages.

The grid shortcode accepts an id attribute, which corresponds to the grid ID found in the grid settings. You can also copy the complete shortcode directly from the grid settings. Here’s an example of a grid shortcode that allows you to display the grid ID 1234:

[wpgb_grid id="1234"]

The facet shortcode requires two mandatory attributes: id and grid, which respectively correspond to the facet ID to display and the grid ID to filter. You can also directly copy the shortcode from the facet settings. Below is an example of a facet shortcode that allows you to display facet 1 and to filter the grid 1234:

[wpgb_facet id="1" grid="1234"]

Since version 2 of WP Grid Builder, the facet shortcode accepts a third parameter, which allows you to set a style for it. Here’s an example of a shortcode that assigns style 1 to facet 1:

[wpgb_facet id="1" grid="1234" style="1"]

Insert Gutenberg Blocks#Insert Gutenberg Blocks

If you are using Gutenberg editor to build your pages, you will be able to insert Grid or Facet blocks. By default, blocks from WP Grid Builder are not rendered for performance reason. However, you will find in WP Grid Builder Settings > General option to render blocks of the plugin in Gutenberg.

Insert Widgets#Insert Widgets

The plugin comes with 2 widgets: Grid and Facet. So, you will be able to insert grids or facets in sidebars of your site. It can be pretty useful to add facet widgets in sidebar while having a grid in the main content.