Sometimes, you may want to display 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 Oxygen’s built-in functions or adding a custom function to your site that registers a new shortcode and outputs Oxygen’s JSON on the front end.
Please note that when using this approach, you’ll want to add styles in 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 Oxygen, this tutorial should help you get started: https://oxygenbuilder.com/tutorial/newbie-guide-classes-crash-course-for-oxygen/.
First, we’ll look at how to display oxygen content dynamically using Oxygen’s built-in functions. To display content dynamically using PHP, you can use the do_oxygen_elements (Oxygen 4.0+) or do_shortcodes (Oxygen 3.9-) functions:
<?php
/*Oxygen 4.0 or later */
echo do_oxygen_elements(json_decode(get_post_meta(123, 'ct_builder_json', true), true));
/* 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 Oxygen content as needed.
If you want to display 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_oxygen_content_shortcode');
if (!function_exists('bitt_oxygen_content_shortcode')) {
function bitt_oxygen_content_shortcode($atts)
{
if (!class_exists('OxygenElement')) {
return '';
} else {
$json = get_post_meta($atts['id'], "ct_builder_json", true);
if ($json) {
global $oxygen_doing_oxygen_elements;
$oxygen_doing_oxygen_elements = true;
return do_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 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 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 Oxygen.
<?php
echo do_shortcode( '[oxygen-content id="123"]' );
?>That’s all for this tutorial. You should now be able to display Oxygen content dynamically elsewhere on your site and outside of 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!
