WP Gridbuilder… You know ? If not, stay here, you will like this article! Because you might need that Extension WordPress, so useful and powerful! In this tutorial I explain what it is for and how to use it…
Note: Some links on this blog are affiliate links. You can easily recognize them by their color: I am an affiliate link – I am a classic link.
1 – What is WP Gridbuilder?
WP Gridbuilder is an extension that makes it possible Filter WordPress content and view the results quickly. This extension has been around since 2019 and the icing on the cake: it’s a product Made in France developed by Loïc Blasco. Perhaps you have already met him during a WordCamp.
You don’t have to search for this extension in the official WordPress directory, because it is Full premium, it means that no free version is available. However, you can get a refund within 14 days if you are not completely satisfied.
🤑 The price ? From $49/year for 1 site to $249/year for unlimited sites. At certain times of the year, a Offer lifetime is offered for a limited time, so you can purchase the extension with a “one time” payment (I did that 🤩).
=> Visit the official website.
2 – In which cases should Gridbuilder be used?
On a showcase site, small blog or small shop, You don’t need this extension…
But if you have a WooCommerce store with one large number of products and you want to offer your customers the best user experience, Gridbuilder is perfect.
If you look at the two screenshots below, you’ll quickly understand the usefulness of Gridbuilder: the extension allows you to do it Create custom search filters then takes care of displaying the results in the grid.
You can do the same on a blog that has many articles, or on a well-stocked portfolio…
With Gridbuilder you can even Create filterable maps…
Check out all the demos here to see how it works for yourself.
3 – How to use WP Gridbuilder?
grid builder offers many very powerful features and renders seamlessly on your website no matter what theme or page builder you use.
Although developers understand the workings of this extension (which is based on the logic of WordPress) more easily than newbies, its use is not complicated.
However, it will take some trying to tame it and set the filters properly. Here’s a quick guide to get you started…
3.1 – The Dashboard
When you install and activate the extension WP Gridbuildergo to the tab first Grid Builder > Dashboard to enter your license key.
You’ll find that you can export and import settings, grids, maps, and facets from this dashboard. This allows you to transport a working base from one location to another.
3.2 – Basic settings
Then go to the tab Grid Builder > Settingswhere you can:
- Set some basic options.
- Specify the color profile used in rasters and filters.
- Create new image sizes
- Set the viewer’s appearance and behavior
You can start with the default settings and come back here later to refine your choices.
💡 My SEO tip: You can optionally disable the option browser historyThis removes the filter parameters (facets) in the URL and prevents Google from indexing those URLs. However, if you want to keep these known parameters in the URL, you can use the file robot.txt prohibit indexing.
3.3 – Create and configure a grid
Now let’s move on to setting up the grid. The grid is the gallery that shows all the results. It’s simply the equivalent of a module blog or a Module Boutique that a page builder provides. To create this type of grid:
- Go to the tab grid. To make things easier, I advise you to select and import the 3 models proposed.
- Use the settings wheel to edit the grid that best suits your needs.
- from tab designationGive this grid a name. For example, Bookstore.
- After registration a Shortcode is generatedyou can use it to display this grid anywhere on your website.
- After that, I recommend you browse all the other tabs to continue setting up this grid.
- It’s mainly the tab content query This allows you to choose what to display in the grid. For example, you can choose a type of contribution by naming the Shop products and only show them published products. You can also set the number of products to show before pagination, how to sort them (e.g. by release date), etc.
- Other tabs such as media formats, layout, carousel, map stylesetc. is mainly used to configure the grid design.
Save your changes. It is possible that the grid does not quite meet your expectations. It is then sufficient to come back here later to refine your parameters.
Note that you can create as many grids as you want. Each one has a different shortcode, so you can display them in different places on your website.
3.4 – Create a map
Next you will create the raster map design. To do this, go to the tab cards. To get started quickly, I recommend that you import all kinds of pre-made maps. These are map templates offered by Gridbuilder.
This will bring up all the models and you can hover over each card to discover the design it offers. Select the one that best suits your expectations, then click the settings wheel to edit it…
You then get into the map editor where you can change everything: fonts, borders, colors, blocks, etc.
It’s not very complicated, you can even keep the default settings and then tweak them to your liking.
Don’t forget to return to the tab Grid > Map Styles to apply the currently selected template to the grid. For example, here I assign the map model to the grid agate.
3.5 – Create the facets
Finally, the most important thing: the creation of facets. These are the options that allow you to do this filter grid according to the user’s choices. All the power of WP Gridbuilder lies in the possibility of creating all kinds of facets. And it will be your task to create the most relevant aspects !
Of course, you can already import the few basic facets that the extension offers, but you definitely need to create your own so that they perfectly suit your needs.
- First, name your facet.
- Then go to the tab Behave You can find all options here. You first select theaction of your side. She should filter, charger, trieretc. ?
- Depending on the action, you must then select the type of filter. Depending on the action you choose, you may have more or fewer options.
- Eventually, depending on the previous options, you can do this Adjust facet. For example, if the products in your store have attributes, categories and tags, Gridbuilder offers you these different filters… In this way, the Internet user can sort the results by product type, size, color, etc.
You must create a facet for each type of sort you want. Depending on the size of your blog or shop, you will need to create many facets!
4 – How are the grids displayed on the website?
Once you’ve set up the grids, maps, and facets, all you have to do is display them on your website. There are several ways to do this…
4.1 – Native with Gutenberg
grid builder Natively supports the WordPress editor (Gutenberg). So you can just add one to your page lattice block and everything faceted blocks what you need.
4.2 – When integrating via add-ons
If you are using Elementor, Oxygen, Bricks or Beaver Builder you can go to the tab Gridbuilder > Modules to install the add-on that allows you to easily integrate grid and facets from your favorite page builder.
Show all addons.
4.3 – With shortcodes (shortcodes)
Finally, whatever theme or builder you use, the shortcodes generated when creating the grid and facets allow you to display them wherever you want.
For example, in a WooCommerce/Divi store, you can create a theme template and place all the shortcodes in the order you want.
5 – WP Grid Builder: Summary
I was amazed by the effectiveness of this extension! When you do a search on the front, the results that appear in the grid are visible almost immediately, it doesn’t rotate like we usually see with stores that use alternatives WP Gridbuilder.
The grids and maps are “weapons” 😅 and you can really customize everything…
In short you understood that I have a small heart for this extension that I recommend you ++ if you want repimper Your shop or your blog.
To go further, I invite you to consult the official documentation of the extension.
