Use WP Grid Builder on a Page in Oxygen

Sometimes you might need to add filters to a regular page instead of an archive template in Oxygen, which does work but takes a tad bit of tweaking.

WP Grid Builder Settings

Before you get into Oxygen, make sure you have Filter Custom Content turned on in WP Grid Builder settings.

Change query type

The first thing you must do is change your Repeater or Easy Post element to use a manual query. You need to add "wp_grid_builder=wpgb-content-1" in front of your query. An example query that would look for posts in the regular "post" type would look like this: wp_grid_builder=wpgb-content-1&post_type=post

Add class to repeater

In the previous step, we set our Repeater's query to look for "wpgb-content-1" and you must also add this as a class to your Repeater or Easy Post element.

You must also use the exact class name you just added to all of the facet shortcodes you're going to use such as [wpgb_facet id="1" grid="wpgb-content-1"]

Note: wpgb-content-1 can be changed to something else, but whatever you change it to must match:

  • in the Repeater's manual query
  • as a class on the Repeater
  • as the ID in your shortcode's "grid=" so it knows where to filter

Filters only work on page refresh

If you're having the issue where filters only work on page refresh, check the above 3 spots for a mismatch between classes. I've found this to be the issue more than once where filters aren't working for me and it simply came down to typos or forgetting to change an ID in one spot.

Hide repeater pagination

Consider hiding the Oxygen Repeater pagination and using the WP Grid Builder facet for pagination instead. This will work more reliably and also won't mess up your layout by having pagination floating in weird areas. To hide this, simply use the following CSS and change the #_dynamic_list-xx to your repeater's ID:

#_dynamic_list-13-1599 .oxy-repeater-pages {
display: none;
}

You can find your repeater ID by clicking the Repeater element in your structure pane and triple clicking to highlight the ID. Add that CSS into a code block somewhere on your page, and viola!

Expanding your manual query

Most tutorials you'll find online will share how to develop a WP_Query into a format that looks similiar to what you need, but is not what the Oxygen Repeater accepts. What you can do is use the below links to generate a query, then use the WP Dev Design tutorial to convert it into what the Repeater accepts.

Signup For Emails

Want to be notified when new tutorials are released? Signup below for our roundup emails. We promise not to spam and won't blow up your inbox. 
  • This field is for validation purposes and should be left unchanged.
Jonathan Jernigan, Founder
Permaslug and APEX Web Solutions

Join Permaslug

Membership Benefits Include:

  • Ultimate Oxygen Course
  • Ultimate Woocommerce Course
  • ACF Pro Course
  • Material Design Lite
  • Template Downloads
  • Community
  • And more!
register

More Posts

How to Use OxyNinja Core Framework and Classes

The OxyNinja Core Design set for Oxygen Builder is more than just some pre-built classes. It includes an entire Grid framework built right in, allowing you to create complex layouts with ease. Not only that,…
READ post

Free Sandbox Plugin, OxyNinja, Dynamic FAQ, and More

Trying something a bit different today! I'm mashing up a bunch of different Oxygen Builder tutorials, discussions, and plugin reviews into one stream. Some of this content I've wanted to cover but it didn't justify…
READ post

How to Build a Local Directory Membership Site in Oxygen Builder

We'll be building a brand new website that has a membership component to it using MemberPress, Advanced Custom Fields Pro, and Oxygen Builder along with filtering and map results via WP Grid Builder. This site…
READ post
menu
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram