Oxygen: What Is It?

Oxygen: What Is It?

Video

Here is a video where I answer the question, “what is Oxygen?”  There are some more details shown in the video, while the article below summarizes the pros and cons, with screenshots.

Introduction

Oxygen is unique in the WordPress landscape. I see a lot of people asking about it. People wonder if it is it a theme or a page builder.  Some are very enthusiastic fans, while others are warning people to stay away. After working with Oxygen for a while I’ve identified a few gotchas and come to appreciate its strengths. I think if you work smart, it can be a good tool to add to your box.

The oxygen 2.1 beta was recently released and it includes full Toolset integration.  I’ll use that beta for this article (and video).  It is a beta, so things might change, but some of the screen shots will be a bit different than the current 2.0 version. 

Oxygen Takes Over the Theme

The first thing I want to do is show some of the  differences between Oxygen and a “regular” page builder.” This is a screenshot using the free OceanWP theme with no page builder activated.  I’ve entered a few blog posts so we have some data. 

oceanwp theme

When we turn on the Elementor page builder, nothing changes on the front end.  The only change is we see an “Edit with Elementor” button on the post edit screen.  You can use Elementor Pro to create theme templates, but generally it works with your theme.  Now here is a screenshot with Oxygen turned on. 

oxygen builder with no templates

There’s no header  there’s no footer, and there’s no blog template.  Oxygen has taken over for the theme and if we want a header and footer and page template or blog template we’re going to need to create them.  So, this is a major difference between other page builders and Oxygen.  With oxygen you have to do the theming, that is required, whereas with Elementor or Beaver Builder it’s an option.  You can use their theming capabilities if you want to, but you can also use the theme as is. 

Oxygen As Page Builder vs Elementor – A Question of Content

I’m going to look at the theming capabilities briefly, but before I do that I want to show you another difference between Oxygen and other page builders that I think is important to keep in mind.  Here is a page created with Elementor. There is nothing fancy.  I just added an image and some styled text under it.

elementor page
Now, I’ll disable the Elementor plugin and look at the page again. The layout and styling are gone, but the content is still there.  

elementor disabled


Let’s do the same experiment with Oxygen.  To do that, I’ve made some theme templates for Oxygen that I’m going to turn on.  Oxygen is not only a theme template builder, but also can be used as a page builder. Here is a page I created with Oxygen.

page made with oxygen

Now here is what it looks like when I disable the Oxygen plugin.  The content added with the Oxygen builder is gone.

oxygen disabled

This is a gotcha that you need to keep in mind while using Oxygen.

Another Difference – Customizer Options

Here is a screenshot of the Customizer options available with the free OceanWP theme.

oceanwp customizer options

Now, here are the Customizer options available once I enable Oxygen:

oxygen customizer options

The theme specific Customizer options are gone.  I guess that is not too much of a surprise as Oxygen takes over the theme.

Sidebars And Widgets

In the list of options in the Customizer above we see the standard WordPress items … except that the “Widgets” option is gone.  Apparently some widgets are not compatible with Oxygen, so to control that the standard widget management features are removed.  If you want to add a sidebar to your Oxygen templates, the documentation recommends using the Woo Sidebars plugin.  With that plugin, you first define a sidebar area and then you can add widgets to it.  Anyway, that’s another little step and little gotcha.  If you’ve got some widgets that you need they may or may not be compatible with Oxygen.  The WordPress widgets that are compatible are available inside the Oxygen editor and you can use those when you’re making your layouts and templates.

Pre-Designed Theme Resources

Although you need to create your theme templates, there are some pre-designed options that come with Oxygen.  You can use them for a quick start.  On the Oxygen admin menu there is a link to the “Oxygen Design Library”.  Currently there are 9 complete websites that you can choose from.   If  you want to start with a pre-built site then that is an option.

oxygen design sets

You can still take advantage of these pre-built design elements, even if you don’t want to import a complete site.  Within the Oxygen builder there is a menu item that allows you to import a page or even just a pre-designed section.

Themeing – General Overview

The templates that you create with Oxygen can inherit from another template.  So what I did was start with a “Default Template” that has a header, a footer, and a content placeholder area.  Here is a screen shot of my “Default Template”:

oxygen default template

The header and footer were imported from the “BNB” design set.  If you want to start with one of the pre-built designs, creating a template like this takes about two minutes. After I created the template with the header and footer, I created a “Default Content” template for single posts and pages and a “Default Archive” for the archives.  These templates inherited from the parent template so that they included the header and footer.  Here are the template settings for the single:

oxygen template screen

Creating Templates for Custom Post Types – Book Single

I created a custom post type “Books” using Toolset and added a few records.  Here is what the edit screen looks like. The elements that are highlighted in green are standard WordPress elements. The one is yellow is a custom field.

oxygen book edit screen

It is kind of a WTF of WordPress that your custom fields don’t show by default on the front-end, so let’s create the oxygen template for the single book so that custom field is included.  I created a new template and assign it as a single for Books.  I’m not going to go into detail on the steps involved.  If you’ve used Elementor Pro or Beaver Builder you know enough to figure it out.  Its just a matter of finding where the controls are.  Instead, I’m going to emphasize the “dynamic data” options.

oxygen book single

For the book single I used a two column layout and put the featured image and a button to Amazon on the left.  On the right I added a post title element and entered the post meta using a text module.  A post content module was placed below that.  Here is a screen shot for the image module.  Note the “data” button:

oxygen data button

Clicking on the data button shows an overlay with the image fields you can choose from.  I could have selected the “Toolset Types field,” but Oxygen is smart enough that I could just select the Featured Image.

oxygen data button clicked

It seems that most of the modules where it makes sense to use optional data have a “data” button.  There are two other ways to bring dynamic data in.  In the list of modules on the left side, there is a grouping labeled “WordPress” and under that “Dynamic Data.”  I used the Title module for the post title and I could have used the Featured Image for here as well.  It seems both options work.

oxygen dynamic data modules

The other way to bring in dynamic data was via the text module.  When adding the post meta I used a text module so I could add the words “Posted on” before the date and “By” before the author.  Here is a screen show of that.  Note that this time the dynamic data fields were shown on the top of the editor:

oxygen editor module

That button shows up when typing in the edit module.  Clicking on it gives you a list of fields you can insert. This basically inserts shortcodes into your text.

oxygen editor dynamic fields

For the button, I used the button module and selected the Toolset Types field link and then the “amazon-link” custom field.  Easy peasy. Here is what the Book single looks like on the front-end:

book single

Creating Templates for Custom Post Types – Book Archive

When I created the default templates, I created one that applied to all archives.  Because the featured image for books is taller than wide, the default archive layout didn’t look good as the images were clipped.

default book archive

As an experiment, I created a Toolset View that laid out the books in a list format.  I created an Oxygen template for the Books Archive.  Since I already had an archive template for “all” archives, I gave this one a higher priority, so that it would override the “all” setting.

oxygen template priority

In the Oxygen editor, I just inserted the “Toolset View” module into a section.  This is a nice integration. If there wasn’t a Toolset View module then I could have just used a Toolset shortcode.

oxygen toolset view

This is what it looks like on the front-end:

oxygen book archive

Summary and Conclusions

I think that Oxygen is very powerful and it has a lot going for it, however, there are some gotchas.  A big difference between Oxygen and most page builders is that Oxygen takes over your theme.  You’re going to need to create your own templates.  The pre-designed elements are attractive, but if you want to create your own from scratch, that is pretty straightforward.

I can see two advantages to creating your own templates with Oxygen:  one is in Facebook groups the number one question people have is “what theme should I use with my page builder?”  Well, if you’re using Oxygen you can just ignore that because it doesn’t matter!  The second advantage is that if you’re have a project where you’ve gotten comps from the client, maybe Photoshop layout files, and you have to make a theme from scratch, then Oxygen is going to be a real time saver.  It’s powerful enough to let you create bespoke designs and would be easier than trying to fight an existing theme.

Another gotcha is the loss of content for pages built with Oxygen when using it as a page builder.  This is more critical in my opinion, so work smart.  If you use templates and the regular WordPress editor for your content area, your content is preserved should you move away from using Oxygen.  If you can avoid using Oxygen for your page content then you it won’t be an issue. Using the templating functions, you control the layout and your content is safe.  If you are going to be on a site where you’re going to need to make lots of landing pages or unique pages, well those will have to be recreated if you ever move away from Oxygen, so you might want to use some sort of page builder plugin instead.  This may mean you choose not to use Oxygen and that you’re going to use a theme plus a page builder.  It is possible to use oxygen with a page builder, but that seems a little overkill or odd to have two builders going.

Oxygen is not a builder targeted to newbies.  It is for developers and power users who aren’t afraid to get their hands dirty.  One thing that struck me while working with Oxygen is that the creators of Oxygen seem to have a really deep understanding of WordPress and how it works.  I was very impressed, though obviously Oxygen isn’t for everybody.  Many people are probably used to working with themes and page builders and have a very quick and efficient work process already worked out. However, I  hope that this video gives you a deeper understanding and maybe some insight into types of projects where Oxygen would work for you.

 

Checkout Toolset     Checkout Oxygen

 

Affiliate Disclosure: Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. You will still pay the standard amount so there is no extra cost to you. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”

 

Close Menu
>

Newsletter Sign Up

Receive occasional emails from WebTNG with reviews, how-tos, editorials and news about themes and plugins with a lifetime license. 


Your email address will not be shared.

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp's privacy practices here.

Pin It on Pinterest

Share This