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

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 shortcodes 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 Code Snippets plugin.

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_shortcode( get_post_meta( $atts['id'], 'ct_builder_shortcodes', 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.

That’s it!

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