How to use Oxygen Builder repeater component with custom PHP data/lopps
Published Date:
5th November 2022
Difficulty: 

Hey guys, so i wanted to use the Oxygen Repeater to loop through custom code, in my case a JSON array from the Google Sheets API.

After much trial and error I eventually made it work well enough to share.

How is it done?

To do this we use a custom function and a filter, we basically add a filter to posts_results and check if post type matches our fake type along with a simple helper function to make life easier.

To start create the following in Oxygen Builder, a "Repeater" component with a manual post_type set to for example "fake_post_results".

image 1

Next create the following in a "Code Block" and move it to before the Repeater.

function fake_post_results( $posts, $query ) {

// Set the filter in Oxygen Builder to get the post_type called fake_post_results
if( 'fake_post_results' === $query->get('post_type') ) {
    // Get data in to $data array, loop through the Array and add rows to $post
    $data = json_decode(file_get_contents("https://blah.tld"));

    $posts = array();
    foreach($data as $row) {
            $post = (object) [
                'post_title' => $row['title'],
                'post_content' => $row['content'],
                'cy_post_meta' => 'This is explained below.',
             ];
             $posts[] = $post;
    }
}
return $posts;
}

add_filter('posts_results', 'fake_post_results', 10, 2);

This is a basic example on how you would pull JSON data from an external source and set the $data variable to it, then loop through it with a basic foreach loop.

That's it you are basically done, add the relevant "fake post" attributes such as title, content, excerpt etc to the array above and output them using Oxygen Builder.

However you may have noticed that I have a cy_post_meta in the $posts object above, if you want to add some non standard values to your $posts object you can add them like i have with the cy_post_meta` value abouve.

In order to output this additional data other than the standard values available in the $posts object and in Oxygen Builder you will need to use a custom function. I add the following function to my installation (Code Block, Functions.php or WPCodeBox any will work)

function fake_custom_post_data($value) {
    global $post;
    return $post->$value;
}

Then in Oxygen Builder you can simply add a text block with dynamic data like below, replacing the argument with the name of the value you want to output.

image

Live examples

Want to see how it works? check these links below for examples of using the Oxygen Repeater to pull data from various JSON sources, these examples below make use of the OxyExtras Accordion in addition to Oxygen Builder's repeater.

Back to Top
cross