isotropic-2022
Share
Blog
Search
Menu

Easily Edit Oxygen Content Without Loading The Builder Using JSON Shortcodes

By James LePage
 on June 4, 2022

Easily Edit Oxygen Content Without Loading The Builder Using JSON Shortcodes

By James LePage
 on June 4, 2022

Oxygen Builder 4.0 is now using JSON shortcodes to store designs (as opposed to the old PHP shortcode method). This new data format is quicker and better, but one of the best features is the fact that all settings are readable and stored in plaintext.

Due to this fact, we can make basic changes to existing pages and templates built with Oxygen... without even loading the builder.

Let's look at a simple example. Here I have a page built with Oxygen.

isotropic-2022-06-04-at-21-34-05

The data for this page is now stored as JSON, which can be accessed from the WP Admin page.

isotropic-2022-06-04-at-21-34-50

Even in this format, the JSON data is understandable, but I'm going to use a formatter to make it more readable. Here's what that formatted JSON data looks like.

isotropic-2022-06-04-at-21-36-26

Let's focus in on the Section (id 2), which is blue and contains the headline. If I wanted to change the background color from #00faff to #b7b7b7, I could load the builder and use the GUI. Or I could quickly look into the JSON, find the "background-color" setting for the specific section, and change it there.

isotropic-2022-06-04-at-21-41-27
Simply change the various settings. It's all in plain English so anybody can understand it!

Then, if you click the blue update, the change will be pushed live without you even needing to load the builder.

isotropic-2022-06-04-at-21-44-04
Now the page looks like this

Now, one caveat is that you'll need to go and regenerate the CSS cache after making changes, or they won't reflect on the live site (even though the data is saved, and changes will show if you load the builder.

isotropic-2022-06-04-at-21-43-18

It's not just CSS styling that you can change. Anything, including content and code blocks can be edited this way.

Here's the code for a headline element contained in the section on our demo page. You can see that all of the styling is displayed, but the content is as well.

"children":[ { "id":3, "name":"ct_headline", "options":{ "ct_id":3, "ct_parent":2, "selector":"headline-3-7", "original":{ "image_type":"2", "attachment_size":"full", "color":"#0000ff", "font-size":"45", "font-weight":"500", "font-family":"Arial, Helvetica, sans-serif", "padding-top":"20", "padding-right":"20", "padding-bottom":"20", "padding-left":"20" }, "nicename":"Heading (#3)", "ct_content":"This is my custom content.", "activeselector":false }, "depth":2 } ]

I can change the "This is my custom content." value to whatever, and it will be displayed on the frontend as long as I save my page in the WP admin.

The same goes for codeblocks. Here's how that info is stored:

"id":4, "name":"ct_code_block", "options":{ "ct_id":4, "ct_parent":0, "selector":"code_block-4-7", "original":{ "image_type":"2", "attachment_size":"full", "code-php":"<?php\n\techo \"hello world!\";\n?>", "code-css":"body {\n\tbackground:black;\n}" }, "nicename":"Code Block (#4)", "activeselector":false

You can see that I have CSS and PHP that can be edited here.

The beauty about this new JSON data storage method is that it's readable/understandable by anybody. You don't even need to be technical. Just find the name of the setting/content you want to change, and make it!

Ex: the key for the image SRC is called "src". Can't get much simpler than that!

🚨

Don't make changes without backing up your original JSON data. I copy/paste it into a text file for safekeeping, just in case anything goes wrong.

Oxygen Builder backend loading speed is gotten much quicker with 4.0, but it still needs time to initialize. This new method will now allow you to make quick and simple changes easily. I'll definitely be using this when it comes to making those quick changes like... "can you make the background this color" or "can you change this one word to this".

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of CodeWP.ai, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram