Use WP Grid Builder on a Page in Oxygen

,

Written By

Jonathan Jernigan

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

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 the most inconsistent newsletter this side of the Mississippi

Delivered on a regular-as-I-can basis, I'll share with you the tl;dr of new blog posts and videos, exciting announcements, and other valuable information from around the WordPress ecosphere. You'll never get more than one email per week from me.

"*" indicates required fields

This field is for validation purposes and should be left unchanged.