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.

  • Hi Sridhar !

    It seems (but may be I’m wrong) that any kind of animation (superbox, slider, effect on scroll…) inside an inner content doesn’t work when passing through a shortcode like in the present tuto.

    I made a template (or reusable part) for a custom post type, and then used it in an easy post like in the source video. And it works well when using class. Except that I have a inner content in my custom post type template. Everything works well inside the inner content when passing through the shortcode. Except for what it seems to be any kind of element using animations… even when associating class to them…

    I don’t know if it’s a bug or if I missing something… I’m new to wordpress and oxygen. I tried regenereting css cache and signing shortcodes…(even if I don’t really understand what it meens…) without success…

    I’m using oxygen 2.2 and wordpress 5.1 on a local by flywheel dev site…

    I notice that putting a slider in the archive template of the easy post fix the problem. Then the other sliders inside the inner content of the custom post type template work trough the shortcode. But this trick doesn’t work for superbox…

    Please let me know if you have any idea where i can look to fix this…

    And of course… THANKS for all your PRECIOUS tutos !

  • Hi (again) Sridhar !

    It seems (but may be I’m wrong) that any kind of animation (superbox, slider, effect on scroll…) inside an inner content doesn’t work when passing through a shortcode like in the present tuto.

    I made a template (or reusable part) for a custom post type, and then used it in an easy post like in the source video. And it works well when using class. Except that I have a inner content in my custom post type template. Everything works well inside the inner content when passing through the shortcode. Except for what it seems to be any kind of element using animations… even when associating class to them…

    I don’t know if it’s a bug or if I missing something… I’m new to wordpress and oxygen. I tried regenereting css cache and signing shortcodes…(even if I don’t really understand what it meens…) without success…

    I’m using oxygen 2.2 and wordpress 5.1 on a local by flywheel dev site…

    I notice that putting a slider in the archive template of the easy post fix the problem. Then the other sliders inside the inner content of the custom post type template work trough the shortcode. But this trick doesn’t work for superbox…

    Please let me know if you have any idea where i can look to fix this…

    And of course… THANKS for all your PRECIOUS tutos !

    Edit : I finalely succeed to make it work with sliders, effect on scrolling and some other element type… I don’t know how cause I did and di again a LOT of things… regenerate CSS cache, enable “selector in the oxygen settings…” and so on…

    BUT “superbox still” doesn’t behave as a superbox. And “video” simply doesn’t appear… And I’m now pretty sure there are some bugs here…

    • As you have noticed, this method certainly has its limitations and is not robust.

      My guess is that JS for animations is written by Oxygen inline and won’t carry through via the shortcode method like the HTML and CSS (to a limited extent).

      • Hi! Thanks for your answer… You’re probably right…

        I noticed that superbox works when adding a flippbox class (with the css at global level). But what I don’t undertand is that a simple video doesn’t appear…

        I tried without shortcode nor easy box, with just an infinite scroll code block in my blog post template instead of a basic prev nav navigation, and have the same results as with a shortcode and easy post…

        So… it seems quite difficult, if not impossible, to have a simple infinite scroll effect on a post template having a inner content with videos… :-((

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