Shortcodes, Blocks, Widgets

IntroductionIntroduction

Gridbuilder ᵂᴾ works with Shortcodes, Gutenberg Blocks and Widgets. So, whatever the method you are using to edit your pages (Classic Editor, Gutenberg or Page builder), you will be easily able to insert your grids or facets in pages.

Insert ShortcodesInsert Shortcodes

If you are using the WordPress Classic Editor (or a builder with TinyMCE editor), you will find in the editor toolbar a button with Gridbuilder ᵂᴾ logo which allows to generate and insert shortcode in the editor content. This shortcode generator allows to insert Grid or Facet shortcodes.

Shortcode generator button
Editor – Shortcode generator
Insert shortcode popup
Editor – Shortcode popup

In order to display archive results in a grid of WP Grid Builder you need to add the attribute is_main_query set to true in the shortcode as follows:
[wpgb_grid id="1234" is_main_query="true"]

Insert Gutenberg BlocksInsert 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 Gridbuilder ᵂᴾ are not rendered for performance reason. However, you will find in Global Settings > General option to render blocks of the plugin in Gutenberg. Rendering blocks in Gutenberg may create layout issue.

Insert a Gutenberg block
Gutenberg – Insert block

Render blocks in Gutenberg
Global settings – Render blocks

Insert WidgetsInsert Widgets

The plugin comes with 2 widgets: Block 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.

Add grid and facet widgets
Widgets – Grid & Facet
Setup setup facet and grid widgets
Widgets – Grid & Facet settings