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

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
  • For some reason when I do this, styling does not come across.
    The colors & layouts and fonts that I apply in the reusable parts and I seem to get some form of default behaviors.

  • >
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: