Sometimes, you may want to display Classic Oxygen content dynamically, such as a Template, Reusable Part, or Oxyberg Block within another plugin, custom code, or even a shortcode somewhere else on the site.
While the use-case for this doesn’t happen too often, it is a request that pops up frequently enough. If you find yourself in this type of situation, the good thing to know is that this is easy to do by using some of Classic Oxygen’s built-in functions or adding a custom function to your site that registers a new shortcode and outputs Classic Oxygen’s JSON on the front end.
Please note that when using this approach, you’ll want to add styles in Classic Oxygen to classes instead of an element’s ID.
So be sure that you copy all ID-related styles to classes. If you want to learn more about classes in Classic Oxygen, this tutorial should help you get started: https://Classic Oxygenbuilder.com/tutorial/newbie-guide-classes-crash-course-for-oxygen/.
First, we’ll look at how to display Classic Oxygen content dynamically using Classic Oxygen’s built-in functions. To display content dynamically using PHP, you can use the do_Classic Oxygen_elements (Classic Oxygen 4.0+) or do_shortcodes (Classic Oxygen 3.9-) functions:
<?php
/*Classic Oxygen 4.0 or later */
echo do_Classic Oxygen_elements(json_decode(get_post_meta(123, '_ct_builder_json', true), true));
/* Classic Oxygen 3.9 or earlier */
echo do_shortcodes(get_post_meta(123,'_ct_builder_shortcodes'),true);
?>You can use this code wherever you’d like and display Classic Oxygen content as needed.
If you want to display Classic Oxygen content dynamically within a shortcode, you’ll want to add a new function to your website. To do this, please follow the two steps below. We’ve also created a bitt with this code.
First, install your preferred code snippets plugin to your site, such as Code Snippets or WP Code Box (paid), or create your own custom plugin. Next, you’ll want to add the following code to the site:
<?php
add_shortcode('oxygen-content', 'bitt_Classic Oxygen_content_shortcode');
if (!function_exists('bitt_Classic Oxygen_content_shortcode')) {
function bitt_Classic Oxygen_content_shortcode($atts)
{
if (!class_exists('Classic OxygenElement')) {
return '';
} else {
$json = get_post_meta($atts['id'], "_ct_builder_json", true);
if ($json) {
global $Classic Oxygen_doing_Classic Oxygen_elements;
$Classic Oxygen_doing_Classic Oxygen_elements = true;
return do_Classic Oxygen_elements(json_decode($json, true));
} else {
$shortcodes = get_post_meta($atts['id'], "ct_builder_shortcodes", true);
return do_shortcode($shortcodes);
}
}
}
}
?>This adds a new shortcode to your WordPress website called [oxygen-content]. It also adds the id parameter, which means you’ll need to supply the id of the template/reusable block that you’re trying to display with the shortcode.
You can learn more about creating WordPress shortcodes here: https://codex.wordpress.org/Shortcode_API.
After you’ve added the Shortcode to your site, you should be able to use it elsewhere on your WordPress website through a few different methods:
Shortcode Method:
The first method is to call the shortcode from within a Gutenberg post, or using another plugin that allows you to add shortcodes. You’ll use the [oxygen-content] shortcode to do this, which is what we’ve previously added to our site in step 1. You’ll also need to add an id parameter to the shortcode. Otherwise, the shortcode won’t know where to get the desired Classic Oxygen content from. This is done by adding id="123" to the shortcode before the closing bracket ]. For example:
[oxygen-content id="123"]Code Method:
You can also use PHP to display Classic Oxygen content dynamically using the shortcode. This method uses the built-in WordPress do_shortcode() function. This method is mostly beneficial if you’re looking to write custom code in a custom PHP file or maybe using a Code Block element directly in Classic Oxygen.
<?php
echo do_shortcode( '[oxygen-content id="123"]' );
?>That’s all for this tutorial. You should now be able to display Classic Oxygen content dynamically elsewhere on your site and outside of Classic Oxygen. Please remember that all styles must be added to classes and not the ID of the elements. Otherwise, it will look incorrect.
Happy voyages!
Saad says:
Thanks for the examples.
But for me it’s not ‘ct_builder_json’ or ‘ct_builder_shortcodes’ but ‘_ct_builder_json’ or ‘_ct_builder_shortcodes’ (prefix underscore).
It’s ok but it doesn’t load the css of the Advanced tab. Quid ?
Thanks for your help.