Shortcode for displaying Oxygen templates and reusable parts
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:
<?php
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 ) );with
return do_shortcode( get_post_meta( $atts['id'], 'ct_builder_shortcodes', true ) );