Hydrogen Pack is a must have plugin for Oxygen Builder. We use this tool on all of our website projects, and it’s probably saved us 1000s of hours. After Oxygen, it’s always the first plugin installed. With it come Keyboard Shortcuts, a right click menu, copy/paste, sandbox mode and more.
In it’s first major update since we’ve owned it, Hydrogen Pack 1.3 shipped some serious features that can be leveraged to save you even more time, and build better Oxygen Builder WordPress sites. After messing around with the new tools for a few hours, I wanted to write about what they are and their potential use cases. First, if you’re unfamiliar with this plugin, feel free to give our feature review a read:
👆That review isn’t updated for 1.3 — that’s what this article’s going to be talking about. Without further ado, let’s take a look at these new features, and how I expect to use them.
(This article will essentially expand upon Abdelouahed’s official post on the Clean Plugins site, with commentary from me, somebody who uses Oxygen 10hrs a day, 6 days a week)
This is a feature that is already included in OxyNinja, and one that I’ve grown to love. Now that Hydrogen has it, I’ll probably switch to using their utility because it’s a bit more user friendly, while offering some more features.
Class lock does what the name suggests. It locks any and all editing functionality for a specific class in Oxygen. When you’re building, it can be very easy to accidentally change around global styles (say you have a button class that is applied to many buttons on the site, and you accidentally change it) when you’re really meaning to change the styles associated with the element’s ID. By locking the class, you ensure that there will be no accidental edits made to the styles within.
I’ve had to spend many minutes of my life trying to figure out which global/utility class I accidentally edited - in some cases, days after I’ve made the error. This will resolve that issue.
The OxyNinja setup works very well, and is a good idea if you’re using OxyNinja classes, but the Hydrogen implementation of this feature looks to be just a bit better.
This is the biggest feature, and one that can seriously expand what Oxygen can do. It’s also the most complex feature, but after messing around for a few minutes, I can see several real world use cases.
First, this feature allows you to assign a CSS class, dynamically, to any element. The biggest use case is on the repeater. We can set the “title” of the individual post displayed in a section of the repeater to apply as a class on the HTML. While it doesn’t completely resolve the “duplicate repeater IDs” issue, it does allow us to apply styles to specific sections of a repeater.
You can see: the IDs are still duplicate, but now there are unique CSS classes for each section of the repeater, allowing us to specifically style each one.
We can also add classes from ACF fields, and most other data accessible in the Oxygen Builder backend. That means we can conditionally apply styles from a global stylesheet if an ACF checkbox is checked in the backend — this should give our clients a lot more control over the actual styling of their website. ACF could be, “Make header dark?, and if the checkbox is toggled, .header-dark is applied to our header, and the CSS could style the background to be rgba(0,0,0,0).
This can be classified as a “minor tweak”, but the ability to preserve the advanced tabs state across multiple elements will save us a ton of time. I only wish it was added sooner.
When you’re editing any component in Oxygen, most of the settings you apply will be done in the “Advanced” tab section. If you click to a new element (regardless of if it’s the same type), the native behavior of the Oxygen editor resets it to the standard tab. If you turn this tweak on, that won’t happen. Say you’re in the layout tab for one element. When you click to the next, the layout tab for the new element will remain open.
So far, I’ve never used a composite element. Because I don’t use them, this feature to disable them is welcome: clean up clutter, remove third party requests from the builder backend, and make things load quicker. Toggle them back on if you’re going to use them.
This is something I’ve been missing. I use rich text a lot because it saves me time. Clients usually send formatted Word documents, and I can just paste it in. But because I use shortcuts to build the structure of the pages, saving me from having to make a million clicks, I’ve noticed the absence of this shortcut. Glad to see that it’s here now!
This is another seemingly insignificant tweak that is very welcome. I use VS Code and other code editors. I’m used to keyboard shortcuts. When editing code in Oxygen, I sometimes forget to hit apply code, and in some cases, the code disappears after I click on another element. With this shortcut, applying code will soon become muscle memory, and I’ll be more efficient.
If you don’t own Hydrogen Pack, you’re really missing out. In my opinion, Oxygen should offer this as an “addon” to the actual plugin when checking out. The fact that I was using the builder for months without Hydrogen still haunts me. The reason behind this glowing recommendation is the simple fact that it’s saved me and my devs hours upon hours of manual work — and now the v1.3 update adds even more dedicated to saving you time.
If you need some more persuasion, read our full review here, and feel free to ask any questions in the comments section, or on our new Facebook Group (pst, we’ll probably be giving away an unlimited license when we hit 500 members).