If there is one important thing about a website, it is the ease with which you can find the information you need.
Whether it’s for an online store or blog articles, nobody likes to spend more than 5 minutes (and I’m nice) rummaging through the intricacies of a site to finally find what they’re looking for.
Amazon and Walmart published studies a few years ago explaining that every second of extra loading time was costing them millions of dollars a year.
Well, on our side, we are not yet at such figures, but I am going to present you an extension which is likely to revolutionize your site developments, and improve your customer experience.
We are not going to talk about cache, server, improvement or optimization. We will focus here on searching and filtering all your site data through the WP Grid Builder plugin.
The icing on the cake: you won’t need any code, everything is done visually. And in addition, the extension is in French.
Originally written in September 2020, this article was last updated in September 2022.
This article contains affiliate links. This means that WPMarmite will earn a commission if you decide to purchase a plugin through one of these links. This makes it possible in particular to remunerate the research and writing work of the blog editors. Nevertheless, we remain impartial. If a product isn’t worth it, we say so (or don’t talk about it).
To find out more, consult our editorial policy.
What is WP Grid Builder?
WP Grid Builder is a premium WordPress plugin that allows you to create filterable grids in real time, without any page reloads, with any content (articles, WooCommerce products, portfolio projects, custom content type, etc.). Filters are fully customizable.
You can add as many as you want, on any type of criteria.
It is thus possible to have classic facets such as the price or the color of a product, but also more interesting facets coming from fields added via the Advanced Custom Fields extension, custom WordPress fields, or any other data possible.
WP Grid Builder has several strings to its bow and will save you valuable time, while giving you the opportunity to get started on projects that did not seem within reach until now.
Beyond the filterable grids, the extension made in France WP Grid Builder also offers two other very useful features:
- the creation of sliders custom madealways adding any type of data to it;
- the design of filterable content mapslike Airbnb, to present properties available for rent, for example.
In order for you to fully understand the usefulness of this extension (WordPress does not natively allow you to filter your content in an advanced way), WP Grid Builder presents several classic use cases on its official site.
Thanks to this extension, you will be able to offer your visitors filters based on different criteria:
- on an e-commerce storeyou can for example add the following filters (product type, brand, price range, rating, colors, etc.);
- on a blog page, you can take advantage of it to make the search for articles faster by filtering by date, author, category, etc. ;
- on a portfolio pageyou can allow your images to be searched by type of categories, for example.
To go a little further, take a look at this presentation video concocted by WP Grid Builder:
Is it more clear for you? So we move on. As you have seen in these first lines, the operation of WP Grid Builder is largely based on a system of filters: facets.
To fully understand the rest of this test, let’s talk about this technical term in more detail in the next section.
What is WordPress faceted search?
Facets? Nothing to do with the balls present in the middle of the dancefloors on which you activated your legendary wiggle.
In computer science, faceted searches are searches to filter your content according to different criteria : price, customer ratings, color, brand, etc.
Fast and fluid, this search includes different criteria that allow a user to find what he wants at high speed.
I’m sure you’ve seen it before, for example on travel sites when you set a budget, a date and finally a destination for your next vacation.
You have probably also come across them on e-commerce sites. For example on shoe or clothing stores, when you select sizes, then colors, and this shows you the remaining corresponding products.
Using this system on your WordPress site can greatly improve your conversion rate, and the number of visits to your articles. Now see how to set it all up with WP Grid Builder!
Start by installing and activating the extension. Are you drying at this point? Consult our tutorial to install a plugin in the rules of the art.
This is how the rest of the operations will unfold. In order to make the tutorial more concrete, I will show you a practical case by designing an online store of Apple products, with specific filters depending on the products (RAM memory, color, price, etc.).
Here is the type of filterable grid that we will create in this article for our WooCommerce online store:
Before moving on and getting to the heart of the matter, I’ll tell you something very important, to help you better understand how WP Grid Builder works.
You should know that the mode of operation of the extension is based on 3 elements:
- the cards ;
- facets ;
These terms will come up all along these lines, but don’t panic: I’m going to detail all this for you, with screenshots in support, so that nothing escapes you.
But first, let’s dive deep into the plugin’s dashboard.
A clear, intuitive and uncluttered dashboard
When the extension is active on your site, you will notice two things in particular:
the presence of a concise menu in Frenchwith links to configure your grids, maps and facets.
But also the possibility of making settings and activating modules. You can find your way around very easily;
- a sleek, clean and colorful user interface. Navigating through the different menus is very pleasant, with clearly visible call-to-action buttons and space between the different sections. Phew, we breathe.
How to create a map with WP Grid Builder?
Cards represent the display of each of your content in the grid. For our concrete example, this corresponds to WooCommerce products.
WPGridBuilder integrates over 20 pre-designed card templates for your blog posts or products, by going to the “All cards” menu:
Its maps can be imported and used in a few clicks, but you can completely create one from scratch, or modify an existing model.
Here is an example of the cards proposed to start your first grids:
WP Grid Builder embeds an in-house visual builder for editing, allowing to modify the whole design via drag and drop (drag and drop) using blocks.
There are blocks of all kinds and dedicated to all uses:
- for your articles: titles, metas, content, etc. ;
- for your WooCommerce products: prices, ratings, promotions, etc. ;
- for WordPress users: last name, first name, e-mail, avatar, etc. ;
- for terms and categories;
- to add buttons and icons;
- to integrate custom fields.
In our example, we will start from the card model named “Carnelian”:
The layout system is quite similar to Gutenberg, or even Elementor.
Each element is customizable and has options to edit color, font, field type, size, background, add custom CSS…
I edited the formatting a bit to get the following result:
I added an Advanced Custom Field corresponding to a product offered for the purchase of this product, a button “Learn more” referring to the product page, and slightly modified the typography.
Once our cards are in place and with all the information we want, let’s move on.
How to create a facet?
We are now in the most important and interesting part of setting up our grid: the creation of facets (via the “All facets” menu).
Facets represent all of the possible filter types you can add to your grid.
As you can see from the screenshot above, they are divided into 5 categories (in “Facet action”).
Each facet is always attached to a grid (I cover this subject in the next part) and you must first select the type of action it will perform on your grid:
- Filter : to filter the content of your grid via buttons, selectors, customer reviews, etc. ;
- Load : to load more content, with for example the possibility of adding a scroll infinity to your grid, or even a pagination;
- To sort : to create a drop-down menu of custom choices, such as an alphabetical display;
- Apply : to select filters and redirect to a filtered page;
- Reset : to add a button to reset visitors’ choices and display the default grid again.
Just like the maps, WP Grid Builder offers to import about ten basic facets to start your project.
I advise you to install them all, because on the one hand they are useful, and on the other hand it will give you an example to create custom ones later.
We are going to create our first facet, which will filter our product grid. This facet will sort products according to a custom WooCommerce taxonomy named “RAM memory”, previously implemented in our products.
We therefore add a “RAM memory” facet as follows:
Until then, nothing complicated, just name your filter.
Now let’s go to the “Behavior” tab, which will allow you to define the use of your facet:
We want to display a filter allowing the visitor to check the different types of RAM to refine his selection. So we need the “Checkbox” filter type.
Depending on the filter, you can of course select another one.
We then select the type of data to filter. This is the “RAM Memory Product” taxonomy previously created via WooCommerce.
The filter logic here is set to the “OR” choice which allows several boxes to be ticked at once, unlike the “AND” choice which only allows one to be defined.
The other options allow you to display or not the sub-categories, the number of products available according to the attribute, or to choose the order of the choices displayed by the filter.
You now have one important step: your grid design.
How to create a grid?
We will now build and configure our grid to display exactly the desired elements.
The “Grids” tab includes many options to precisely refine the display. We will only see the main ones here, with a precise zoom on each of the ten settings tabs offered.
The “Naming” tab allows you to define the name of your gridwhich is useful if you create several of them, to define a custom CSS class for it or to retrieve the short code (shortcode) allowing it to be displayed on your pages.
You can then edit the various error messages if the visitor filtering returns no results.
Content Query tab
The “Content query” tab allows you to define precisely what our grid will display.
You can choose the type of content, taxonomies, and even filter by custom fields.
Here, for example, we have selected the “Products” publication type with the taxonomy term “MacBook Pro”. Our grid will therefore display only the products of this category.
You can preview how your grid will look at any time by clicking the purple “Preview” button in the top right.
Media Formats tab
This tab is very practical because it allows you to manage the display of media on the cards.
It allows for example to:
- automatically retrieve the first image of a content if no featured image is defined;
- manage image galleries as the map image;
- display the first image of the WooCommerce gallery when hovering over the map;
- automatically fetch the featured image from YouTube or Vimeo if you display them on your cards;
- open the videos in a viewer.
It also allows you to set a default image if you don’t display any image automaticallyor even manage the ratio of your images.
Indeed, the defined image will be automatically displayed in its original format. If all your images don’t have the same format, then it can affect the design of your grid. To correct this, defining a ratio can be very useful.
In my example, I am displaying featured images of all my products. Being all of the same format, I do not define a particular ratio.
I chose to leave all the other settings at default, since they are very suitable for this specific case.
The “Layout” tab allows you to set the display behavior of your grid.
On the one hand, the type of layout, among 3 possibilities:
- Subway ;
These 3 layouts are dependent on the type of card chosen for your content. I’ll come back to it right after.
You can then define the display direction of your cards and give them an equal height. Very practical to maintain an impeccable design.
The “Grid responsiveness” section allows you to easily manage the side responsive by defining the number of columns displayed in the grid according to the screen sizes, as well as the space between each card.
For our grid, here, I have chosen to favor the display of a maximum of 3 products per line and a spacing of 20 pixels between each of them, so that the design remains airy and the information is not too on top of each other.
The “Carousel” tab allows you in one click to transform your product grid into a fully configurable carousel.
Just select the “Carousel” option, and presto: there you are with a slider of products.
Different options allow you to fine-tune the behavior of your carousel:
- scrolling speed;
- number of products;
- automatic reading or not;
- button size;
- position of the slides.
This customizable carousel template is easy to operate, and very practical to avoid installing an additional extension and display a slider personalized with the content of your choice.
Here is what we can for example set up with the default options:
The “Manufacturer” tab allows you to shaping all your facets and of organize them around your grid.
All you have to do is drag and drop them to the left, right, above or below, in the order you want, so that they then appear on your page.
WP Grid Builder also allows you to display your grid via a shortcode or Gutenberg blocks. I explain all this a little later in the article.
Card Styles Tab
This tab allows you to define which card model will be used according to the type of content present in the grid.
In our case, we’ve only set the default map, because we only have one content produced, and it’s the “Carnelian” template that we formatted earlier.
A default animation is set for the display of your grid cards when you load the page.
You can edit or delete it here if you want, without having to enter a line of code.
You can here set up a preload animation for your grid to make your visitors wait while the page is displayed.
Note that it is also possible to display blurred images during loading, a bit like Twitter, or to activate the lazy load (deferred loading) to only load images when they are visible.
This will optimize the performance of your page.
For my part, I only activated the lazy load to load my grid faster.
Once all this has been set up, we still have to display our grid on our page.
How to Display a WP Grid Builder Grid on a WordPress Site
There are different possibilities to display your WP Grid Builder grid on your WordPress site.
How to display a WP Grid Builder grid via Gutenberg blocks?
WP Grid Builder embeds two Gutenberg blocks allowing you to add grids and facets directly to your pages or articles: a “Facet” block and a “Grid” block.
You then just have to select the grid or the facets to display in order to view your filterable grid.
This then gives you a display like this:
You can also use these two blocks to integrate your grid into one of the widget areas provided by your theme (ex: in your sidebar).
How to display a WP Grid Builder grid with a shortcode?
When you create a grid, WP Grid Builder generates you a shortcode (shortcode) automatically so you can display it anywhere on your site.
For example, on our grid displaying MacBooks, we can see that the shortcode is
If you are not comfortable with Gutenberg blocks or you are still using the old WordPress editor (TinyMCE), then simply copy and paste the short code into your pages, articles or text modules so that your grid is displayed.
This is the solution I used in this example. And here is the result:
How to display a “tailor-made” grid via page builders?
If you choose not to include facets when setting up your grid, you can add them later via different shortcodes provided by WP Grid Builder.
We have just seen that each grid has a predefined short code. Well, it’s also the case for facets, with a slight difference, which we’ll see.
If we take our “RAM memory” facet, here is the short code available to display it:
[wpgb_facet id="12" grid="0"].
An additional attribute is added:
This allows us to tie our facet to a precise grid when we choose to display them separately.
WP Grid Builder allows todisplay a constructed grid without facets at the base, then add them separately afterwards to the page. So you can place them above, below, left, right, etc.
To link them, just replace the value
"grid" by the identifier of your grid.
In the case of our grid displaying MacBook Pros, you can see in its shortcode that the identifier is
15which would give us
[wpgb_facet id="12" grid="15"] to display our facet and link it to our grid.
This last solution will be the most flexible in terms of design and layout, if you need something advanced.
Then, all you have to do is integrate your shortcode using the interface offered by the page builder of your choice: Divi Builder, Beaver Builder, Oxygen Builder, Elementor, etc.
Hey, speaking of Oxygen Builder and Elementor, know that WP Grid Builder even offers a dedicated integration for these two page builders. Find out more about this in the next section.
What are WP Grid Builder add-ons?
Does WP Grid Builder already seem complete to you?
Although it already perfectly supports the integration of WooCommerce or Advanced Custom Fields content, be aware that it still has a few surprises in store for you, since it embeds additional add-ons that might interest you.
I offer a presentation of these just below.
The Map facet
The “Map Facet” add-on adds a new type of facet called “Map” allowing to create a filterable map in the style of what you can see on AirBnb.
It integrates the possibility of using Google Maps, Leaflet or Mapbox, and works by using the latitude and longitude of the various contents.
This can be very practical for some of your projects.
The “Caching” add-on Speeds up load time when filtering your grids or models, caching content and facets.
To enable caching globally on your site, I recommend using the WP Rocket extension, which we present to you in this dedicated tutorial.
This add-on dedicated to the extension of LMS LearnDashfor creating online courses, adds new blocks in the card creation tab to display different information about your courses.
The “Multilingual” add-on improves the compatibility of WP Grid Builder with Polylang and WPML multilingual extensions and prevents you from duplicating your grids in all languages.
A must have if your site is available in several languages, to save time.
The “Meta Box” add-on supports all types of custom fields generated by the Meta Box plugin and makes it easy to filter content, no matter how complex the field.
The “Oxygen” add-on is dedicated to the page builder of the same name. It adds two new elements to the editing interface of the page-builderto easily add grids and facets and customize them with Oxygen Builder.
The “Elementor” add-on, which speaks for itself, works on the same principle as that proposed for Oxygen Builder.
This time, two new widgets will appear on the Elementor editing interface, which will save you from dealing with a short code, as I showed you before.
You can also filter some widgets offered by Elementor Pro (ex: Articles, Portfolio, WooCommerce Products).
Speaking of Elementor Pro, WPMarmite devotes a dedicated video training to it, in order to help you handle it from A to Z, like a pro 👇👇👇:
How much does WP Grid Builder cost?
WP Grid Builder is a premium plugin only. 3 tariff licenses are offered. They always include:
- one-year support and updates;
- all the add-ons that I presented to you in the previous part;
- a reduction during the annual renewal, ranging from 20% to 40% depending on the license chosen.
To choose, base yourself on the number of sites on which you want to take advantage of WP Grid Builder:
- License Basic ($49/year, or approximately €45/year) is limited to use on a maximum of one site;
- License Premium ($99/year, or approximately €90) can be activated on a maximum of 3 sites;
- License Ultimate ($249/year, or approximately €229/year) can be used on an unlimited number of sites.
Note that a 14-day money-back guarantee is included to allow you to test the plugin risk-free, as it were.
For information, finally, know that the main premium competitor of WP Grid Builder is called FacetWP. It offers two tariff offers:
- a license that can be used on a maximum of 3 sites for $99/year (around €90/year);
- a license that can be used on up to 20 sites for $249/year (around €229/year).
Our final opinion on WP Grid Builder
Along these lines, you have discovered:
- how to create and configure a facet;
- how to set up a content map to display your items;
- how to set up a grid to display everything on your site.
The next step would be to add many other facets to sort your products even more finely… Now that you know how to add one, there is no doubt that you will be able to manage for all cases and needs.
Easy to learn and entirely in French, WP Grid Builder will save you a lot of time on setting up complex and advanced features.
This is a great extension that for me is the number 1 in the industry. Its ease of use, the quality of its interface and the fact that it is used without touching a single line of code makes it an ally of choice for any type of profile, including beginners.
Finally, its affordable price of $49/year (€44) for one site makes it a profitable extension on any project.
Small bonus: in case of problem, the support of Loïc, the developer, is very responsive and provided in French.
So, do you plan to use this extension for your future projects?