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.
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.
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.
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.
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.
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.
Now here is what it looks like when I disable the Oxygen plugin. The content added with the Oxygen builder is gone.
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.
Now, here are the Customizer options available once I enable Oxygen:
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.
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”:
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:
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.
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.
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:
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.
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.
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:
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.
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:
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.
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.
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.
This is what it looks like on the front-end:
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.