In this article, we're going to cover the must have plugins and addons for the Oxygen Builder in 2022. The Oxygen Builder for WordPress is an incredibly powerful tool that allows you to create pretty much anything technically possible, but it is lacking a few core features that would seriously speed up your design workflow and save you from a bunch of headaches. 

Because of that, when you purchase the Oxygen Builder, there are a collection of must have plugins that you should buy alongside it. After using the builder as our main website creation tool for several years as an agency, we've tried pretty much every single free and paid product in the ecosystem. From this, we've created this list "must have" plugins and addons for Oxygen. Of course, we wish that we had found them sooner, as a lot of time and money could’ve been saved.

I’ve jokingly stated on the Facebook group that the development team behind Oxygen Builder should offer these many of these plugins as a bundle when checking out, it would really make many people's lives much easier. Hopefully, you land on this article as you’re doing your preliminary research before buying the tool, and pick up (some of) these plugins as well.

A note: this article was originally published in 2020. Since then, Oxygen has matured, the user group has skyrocketed, and many new plugins and addons have been released. Previously, this article only contained 2 plugin suggestions. Now, it's been completely rewritten and covers our complete agency stack, alongside suggestions and links to our standalone product reviews. To view the archived version of this content, go here.

No time to read? Here's our list:

• Hydrogen Pack adds a right click menu and tons of utilities
• Recoda Workspace is 100% free and adds professional-level workflow enhancements
• Swiss Knife offers a darkmode for Oxygen, many utilities, and an easy to use custom font manager
• OxyMade is our go to, tailwind inspired framework for Oxygen (there are other choices like OxyNinja and AutomaticCSS)
• Scripts Organizer is a code snippet tool for WordPress and replaces the functionality of functions.php
• OxyExtras has a ton of needed components like a carousel and mega menu

Also, the lens of this article is assuming that you are looking at creating multiple websites in a professional setting with Oxygen Building. If you're only building a simple personal website, these plugins are nice to have, but realistically you probably won't see a return on your investment (if you picked up every single one on this list). On the other hand, if you're building dozens of websites a year, the ROI is pretty huge here.

Hydrogen Pack - Enhancement Plugin For Oxygen

The first plugin on our list is an absolute must have Oxygen Builder add on that focuses on making the builder better and easier to use. This plugin is called Hydrogen Pack for Oxygen, and it comes with a ton of features that are aimed towards professional developers and agencies. The sole goal of this plugin is to make the tool easier to use, saving you time and money.

The main selling point of Hydrogen Pack is the right click menu that allows you to easily copy and paste styles, elements, and more throughout the page. Copying styles will save you a ton of time in the long run as you won’t need to go into the advanced settings every time you want to make a single change. For example, if you’re setting up a column that has the same styling throughout, simply copy and paste from the first column into the following ones.

The right click menu also makes it easy to wrap elements in a div, set conditions, make reusable, and duplicate/delete.

For us, Hydration Pack also has two other major selling points that makes it a must have add on for the Oxygen Builder: first are the keyboard shortcuts, and second is the sandbox mode. 

You can create keyboard shortcuts for virtually anything, from saving your work to inserting a section. These are completely customizable, and make it so you can quickly build pages without the need to click through many menus. This is a huge timesaver, especially once you commit these keyboard shortcuts to muscle memory.

The sandbox mode allows you to work on various changes in oxygen, present them to your client with a secure link, and only publish them upon approval. This is essentially a staging environment for your website, directly on it. It works really well, and is created for agencies in mind. Definitely a timesaver, and it also means that you won’t have to go ahead and set up a staging branch.

Hydrogen also fixes several infuriating bugs/drawbacks of the Oxygen Builder like the difficult to use structure panel, global CSS stylesheet regeneration, and more. Basically, purchasing this plugin means that you’ll save a lot of time, money, and headaches. Even better it’s a ~$60 lifetime deal for unlimited installations. The whole pricing structure is lifetime, keeping with the Oxygen style.

Finally, this plugin is created by a developer who used to be on the Oxygen team, meaning that it will likely always be compatible, and works seamlessly with the Oxygen Builder.

One thing to note - Oxygen Builder 4.0 will have native copy-paste (but no right click menu still). However, we've been using the beta and Hydrogen Pack is still a "must have" in our opinion. That's because the copy/paste is cross-site and will pull out (and paste in) custom classes associated. Copy-paste is only one feature of many that this tool has to offer.

Recoda Workspace - Enhancement Plugin For Oxygen

Recoda is a relatively new plugin but one that's incredibly helpful. Even better, it's 100% free at the time of writing. Simply join their Facebook Group, and you'll find a direct download link to the plugin.

It offers a massive collection of features including a command line, offpage real time CSS stylesheets, code block editor like codepen, live server, and many more (to many to list in this article)!

It's a massive workflow booster, and something that everybody should be using, simply because it's free!

Swiss Knife - Enhancement Plugin For Oxygen

This is another enhancement plugin for Oxygen Builder, and while it has some feature overlap with Hydrogen, Swiss Knife is compatible and offers several features that seriously help you when it comes to building websites with this tool.

The most visual enhancement is several themes that you can toggle on and off for the backend builder. This includes both a dark and light mode.

Additionally, it adds emmett.io suggestions, a font management tool which allows you to easily add custom fonts to the Oxygen Builder, code hint, a scaled back code manager (good for basic use cases, but in most projects you will probably want a dedicated snippet management tool, discussed more below), and more.

OxyMade - Framework and Design Sets For Oxygen

You need a framework for the Oxygen Builder. The builder has an incredible class management feature, and frameworks leverage this to keep your design consistent, and seriously improve your workflow.

Instead of clicking through multiple screens to set with values, colors, and other visual aspect, you can simply apply a couple of codes which are automatically suggested by the builder.

Our suggested framework is OxyMade because it is easy to understand, very powerful, and comes with many other utilities that make it more than just a framework (it's also Tailwind inspired, so if you come from that world it will be somewhat familiar). You can easily manage global colors, typography options, and more in the backend interface.

Frameworks are massive timesavers. There are several other options out there like AutomaticCSS (read our review here), OxyNinja (review here - this one also has design sets which are great if you are building a WooCommerce website), and even OxyWind which makes it easy to use Tailwind itself with Oxygen.

There's also the option of using a free framework (like BassCSS), and bulk importing the classes using either Swiss Knife or Recoda. In this situation, you would add the underlying CSS of the framework to Oxygen using global style sheets or something like Scripps organizer which will mention in the next section, bulk import the classes, and use it like to be paid frameworks.

Regardless of the cost, or effort of installation, a framework is something that you definitely should install and use.

Scripts Organizer - Code Manager and functions.php Alternative

Oxygen Builder completely disables themes in WordPress. When adding snippets, additional functionality, or other changes that require PHP, many tutorials suggest that you place code into the functions.php. Well, what do you do when that doesn't exist?

Read: Alternative to functions.php using Oxygen Builder

Scripts Organizer is a code manager for WordPress, and getting around that situation. It's incredibly well designed, and looks a bit like VS code directly in the WordPress admin dashboard. It makes it really easy to add custom CSS, SCSS, JavaScript, and assets from third-party sources like CDNs.

It integrates directly with the Oxygen Builder, allowing you to add any global colors set into your code. You can also edit global Oxygen stylesheets on the backend, without needing to load the entire builder.

A snippet manager is a must have for Oxygen. Scripts Organizer is the one that we use on all websites, but there are free alternatives out there in Code Snippets, alongside other paid options like Advanced Scripts (made by the same developer behind Hydrogen Pack).

OxyExtras - Must Have Components

For some more complex projects, Oxygen is missing some components. For example, if we want to input dynamic data into a carousel or a slider, there's no easy way to do that in its current state. Furthermore, mega menus must be built from scratch as the menu element and Oxygen is very basic and inaccessible.

OxyExtras is a plugin that adds some 37 additional components purpose built for this builder. It's an incredibly well designed and thought out tool. We use these components in pretty much every single one of our projects, and it plays nice with both custom field plugins which we will discuss in the next section.

It's worth noting that you can create any component you want in Oxygen by leveraging their elements API and doing it yourself, or simply building it into a code block or custom short code. But, to save time and be efficient, using a plugin like this makes a lot of sense.

MetaBox AIO - Custom Fields

A custom fields framework like MetaBox or ACF Pro is a must have for more complex websites where you want clients to easily be able to add, remove, and add additional information in the backend. With virtually every single website, we create multiple custom post types, and then assign custom MetaBox fields to these types.

These fields are then dynamically inserted into Oxygen Builder pages and templates, meaning that the information can be edited and added on the backend, without the client ever needing to initialize the builder. That is the power of dynamic data and Oxygen, custom field frameworks extend that.

For example, if you are building a website for an author with multiple books, you could use MetaBox to have the author input the ISBN, back blurb, book cover image, and more. Then, with Oxygen, you can display all of their published works online, building templates for that custom book post tape, and archives.

If you're serious about building professional, easy to use, and extendable websites, you need a custom field framework. Oxygen Builder now supports both ACF and Metabox natively. We have used both custom field frameworks extensively, and currently prefer Metabox due to its ease of use, vast number of fields, and developer accessibility.

You might also like:

• ACF vs MetaBox May 2022 - Detailed Comparison For Agencies & Professionals
• Metabox Review 2022: Powerful Custom Fields For WordPress

Collaboration For Oxygen - Not a must have in most situations

Most being the key word here.

If you are an agency with multiple developers working on the same pages at one time, then this plugin will fix the issue of overwriting global CSS styles and style sheets. In that situation, it is a must-have tool. However, if you are a small team, and/or have a defined workflow, then you likely don't need this plugin. Nevertheless, it's a cool tool to check out.

Read: Collaboration For Oxygen Builder: True Multi User Editing Is Here

While we are on the topic, another cool plugin but one that isn't necessary for many projects is Motion.Page. This brings web flow like interactions to WordPress, and works perfectly with pages and templates created with oxygen. If you're looking to do advanced animations, scrolling interactions, and more, and don't want to use JavaScript or GSAP to do it, this is a very cool tool that you should check out.

The Economics

It's first worth noting that while this article is titled "must have plugins for Oxygen", the majority of users are happily building sites with the core builder and no plugins/addons. My suggestion is to actually do a few projects with the "vanilla" tool, identify the holes yourself, and fill them with (some) of the solutions mentioned in this article.

With that said, over the past few years, we've accumulated every one of these plugins and use them on all client sites. This stack will save you hours and headaches and more advanced and complex website builds.

The total cost of all of these plugins is roughly $720 (including Oxygen's purchase it's more like ~$1,000) - with all licenses including unlimited installations, and every license except MetaBox AOI giving lifetime access, support and updates. Upfront, this is a sizable chunk of money, and while you could go out and purchase every single one of these plugins, I think that the strategy outlined above is more realistic and smarter; don't try to fix something before it happens, plug the holes once you have identified them.

If we compare this to other options on the market, I'd argue that this is actually a more valuable deal. The Elementor Agency plan costs a whopping $1000 A YEAR!

Even with that, to get anywhere near the functionality of oxygen, you'd probably also want to purchase Dynamic.ooo, ACF Pro, and an addon pack like Powerpack. The costs pile up quickly, and are all anual.

Webflow is another builder compared to Oxygen.

If used in a professional setting, prices vary from around $100 a month to several thousand, depending on your team members and sites managed (keep in mind, this platform is hosted by the company, and not based on WordPress).

Of course, as we mentioned in the beginning of this article, the plugins in this list or something that every professional agency using oxygen should consider purchasing. However, if you're an individual building a single website, then you'll probably only want to look at one or two of these, just due to budget.

In that situation, I would suggest a single site license of Hydrogen (~$39.00), alongside a OxyMade, a CSS framework and design set offering (~$147.00).

Conclusion

In our opinion, these plugins or plugins like them are absolute must-haves for a successful project built with the Oxygen Builder. Of course, you can use the page builder by itself, by adding these tools on top of it, you can save yourself a ton of time, money, and headaches. Oxygen is a great option for pretty much anybody out there looking to develop advanced WordPress websites quickly.

If you have any other plugins that are a must have for the Oxygen Builder, feel free to comment them down in the comments section below!