AWESOME UPDATE 03/2021

WP Grid Builder (Affiliate link) has now an addon for Oxygen!
It adds 2 new elements: Grid & Facet

The Facet element will work with the Easy Posts, Repeater and even the Product Lists (woocommerce) elements.

Not only you can add filters from WP Grid to these elements, you can also style them directly with Oxygen:

TIP #1

If you add a Grid in a Section or a Div, set the width of the grid to 100%

TIP #2

When you add an Easy Posts element (or a Repeater), the settings will look like this :

If you add a Facet element, and then you link it to your Easy Posts (or Repeater) element, a new tab will be added:

It will bring two very useful options :

Enable the Hide Pagination if you add a "Load More" filter to your Grid.

Enable the Fading Animation if you want your grid to have a fade effect when you click on a filter.

Note about the animation

The Code for the custom animation at the bottom of this page still work with this new method.

TIP #3

There is no "Loading Spinner" when you create your grid with the EasyPosts or Repeater, but you can make your own.
Here is an example of a very simple one made in CSS :

.wpgb-enabled.wpgb-loading {
    position: relative;
}

.wpgb-enabled.wpgb-loading:after {
    content: "⏳";
    font-size: 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

The great thing about WP Grid Builder (Affiliate link), is that you can now use it with the EasyPosts or Repeater elements from Oxygen.

«WP Grid Builder offers the possibility to filter custom queries without the need to use a grid made with the plugin. This means that you can use facets in your pages to filter post results.»

Which means that there are now two ways to use the plugin:

1/ With the cards you build with the plugin's builder and his own Grid settings. It's how I used it for the homepage of OXYGEN4FUN:

2/ With the EasyPosts or Repeater element, where you build your own grid and design, with Oxygen Builder.

Here is a Demo made with the Repeater:

Important

Visit these two guides to understand how it works with Oxygen :

Filter Archive Pages

Filter Custom Queries

The structure

The Shortcodes are the Facets' shortcodes from WP Grid Builder, the Repeater is used to build the Grid, and the Code Block is for the Custom animation.

Setting up the Repeater

In this page, I use the Filter Custom Queries method and I set up my Repeater like this :

wp_grid_builder=wpgb-content-1&post_type=post&posts_per_page=8&no_found_rows=true

Adding the Facets

We simply use the shortcodes from the plugin:

	

		
category
		
All
Tutorials (76)
Tips (13)
Resources (6)
	
	

And that's it. All the facets will work with your own grid that you have built with the Repeater (or EasyPosts element).

Adding the animation

By default there is no animation when you click on the filters, so you can build your own with this snippet.

In a Code Block, add this Javascript:

window.WP_Grid_Builder && WP_Grid_Builder.on( 'init', onInit );

function onInit( wpgb ) {
    console.log( 'instance', wpgb.instance );
    wpgb.facets.on( 'appended', onAppended );
}

function onAppended( posts ) {
    posts.forEach( animate );
}

function animate( post, index ) {

    post.style.opacity = 0;

    setTimeout( function() {
        requestAnimationFrame( function() {
            post.removeAttribute( 'style' );
            post.classList.add( 'post-animation' );
        } );
    }, index * 60 );
}

And finally, in the same Code Block but for the CSS:

@keyframes post-animation {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translatey(0);
  }
}

.post-animation {
  animation: post-animation 0.3s ease;
}

As you can see, you can build your animation pretty easily.

Optimizations

You will be pleased to know what when we use WP Grid Builder with Oxygen, only the assets about the Facets will be loaded in the frontend (facets.js and facets.css).
And you can also remove Polyfills in the options :

It was just a short introduction, as it makes the plugin much more interesting since it supports Oxygen.

Special Thanks to Loic for the fantastic support.

Resources

Here is another example of WP Grid with Oxygen, from Permaslug : Map Results in Oxygen with WP Grid Builder