Divi FilterGrid

The buttons on your filter are your categories

You place a filterable grid on your portfolio and the buttons show up with whatever was already there: categories created in a hurry, near-duplicate tags, a group called Misc. Visitors read them as if they were the index of your work.

Filtering by taxonomy turns your internal classification into a public menu, so the grid starts with reviewing how you classify.

Divi FilterGrid is a Divi module that displays posts or custom post types in a grid with filters, search and pagination. Deciding which categories make sense to your visitor is still your job.

Six ways to decide what gets in

Each module uses one of these query types:

• Basic: posts only, with category selection.
• Advanced: any post type, with taxonomies, terms and exclusions.
• Archive Page: shows whatever belongs to the archive or search where you place it.
• Related Posts: posts related by taxonomy.
• Manual: specific items by ID.
• Custom: your own query through the dpdfg_custom_query_args filter, added in the child theme's functions.php.

You can set count and offset, order by date, title, random, comments or relevance, exclude the current post and write the message for when there are no results.

Filter, search and keep scrolling

Filters appear as buttons or dropdowns, support multi-select and several parent and child levels, and let you keep one active by default or hide the All button. You also choose when they act:

• After each click on a filter.
• After pressing an apply button.
• After selecting the last level of the hierarchy.

The search bar is enabled separately and its results can be ordered by relevance. To move through the list there is numbered pagination, a load more button or load on scroll.

Each item and the grid are designed from the module

For each item you choose what shows: featured image, title, meta, excerpt and custom fields, which are ordered by dragging. A content filter lets you add text, HTML, PHP or more fields. On video posts, a preview can replace the image.

A click can do nothing, go to the post, open it in a popup or launch a lightbox with one image, with all of them or with a custom gallery. Templates for that popup are created in the Divi Library.

The presentation offers seven layouts (grid, list, fullwidth, grid masonry, flex, standard masonry and none for your own CSS) and six skins: Default, Midnight, Left Vertical Filters, Items in Overlay, Zoom Image and Library. Columns and gaps are set separately for desktop, tablet and phone. An AJAX cache stores data in the visitor's browser to speed up loading.

It requires Divi: how to build the first grid

It installs like any plugin. It works inside the builder, so a site without Divi has nowhere to use it:

1. Review and clean up the categories or taxonomies you will use as filters.
2. Install and activate the plugin, and add the module from the Divi Builder.
3. Choose the query type and the elements each item will show.
4. Enable filters, search and pagination.
5. Select the layout and skin, and adjust columns by device.

For filtering by the data in your fields

If your visitors search by data stored in fields rather than by category, Divi Ajax Filter is set up with modules inside the builder and filters by fields defined with Advanced Custom Fields.

Outside Divi, WP Grid Builder creates its own grids with filters by terms, post fields or custom fields, plus a drag and drop card designer.

Fitting the grid into your site

Does it work with WooCommerce?

Products can be displayed as a post type inside the grid.

Can I use custom taxonomies?

Yes. Filters work with categories, tags and custom taxonomies.

Does it work as an archive page?

Yes. The Archive Page type shows the items of the archive or search where you place it.

Do I need to code?

For nearly everything, no: the settings are in the module. The Custom query does require adding code to the child theme.

How do I show custom fields?

Turn on that option, choose the fields and drag them into the order you prefer.

Can I create a layout from scratch?

Yes. The none layout leaves the grid for you to define with your own CSS.