📅 May 5, 2022

Building a Custom Post Repeater in Oxygen

Another Oxygen Tutorial is here! Let's build a custom post type repeater using elements within Oxygen. We used NO extra coding AT ALL for this project, just the built-in tools!

The first step of the process is creating our custom post type. For this, we'll be using another plugin called Metabox. There are lots of free alternatives for this (for example, CPT UI) or you can create a custom post type directly using php if you're so inclined. For me, Metabox makes it the easiest.

Next we'll add some custom fields to the new post type. Again, we can use metabox for this. One of the most popular alternatives is Advanced Custom Fields, but Metabox allows us to accomplish both processes with a single plugin and, in my opinion, the less plugins we use, the better!

Okay great, now let's actually create the repeater. Oxygen has a built-in repeater element that we're going to use. Thankfully, they make it easy to manage the query with no knowledge needed of the WordPress loop. We'll set our query parameters to use the new post type we created, with no limit on the number of posts.

Now we'll set the layout to use CSS grid. In this case I want to use a 3-column grid and adjust the number of columns based on screen size. Thankfully this is super simple with Oxygen.

With the repeater element added, now we just need to add our internal elements and fill it with dynamic data. Oxygen let's us pull all kinds of dynamic data into our builder elements, so we'll add an image, title, and any other data we need to fill. And just like that, we've created our custom post repeater and set it up in just a few minutes!