12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Jul 19, 2018

Shortcode for displaying Oxygen templates and reusable parts

Sridhar Katakam

Updated for Oxygen 4.0 and above.

Want to design in Oxygen and have it appear using a shortcode? This tutorial provides the steps to add a custom shortcode that will parse and output all the JSON generated by Oxygen as HTML for a template or a reusable part.

Use case: Showing a reusable part inside a lightbox popup.

Step 1

One caveat with the technique used here is that id-attached CSS is not going to load.

Therefore you have to re/build your template/reusable part and attach your styling to classes.

For example, let’s say you have used a Column element having two equal width columns you can see that Oxygen sets 50% width for each column div attached to their individual IDs. You need to assign a class to both these divs and set 50% width for the class.

Step 2

Install and activate a Code Snippets plugin like WPCodeBox.

Step 3

Add a new Snippet having a title of say “Oxygen Template Shortcode” having this code:

add_shortcode( 'oxygen-template', 'func_oxygen_template' );
 * Add a custom shortcode for displaying a Oxygen template/reusable part.
 * Sample usage: [oxygen-template id="478"]
 * @param array $atts Shortcode attributes.
 * @return string HTML output of the specified Oxygen template/reusable part.
function func_oxygen_template( $atts ) {

    return do_oxygen_elements( json_decode( get_post_meta( $atts['id'], 'ct_builder_json', true ), true ) );


Set the snippet to run on front-end only. Save and activate.

Step 4

Now wherever you want to output a template or a reusable part, use the following sample shortcode:

[oxygen-template id="478"]

Replace 478 with the ID of your template/reusable part.

If you would like to directly use PHP in a Code Block, here’s the equivalent:

	echo do_oxygen_elements( json_decode( get_post_meta( 478, 'ct_builder_json', true ), true ) );

Replace 478 with your Template/reusable’s ID of course.

Source: https://www.facebook.com/groups/1626639680763454/posts/5147480852012635/

For versions of Oxygen before 4.0, replace

return do_oxygen_elements( json_decode( get_post_meta( $atts['id'], 'ct_builder_json', true ), true ) );


return do_shortcode( get_post_meta( $atts['id'], 'ct_builder_shortcodes', true ) );

Source: https://youtu.be/Fc0M_57oER4?t=425