Oxygen Builder: How To Generate Query String Parameters

Oxygen Builder: How To Generate Query String Parameters

Oxygen Builder provides Easy Posts and Repeater components that are a very powerful way to generate dynamic post listtings leveraging WP_Query parameters.

What I am about to show you works very well when trying to query custom post types and specific categories related to that post type. I could use the custom option provided by this example below uses the manual query option in Oxygen.

Using PHP your code would look something like this:

<?php
	$params = array();
    $params['post_type'] = 'project';
    $params['tax_query'] = array(
        array(
            'taxonomy' => 'category',
            'field'    => 'slug',
            'terms'    => 'pools'
        ),
    );
?>

If you were to take the above and turn it into an URL request you would end up with something like the following:

post_type=project&tax_query[0][taxonomy]=category&tax_query[0][field]=slug&tax_query[0][terms]=pools

This doesn’t work if you paste it into the Oxygen Builder manual box because of the brackets [].

You need to replace [ with %5B and ] with %5D.

…or you can leverage WordPress’s builtin build_query method to generate your query parameters for you.

How to Generate Query Params in Oxygen?

Step 1

Add a new Code Block anywhere on your page and paste your php code into the PHP and HTML section of the code block. Don’t worry, you will delete this block when you are done.

<?php
	$params = array();
    $params['post_type'] = 'project';
    $params['tax_query'] = array(
        array(
            'taxonomy' => 'category',
            'field'    => 'slug',
            'terms'    => 'pools'
        ),
    );

    echo build_query( $params );
?>

Step 2

Apply the code, view the page on the frontend and copy the generated output of the code block.

Step 3

Go back to edit your page.

Go to your Repeater or Easy Post component, select Query -> Manual.

Paste in your output from Step 2 inside the Query Params input.

Click the Apply Query Params button.

Step 4

Delete your code block from Step 1.

Final result

Oxygen query params

Conclusion

This isn’t somethign I could find documented on Oxygen’s website and took some trial and error to get a working solution. I would expect to use post_type=project&tax_query[0][taxonomy]=category&tax_query[0][field]=slug&tax_query[0][terms]=pools and have Oxygen handle parsing and encoding this on their end. Unfortunately, as of version 3.7 we need to implement my hacky solution above.