WP Grid Builder Review & Tutorial

WP Grid Builder is one of the most capable WordPress plugins for building filterable grids and faceted search without having to create the entire interface from scratch. It can query posts, products, taxonomy terms and users, then present them in responsive grids or carousels with fast AJAX filtering.

In this hands-on review and tutorial, we’ll look at where WP Grid Builder fits in a modern WordPress stack, what it does well, where it can become overkill, and how to create your first grid and facets step by step.

WP Grid Builder in 2026: what changed?

Updated September 2026: WP Grid Builder’s current product page lists version 2.3.6. The 2.3.x cycle has focused heavily on current WordPress compatibility and maintenance, while the broader ecosystem of add-ons continues to expand.

• WordPress 7.x compatibility: recent releases added compatibility work for WordPress 7.0 and 7.1.
• Important 2026 security fixes: version 2.3.4 addressed several vulnerabilities, including issues involving the Range facet and async filtering. If you run an older release, updating should be a priority.
• GenerateBlocks support: WP Grid Builder added compatibility with the GenerateBlocks Query block in the 2.2 release cycle.
• Current page-builder integrations: the Elementor add-on added support for the Elementor Pro Loop element in Elementor Pro 4.2+, and dedicated add-ons are also available for Bricks, Beaver Builder and Oxygen.

You can review the official WP Grid Builder changelog before updating a production site. The tutorial below still follows the same core workflow, but we’ve refreshed the surrounding recommendations and current product details.

WP Grid Builder review: what it does well

Grid layouts offer an appealing way to display and filter content on our website. This is both desirable and necessary to provide users with a clean and elegant experience. Take, for instance, something like this:

And another example follows:

The Essence of WP Grid Builder

WP Grid Builder combines three jobs that often require separate tools: querying content, designing its presentation, and filtering the results. That makes it particularly useful for directories, WooCommerce catalogs, portfolios, resource libraries and content-heavy sites.

You can work visually without coding, but the plugin also exposes actions, filters and functions for developers. Its card builder is based on WordPress blocks, while grids and facets can be rendered through Gutenberg, shortcodes, or supported page-builder integrations.

Compatibility is one of its strengths. Beyond WooCommerce and Gutenberg, WP Grid Builder supports tools such as Easy Digital Downloads, SearchWP, Relevanssi, ACF, Meta Box, Pods, Polylang and WPML. Dedicated add-ons extend integration with Elementor, Bricks, Beaver Builder, Oxygen, LearnDash and mapping tools.

WP Grid Builder features in 2026

The feature set has grown considerably since this guide was first published.

Here are some of its standout features:

• Flexible content queries for posts, custom post types, taxonomy terms and users.
• Masonry, Justified and Metro layouts, with responsive carousel support.
• 20+ facet types for filtering, sorting, pagination, loading more results and resetting filters.
• Fast AJAX filtering backed by a dedicated index table and custom endpoints.
• Browser-history support so visitors can move backward and forward through filtered states.
• WooCommerce and Easy Digital Downloads integration, including filtering by price, rating, sale status and stock status.
• Custom-field integration with ACF, Meta Box and Pods.
• 20+ starter cards plus a visual card builder for completely custom designs.
• Gutenberg blocks and shortcodes, plus dedicated integrations for Elementor, Bricks, Beaver Builder and Oxygen.
• Multilingual support through Polylang and WPML.
• Optional add-ons for caching, maps, LearnDash and additional builders. All add-ons are included with current paid plans.
• Responsive and accessibility-focused output, plus lazy loading, a built-in lightbox and touch support.
• Import and export tools for grids, cards and facets.
• Developer APIs with actions, filters and functions for more advanced implementations.

The important distinction is that WP Grid Builder is more than a “pretty grid” plugin. Its strongest use case is interactive content discovery: helping visitors quickly narrow a large catalog, directory, portfolio or knowledge base to the items that matter to them.

Need help managing WP Grid Builder and other premium WordPress tools? Our WordPress Maintenance service can include suitable licenses from our available subscriptions when they fit your site.

Installing WP Grid Builder

WP Grid Builder does not currently offer a free edition. The official plans are Basic at $49/year for one site, Premium at $99/year for up to three sites, and Ultimate at $249/year for unlimited sites. All current plans include the add-ons, one year of updates and one year of support, with a 14-day money-back guarantee. The published minimum requirements are WordPress 6.0 and PHP 7.0, although PHP 8.x is recommended.

Next:

After this step, we can activate it using the corresponding button.

Here, we can enter the key (which we should have received via email after purchase) to activate the license.

Using WP Grid Builder

Next, we’ll go step by step through creating our first grid in a practical Grid Builder guide with screenshots.

Let’s start by creating a new grid by clicking on the options shown in the screenshot below:

Clicking the “Add New” button will take us to the following screen.

Query

As shown in the screenshot above, we have three types of sources to fetch content from (unless we’ve added other content types, such as when installing WooCommerce):

• Content: We can retrieve content from posts, pages, the media library, or any other custom post type.
• Terms: This option allows us to fetch content based on categories, tags, or any other custom taxonomy terms.
• Users: We can retrieve content from specific WordPress users.

Below these options, we can set the number of items per page (default is 10).

If we want to display everything, we should enter “-1”, while “0” uses the default value from WordPress settings.

Further down, we can define how results are sorted (by default, by creation date) and add additional sorting rules via the “Add Order” option.

Finally, we can refine additional settings, such as including or excluding specific authors or posts.

Always remember to click the SAVE button to apply changes.

Now, let’s take a look at the options available in the Layout tab.

Layout

Here, we’ll explore the design options, meaning how our grid will look—its visual personality in the eyes of our users.

The first thing we can choose is the layout type: Masonry, Metro, or Justified. This is an important decision, as each option produces a distinctly different result. Let’s take a closer look:

Masonry

The Masonry grid layout arranges elements in a brick-like structure (similar to how bricks are stacked in a wall). This design allows elements of different heights to fit tightly together without leaving blank spaces.

There is no fixed row height in Masonry, as element heights can vary. Items are placed in the next available position in the shortest column, creating a structured yet visually balanced appearance. This layout is ideal for image galleries and portfolios where images have different proportions.

Example: Pinterest uses a Masonry grid layout.

Metro

The Metro layout is inspired by the design style popularized by the Windows 8 user interface. It consists of blocks of varying sizes and shapes that fit within a grid—a mix of large and small elements that create a more dynamic composition.

Although elements follow a strict grid structure, some blocks can span multiple columns or rows depending on their size. This design is often chosen for modern, visually engaging layouts that appeal to specific types of content.

Justified

The Justified grid layout arranges elements in rows of equal height, aligning the left and right edges of each row. It’s a popular choice for photography and image galleries.

Each row maintains the same height, and the elements adjust in width to completely fill the space without gaps. This creates a clean, organized, and evenly aligned appearance.

Example: Flickr uses a Justified grid layout for its photo galleries.

After selecting the presentation style, we can also enable Full Width, allowing the grid to span the entire screen from left to right, displaying the results across all available space.

Behavior Options

Now, let’s explore the Behavior options. These settings control how cards are arranged and displayed within a grid. Below are the three available options:

Horizontal Order

This option arranges the cards from left to right instead of top to bottom. It’s useful for designs where content should flow horizontally before moving to the next row.

Best for: Carousels or horizontal galleries where content needs to be explored laterally.

Fit into Rows

This setting organizes cards into rows that progress vertically, meaning they align one below the other. This makes the grid easy to read and navigate, ensuring a structured display.

Best for: Image galleries and portfolios that require a clean, consistent presentation of visual elements.

Equal Height Columns

This option ensures that all columns within a row have the same height, creating a neat, balanced look. It’s particularly useful for grids that require uniform column heights to enhance readability and visual appeal.

Best for: Designs where consistent column height improves aesthetics and readability.

Sizing Options

Finally, using the Sizing settings, we can customize the grid’s size based on screen width (e.g., adjusting for mobile devices). This allows for further personalization according to our preferences.

Now, let’s move on to the next configuration tab: Carousel.

Carousel

Carousel Options

The first option is critical —if we intend to transform our grid content into sliding images, we must enable it.

This feature allows the grid layout to display content horizontally and scrollably. Instead of showing all content on screen at once, the carousel enables users to navigate through the grid horizontally, either by swiping or clicking navigation buttons.

It’s a dynamic, interactive way to present content —especially considering that screen space is often limited.

Fine-Tuning Carousel Behavior

In the next Behavior section, we can fine-tune the carousel’s behavior, including slide arrangement. The key settings are:

• Slides Alignment: Aligns slides within the carousel element.
• Initial Slide: Defines the zero-based index of the starting slide.
• Group Cards: Groups multiple cards into single slides.
• Auto Play: Automatically advances to the next slide.

Appearance Settings

In the final Appearance settings, we’ll define colors and button sizes to customize the visual style.

Now, let’s move on to configuring Cards.

Cards

In this section, we will decide what type of design we want for our Cards. We can create multiple Card designs and use them in any type of grid we need. For example, we might have one design for carousel grids, another for standard grids, or even a specific design for WooCommerce products if we’re using that.

Cards must be created beforehand in the All Cards section, so for now, let’s skip ahead.

In order to streamline the process and explore the variety of built-in designs WP Grid Builder offers, we’ll import the demo templates. To do this, we clicked Import Demos, which brought up the following pop-up window.

As seen in the screenshot above, we have access to various designs for blogs, portfolios, WooCommerce, and a selection of templates named after colors (Agate, Amber, Coral, Emerald, etc.). We’ll import only what we need or want to experiment with.

After this step, we’ll see the list of imported Cards.

In the screenshot above, we can see that hovering over a Card row allows us to edit it. Let’s take a look at what happens when we click the Edit button.

This brings us to the Gutenberg blocks that make up the Card. We can add more blocks, remove what we don’t need, and tweak the design as much as we like. Pay special attention to the Type of Card, where we can choose Masonry or Metro, depending on our preferred layout. In this example, the Card template is called “Lava” and is designed for a blog.

Let’s return to the Card design section.

To display data from Posts, Terms, or Users in our grid, we need to assign Cards. However, Cards are not explicitly assigned—WP Grid Builder will automatically apply a default Card that only displays the post thumbnail or user avatar (if available).

Continuing with our guide, we’ll type “Lava” in the Card field to select it.

Cards can be assigned based on conditions, depending on the data queried in the grid. For example, we can assign specific Cards to Posts containing certain terms or custom fields. We can also set conditions for mobile devices or different User scenarios. As we’ll see, WP Grid Builder offers remarkable flexibility.

In this tab, we also have options for Sizing. This allows us to globally override the number of rows and columns used for all Cards within the grid—these settings apply exclusively to Masonry and Metro layouts.

Finally, under Animation, we can configure how Cards appear and transform as users scroll.

As we navigate through the page, animations will dynamically reveal Cards within the grid, enhancing the visual appeal of the content and potentially increasing user engagement. There are several animation options to choose from.

Be sure to save your changes. Now, let’s move on to the Media section, where we can configure how media files are displayed based on the query.

Media

In this panel, we can determine which media formats are allowed in our Cards. With a single click, we can enable or disable gallery, audio, or video formats using the corresponding toggle buttons.

WP Grid Builder offers the ability to automatically retrieve the first media element from a Post’s content if no featured image has been assigned. If this is what we want, we can enable the First Media Content option. Additionally, we have the option to display thumbnails for embedded videos and to show videos in a Lightbox-style frame.

Next, under Thumbnails, we can adjust default sizes and layouts, even considering different settings for mobile devices.

Advanced Settings

In the final tab, we can customize messages, the appearance, and the functionality of the grid to better fit our specific preferences and requirements.

Adapting messages to our language or website’s tone is important, but the rest of the fields require advanced programming knowledge and will not be covered in this quick guide.

Preview

We can always preview our grid as we configure it, but now let’s take a look at how our demo grid is shaping up: Voilà.

In this example, we see the Blog results as we quickly configured them. Images turn to full color only when we hover over them, but this can be easily modified. If we’re not entirely satisfied with link colors, text styles, or fonts, we can adjust them via the Gutenberg blocks in the Card editor. We can also remove blocks—such as comment information or author details—if they’re not needed.

Regarding structure, if we feel something needs improvement, we can go back to the relevant grid design section.

Search Filters

An essential and complementary part of content presentation is allowing users to organize it based on their needs or preferences. That’s where search filters come in. In WP Grid Builder, as we previously mentioned, they are called Facets.

We can create as many Facets as needed (though we’ll start with just one), depending on our website’s requirements.

To do this, we need to navigate here:

By default, WP Grid Builder includes several pre-existing Facets. Think of these as elements or blocks that we can insert using Gutenberg or our preferred page builder (such as Elementor). For instance, we’ll find a search bar (Search), a Load More button, and more.

Now, we’ll create a filtering Facet for our blog, keeping in mind that the process is the same for a store or portfolio.

After clicking Add New, we’ll see the following creation screen:

Behaviour

In the Facet Action dropdown, the default option is Filter Content, which we’ll leave as is.

Under Filter Type, we have a dropdown with all the usual options: checkboxes, dropdown menus, sorting (A to Z, reverse, numerical order, etc.), range filters (useful for prices), and more. Since we want to filter by category, we’ll choose a Dropdown menu.

Data Source

In Data Source, we can enable or disable content types for the filter (if WooCommerce is installed, we’ll see products here as well). Since this guide focuses on a blog, we’ll select Posts and filter by categories.

Order & Number

This section lets us define how elements are sorted within our grid.

An essential setting here is the choice between AND and OR conditions, which determine how multiple filter criteria interact.

• AND: All conditions must be met for an item to appear.
  • Example: Category = Books AND Price < $15,000 → Only books priced below $15,000 will be shown.
• OR: At least one condition must be met for an item to appear.
  • Example: Category = Books OR Category = Magazines → All items from both categories will be displayed.

As always, remember to save the changes.

Adding the Grid and Filters to a Page

When designing our pages, we can integrate the grid elements and the filter box we just created using the widgets provided by WP Grid Builder in WordPress.

In Gutenberg, for example, we can find them here:

Thanks to its seamless integration with WordPress, WP Grid Builder allows us to add our Grids and Facets anywhere on our website.

In the following example, we created a full-width two-column table. On the left side, we added a Facet, making sure to correctly enter the name of the filter we previously created. On the right side, we inserted the Grid widget and configured it to display our custom grid.

With this final step, we have completed our beginner’s guide to WP Grid Builder.

What Are WP Grid Builder’s Weak Points?

The main drawback is the learning curve. WP Grid Builder gives you a lot of control over queries, cards, layouts and facets, which is valuable on complex sites but can feel excessive if you only need a simple three-column post grid.

There is also no free version. The Basic license starts at $49 per year for one site. The 14-day refund period reduces the risk of testing it, but users looking for a permanently free solution will need to consider alternatives.

Finally, advanced faceted navigation deserves some SEO planning. Large stores and directories can generate many filtered URL combinations, so decide deliberately which states should be crawlable or indexable. Because the plugin received security fixes during 2026, keeping WP Grid Builder and its add-ons updated should also be part of normal maintenance.

Conclusion

WP Grid Builder remains a strong option when a WordPress site needs advanced filtering, custom content queries and polished grid layouts in the same system. It is particularly useful for WooCommerce catalogs, directories, portfolios and resource-heavy websites.

Its real advantage is flexibility: beginners can build useful grids and facets visually, while developers can go much further with custom fields, dedicated integrations and the plugin’s APIs. If your site only needs a basic layout, it may be more tool than you need. If visitors need to search and filter a substantial body of content, that extra capability becomes the point.

For the walkthrough above, the core workflow remains the same: define what content to query, choose how the grid should look, build or select cards, then add facets that help visitors narrow the results.

FastWeb note: Our WordPress Maintenance service includes guidance on suitable premium plugins and, where our subscriptions permit, licenses can be provided as part of the active service.

If you’re evaluating WP Grid Builder for a real project, the tutorial above should give you a practical starting point. For complex catalogs or custom implementations, test the filtering structure with real content before committing to the final card and facet design.