Con, Pros, And Need To Knows When Building A Website With Oxygen

This post is meant for people who are considering Oxygen for site building. It is not like most builders as it is both more involved and more powerful. In a companion video I created an Oxygen site from scratch so that people could see the process and what was involved. In this post I’m providing my assessment of the cons, pros and need to knows when building a site with Oxygen 3.6.

Video Version

Cons

Most of these cons are small inconveniences or things to keep in mind while working with Oxygen. There are a couple that are more serious, so the cons are listed from major to minor. Note that there are Oxygen addons that bring more features or address shortcomings, but here I’m mainly dealing with the stand-alone tool.

Common Theme Features Are Missing

Oxygen disables the WordPress theme and you are required to create the theme parts (or import premade ones from the Design Library). This is different than the theme building functionality of most page builders, like Elementor Pro or Beaver Themer, as they allow you to create templates as needed, so you can use a mix of theme and user created templates. There is nothing wrong with the Oxygen approach, but themes provide many features, that we may take for granted. There are two features provided by themes that I noticed were missing in Oxygen: sidebars and “safety styles.”

There are simple plugins and code snippets available for creating sidebars and for that reason, the missing feature doesn’t stop you. However, sidebars are nothing more than widget locations, and the ability to create widget locations seems like it would be a useful and easy to add feature.

What I’m calling missing safety styles is more serious. All good WordPress themes contain styles for making images responsive, for handling typical content that may overflow or break content containers, and for common widgets and Gutenberg blocks. It is part of the accumulated knowledge of accomplished theme authors, and many site builders used to using high quality themes, take this functionality for granted.

Oxygen replaces the theme but does not provide those safety styles. I am sure that a good argument can be made that this is not Oxygen’s job, that because Oxygen provides the freedom to create your own theme templates it would be impossible to anticipate user needs, or added styles on this level may inadvertently interfere with user intentions. However, the result of the missing safety styles means that every new Oxygen user has to do a fire drill when their site breaks. I think the most common of these safety styles should be added, even if only as an option.

You Cannot Edit the Oxygen Stylesheet Directly

Oxygen has stylesheets that apply site wide, but they can only be edited from within the Oxygen editor. When you are cleaning up and testing your site you find a number of small things that need to be tweaked. Navigating to the Oxygen templates menu, opening a template for editing, loading the editor, and opening the stylesheet is time consuming and cumbersome. It would be nice to be able to quickly edit the “universal” stylesheet without opening the full Oxygen editor.

About Text Placeholders

Alan Smiles first mentioned this and I experience it first hand. In many applications there is placeholder text that is cleared when you click into the edit area. Oxygen, however, does not clear the placeholder text and when you click into the text box it is often difficult to clear out. Here is an example where I clicked into a URL text box and pasted in a URL. When I pasted the link it was added to the placeholder text, instead of replacing it.

Here is another typical example. You double click to edit the text in a Text element control. The cursor ends up being in the middle of the text and you have to clear the placeholder text out before adding your own text. This is not a huge deal, but quickly becomes tiresome.

Global Styles are Not Global Site Wide

This is a pet peeve of mine that is not limited to Oxygen. Many builders, themes, or addons describe their features as “global,” but they are really only tool-wide. In this case, for example, the Oxygen global color palette is not available in the WordPress editor. There is some community created code you can add to get the color palette carried over, but it would help with design integrity and be nice if Oxygen had color palette integration with Gutenberg. Perhaps this could be included in the Oxygen addon for Gutenberg.

Working With Icons

Oxygen includes the free version of Font Awesome and Linearicons in SVG format. The great thing about these SVG icons is that they are very light weight and they scale and maintain their resolution, so they always look sharp. However, the ability to use these icons is limited.

Regular Font Awesome icons, included as an icon font, can easily be used in menus or in-line within your content. They are also easy to style. Oxygen includes several elements where you can use an icon: Icon Box, Social Icons, and Icon. However, you cannot use these in a menu or in-line. It is possible to grab the code generated by Oxygen for different icons and include that, but it is difficult to style icons added this way.

Pros

Feature Rich Editor

Once you learn your way around in the Oxygen editor you come to realize that it is pretty amazing. It is a combination of a code editor, with lots of helpers, and a visual builder with a decent set of elements (aka blocks, widgets, or modules). It lets you work with visual premade content, with visual elements that have a good number of options and settings, with HTML, CSS, JavaScript, PHP, and with WordPress dynamic tags and functions. It exposes these different levels in a pretty balanced way, which is clear and logical. In this regards, I think that Oxygen is unique in the WordPress space. Being able to work with both the surface and the internals, so to speak, is powerful and very appealing to many site builders.

To highlight these different levels a bit, here are the Design Sets of predesigned sites, pages, and sections.

Here is the list of settings you can apply to a project, which in some ways are analogous to the types of settings you might find in the Customizer.

Within the editor you also have access to stylesheets and you can see the styles applied.

There are about 50 core Oxygen elements.

Each element has some primary settings, which vary by element.

Each element also has a large, standard set of advanced settings.

The elements provide the building blocks for the layout and design of your templates.

Some of the elements provide direct access to the HTML and PHP used in the template.

There are additional features, but this should give you an indication of the different levels at which you can choose to work.

Powerful Theme Builder

Oxygen is a powerful theme builder that includes template inheritance and application priority features. It supports user-generated reusable elements and promotes reuse.

Here is a screenshot of the template definition screen. These type of settings for applying a template to content types is fairly common in advanced builders, but what makes Oxygen’s template builder more powerful are the advanced features of its editor (as mentioned above).

Easy Posts List Element

Most sites need to be able to create archive lists. The Oxygen Easy Posts element comes with 15 layout presents.

You have full access to the query used to create the archive list and can adjust the options using the custom panels, or even manually edit the query.

You can adjust the styles using the same primary and advanced settings as other elements.

You have direct access to the stylesheet.

You also have direct access to the HTML and PHP used. This makes it easy to, for instance, add a custom field to the archive display.

The Easy Posts element exposes all of the layers of the Oxygen builder.

Conditional Display Options

Every element has the ability to apply conditional display options. You access these by clicking on the Conditions button on the settings panel. That opens an AND / OR condition builder.

When you click on the Set Conditions button you get a dialog where you can select your trigger and the conditions for matching on it. There is also the option to match on dynamic data as well as to create your own PHP code and set your condition based on its return value.

Working with Dynamic Data

Oxygen supports WordPress dynamic tags. It also supports Toolset and deeply supports Advanced Custom Fields. Here are the supported dynamic tags. Note also the Advanced item at the bottom where you can call a PHP function.

Relatively Easy to Create Pages without Bloat

Oxygen sites often score well on website speed tests. Examination of the code output shows lean output much like an expert would produce by hand. This is in contrast to some builders that generate a large number of divs to support their layout and style options. Here is the official comparison matrix from the Oxygen website.

Third Party Addons Ecosystem

The Oxygen addon ecosystem started to bloom about a year ago. There are addons that add elements (aka widgets, modules or blocks), that enhance the editor, that offer design sets, and more. Most of these contributions are from solopreneurs or small shops. While there are many very useful utilities, users should be aware that the stability and longevity of the vendors may vary. Here are just a few of the offerings available.

Other Features

Oxygen now offers a WooCommerce addon and a Gutenberg block builder addon. I am very interested to try the Gutenberg block builder, which seems promising. I don’t have any knowledge about the WooCommerce addon.

Need to Knows

Here are some things I think it is important to keep in mind when deciding if Oxygen is right for you.

An Advanced Editor for Power Users

Many WordPress builders tend towards the lowest common skill set. This makes them very popular with new users and site owners as they empower people to easily create attractive and functional sites. These builders often place advanced styling options within easy reach of users. I look at these builder as being an example of the 80 / 20 rule. Eighty percent of what you need to create complex sites is proved with an easy to use interface. Experts can use their experience and knowledge to achieve complex designs and functionality, but there is 20% of the advanced functionality that just doesn’t fit or requires special third party addons.

Oxygen, on the other hand, is targeted towards users who are comfortable seeing code (HTML, PHP, CSS, JavaScript) and don’t shy away from it. It is also appealing to those who may not have the skill set but are dedicated to learning to be a power user. With Oxygen you can access much of the “hard” 20% from within the editor, but power user or developer skills are needed to fully utilize it. That said, when building a basic site I mainly needed CSS and some HTML knowledge. I didn’t need JavaScript, though I’m sure there are times when that would be useful.

Taking Responsibility for the Theme

I mentioned this before, but it is worth repeating: with Oxygen you use an advanced tool and play the role of theme author. There are functions that a theme usually provides that you will be responsible for. You will also need to bring some design skills, or make intelligent use of the design library or third party predesigned assets.

When you use a theme or builder that is installed on tens of thousands, hundreds of thousands, or millions of sites, many of the gotchas have been identified and dealt with. These include things like small differences in browsers (such as Safari) or handling the mobile display of menus or embeds. So, I imagine it is good to plan to do more testing than you might otherwise undertake, especially at first.

Theme Builder vs Page Builder

You can use Oxygen as a theme builder to create templates, which is what I’ve described, but also as a regular page builder to create pages and posts. Oxygen uses shortcodes, like Divi. If you move away from a builder that uses shortcodes then there may be cleanup to fix your content. This issue has possibly been blown out of proportion, especially if only used for a few standard pages. However, if there are many content pages built using a shortcode builder then the cleanup could be significant. For this reason, I recommend using Oxygen as a theme builder and suggest that people use Gutenberg, as much as possible, for posts and pages.

The Future of Oxygen

Soflyy, the company behind Oxygen does not have a public roadmap and generally does not discuss its long term plans. There is a strong rumor that Oxygen version 4 is being rebuilt in VueJS, which would be a great enhancement and allow the team to overcome some of the limitations of the current architecture. However, it was mentioned that when Oxygen moved from version 1 to version 2 there was no backward compatibility (though users were given a license for version 2 and support for the older version was still offered). I didn’t think much about that until I saw someone mention that we don’t know if version 4 will be backwards compatible. If it is not, and you wanted to upgrade the site to the latest version, then it would be necessary to recreate your templates.

Discussion and Conclusions

I’ve noticed a significant shift in discussions about Oxygen. For a while there were a lot of excited fans who were pushing Oxygen, but I didn’t see lots of sites built with the tool. That has changed and there are a number of freelancers and agency regularly building Oxygen sites. Also, I take the presence of an active 3rd party ecosystem as a sign of the health of a builder. Thrive Architect did not encourage third party addons and they suffered for that. Likewise, Brizy has not seen any third party contributions, other than some predesigned page templates. Elementor, on the other hand, has a huge third party ecosystem that is helping to drive its growth. Oxygen has now started to see a growing third party addon market. It is early days, and feels a bit like the Wild West, but I think it reflects commitment and excitement.

Oxygen is not for inexperienced new site builders. Oxygen has a steeper learning curve than Divi, Brizy, Elementor or Beaver Builder, largely because those builders tend to keep users on the surface level and don’t expose the code layers. You are going to get the most out of Oxygen if you are willing to work with code, at least a little bit.

Lets be clear, when I say “code” I don’t mean that you need to be a programmer. People often jokingly refer to “WordPress PHP,” which refers to the fact that WordPress has a huge number of easy to use functions. Code could also refer to CSS. These types of “code” are the bread and butter of power users. If you have been making WordPress sites for a while then you are very likely a power user and have the background for using Oxygen.

I think the “best builder” for you depends on your skills, values and goals. There are a very large number of WordPress site builders who don’t want to work with code. Some have never been introduced to code and others have the skills, but prefer other options. It is silly to say that people who work with one solution are “real site builders” and others are not. I think that people should use the tools that empower them to be productive and that give them satisfaction.

If you don’t have the skills but want to learn Oxygen, I suggest investing some time in free HTML and CSS training first. It is very easy to pick up the basics. Knowledge of CSS will help you in working the themes and with every builder on the market. Then watch a bunch of videos and give Oxygen a try.

I’ve seen a number of power users or people with a development background who want to try Oxygen or think that they “should” be using Oxygen, but they are happy with their current solution and they don’t have much free time. If that is the case then I suggest you focus on Gutenberg. If you are concerned about staying current, Gutenberg is a good place to focus your limited attention cycles.

Perhaps you have the skills, can free up some time, and want to try Oxygen, but are afraid that you will get stuck and your effort will be wasted. In this case I suggest that you do try Oxygen. It will take a few days to get a good feel for it. Believe in yourself, and also join some of the good Oxygen-centered groups on Facebook, such as the official Oxygen group and the WPDevDesign group. There are now tons of online resources as well. I don’t think you will get stuck. Of course, that doesn’t necessarily mean that you will come to prefer Oxygen, but you shouldn’t worry that it will defeat you. Even if you don’t switch to using Oxygen as your regular go-to solution, there may be circumstances where it makes sense.

A place where Oxygen could be a good fit for people who regularly prefer other builders, is when the project calls for a bespoke design with custom functionality that relies on dynamic data. These are sites that back in the day would have required a custom theme with custom coding. They have application-like functionality. It is not uncommon to see page builder users who need application-type functionality, beyond what their builder or even addons make available, and in these cases Oxygen may provide more flexibility.

Will I be switching to Oxygen? I made one site with Oxygen that I plan to build out. I want to use Oxygen with Custom Post Types and custom fields and create more complex templates. I am also very interested in Gutenberg and want to see how Oxygen works with it. So, I plan to continue my Oxygen exploration. I don’t intend to convert any of my other sites to Oxygen at this time, though after working further with Oxygen I might consider it in some cases.

So, when you consider the “cons” that I listed above it is pretty clear that they are mainly convenience issues. Now, compare the cons to the “pros” and the power and significance of the pros far outweigh those inconveniences. A lot of people are wondering if they should be using Oxygen. Does it make sense for you to give it a try? I hope this discussion helps you understand Oxygen better and make that determination.