What is OxyMonster?

OxyMonster is a plugin for Oxygen Builder that allows you to input part or all of a massive CSS utility class framework based on Tailwind into Oxygen quickly, easily, and modularly. This is similar to what OxyNinja does with its hybrid framework of UIkit and Tailwind.

I was fortunate to have the privilege of testing OxyMonster a few days before release, and this review will be largely based on my experiences with the beta release, though I do now have the full release version. Thank you, OxyMonster, team for the free key and the opportunity to test before release and give feedback!

Framework Basics

So what is a CSS framework anyway? Basically, it's a huge list of CSS utility classes for efficient and consistent design. A utility class is a class meant to do one specific thing. You can sort of think of them like building blocks. You'll take a div for example, and add a class for padding, one for a shadow, one for rounded borders, and one for a background color and hey, suddenly you've got a card!

OxyMonster adds classes for pretty much anything you can think of. Anything from padding, margins, shadows, borders, colors, widths, fonts, alignments, Flexbox, CSS grid layouts, and so SO many more. Oxymonster is a super-comprehensive framework and you will seriously find classes for virtually everything. If you can think of something to make a utility class for there's a 99.999% chance that OxyMonster has already done it.

I recommend taking a look at the cheat sheet if you'd like to see a full list of all the classes available broken down into categories. Since it is very heavily based on Tailwind you can also use Tailwind's documentation if you need a better understanding of anything as their documentation is quite thorough.

Just like in OxyNinja, the classes for CSS grid layouts are extremely powerful and I highly recommend taking a look at Tailwind's documentation on CSS grid layouts to see what you can do with them. You won't regret it, I promise!

Modular Framework

OxyMonster does something interesting in that the framework comes in a modular form. There is a "base framework" which will do 99% of what you need to do, then the rest of the framework is broken down into many different subsections that you can add as you need them.

The base framework is just over 500 classes which is a lot on its own, but the full framework is almost 1400 classes. This is basically the entirety of what you would expect if you were using the full Tailwind framework.

If you're like me, when testing the plugin you might be tempted to add the entire framework all at once. Don't do that. I learned the hard way that the full framework is so big that the Google Chrome browser can't handle loading them all in the Oxygen Builder editor. This issue is known by the OxyMonster team, but there isn't much they can do about it as it is out of their hands and is a browser limitation. The team has since added a big warning to the framework module installation page explaining this. If you're using Firefox it should be able to handle the additional classes, but I don't recommend it anyway.

Long story short, you should start with the base framework and only add things if and when you need them.

Bulk Class Merging

I have to say, this feature is awesome. One of the biggest downsides to using a low-level utility framework like OxyMonster / Tailwind is that you sometimes end up with a ton of classes on a single element and often end up repeating that same massive list of classes across several elements. OxyMonster's class merging feature gives you a super easy solution to that.

In three very short steps you can combine all of the classes on an element into one class with a new name.

In the above example, I was making a simple card entirely with utility classes and the list looked something like "p-5, bg-primary, color-tertiary, rounded-md, shadow-md". Previously I was dealing with this by quickly copying all my classes from one element to another using Hydrogen's Copy Styles feature, but that still adds a ton of redundant classes and isn't best practice.

Using OxyMonster's merging feature I was able to instantly merge all five of those classes into one class that I called "mycard". Now I can simply put that one class on all the rest of my cards instead of a list of five. It's very common to have elements with this many classes on them and you'll frequently find yourself having twice as many in some cases using any utility class framework, so this merging feature is actually really awesome in my opinion.

Pros and Cons

Pros

• Heavily based on Tailwind, and Tailwind is great
• Huge amount of classes
• Classes can be installed modularly
• Class merge feature is super useful and conducive to good design practices
• Class options are extremely comprehensive
  • There's something for everything
• Installing the base framework and subsequent modules is super quick and straightforward
• Lifetime license deals

Cons

• There are literally so many classes that you can break the Oxygen Editor in Chrome
  • This is a Chrome limitation though. Not really OxyMonster's fault
• It can take a little bit of time to get comfortable using it while you're trying to learn the syntax
  • Feels great once you've got it down though!
• It's a brand new product and there are always risks associated with that

Pricing

The CSS Framework is currently available for $69.99 as a standalone or $199.99 bundled with OxyMonster's design sets. Both of these options are lifetime deals. Any users of OxyMade can get the OxyMonster CSS Framework for free via a coupon you should have received via email.

Conclusion

Ultimately, I think OxyMonster is great. The framework is basically Tailwind which is tried and true and highly acclaimed. It has pretty much any utility class you could ever need. I absolutely love the class merging feature, and even though it's perhaps one of the minor features of the plugin, I think it's one of the best things it adds to Oxygen.

The pricing is competitive and is currently in the form of a lifetime license which is always nice.

The big question I'm expecting to start seeing is "Should I use OxyMonster or OxyNinja", and that question is going to be tough to answer. I think if you're experienced with Tailwind then OxyMonster is a no-brainer as you're going to feel right at home. The same goes for if you're just looking for a full-fledged CSS framework. If CSS frameworks are a newer concept for you or you're looking for a more user-friendly one I think OxyNinja might be the better choice. I'll probably write a whole post comparing the two at some point, so stay tuned for that!

The white space is almost always caused by one of your elements having a set width that is too high for the size of the screen. Browse through all your elements, especially ones you recently edited, and check for something width hard set in pixels. That's the most likely culprit. It can still happen if you're using percent widths and other units as well, but it happens a lot with specific pixel widths if you forget to set lower widths for smaller viewports.

If there are some elements stretched out into the white space you can generally safely assume that those elements are the ones you need to fix.

If it's not obvious what element is causing the gap, there is an easy strategy to make it a little bit easier to see. Go ahead and open up your web browser's dev tools then select the <head> tag. From there, add the following code to the *::before, *::after selector:

border:1px solid red

This will add a red border around every element on the page to make it a little more obvious which elements are stretching over the edge. You can also accomplish the same by toggling the gridlines feature in Hoverify if you have that browser extension.

Thanks to Supamike for that idea!

I hope this helps some people!

To decide whether Oxygen or a more conventional page builder is the right choice for you, we need to understand more about the strengths and weaknesses of Oxygen, and most importantly, we need to understand more about your background and what it is that you want out of a builder.

Oxygen Strengths and Weaknesses

Strengths

• The most freedom of any builder
  • Oxygen is designed to be as open-ended as possible to allow developer-minded individuals to make anything they want
  • You'll never feel limited by the way Oxygen works
• Real HTML/CSS concepts like Divs, Classes, etc instead of made-up builder terminology
  • This makes it much more natural to understand for developers and designers used to writing code
  • It feels more like coding with a GUI than using a page builder
• Far superior page file size and load times
  • Oxygen doesn't suffer from the usual divception and resource bloat issues that come with other builders in the market
• The way Oxygen works with CSS classes and such is very conducive to good development practices such as using CSS utility class frameworks
  • This is something you simply cannot do effectively in any other builder
• The current pricing model is an insanely good value compared to the other major builders on the market

Weaknesses

• You can't just throw a premade theme on the site and instantly have a decent site that just needs content like you can with stock WordPress and with other builders
  • Oxygen replaces the theme system entirely. This is great for people who want to build from scratch, but a problem for a novice who doesn't want to work through all of that
• The real HTML/CSS concepts can be a bit tougher to understand for people who do not come from a development background and just want to throw a quick website together without coding anything
• Oxygen has way less fancy features
  • Oxygen gives you the tools you need to make any feature you want but doesn't provide them out of the box. Casual builder users may not want to have to learn to implement these fancy features that you can get out of the box in other builders
• Oxygen is much younger than it's major competition, and thus there are much fewer companion plugins released and guides written for it
  • That said, there are already a good few very awesome companion plugins for it and there is a very strong and helpful community on Facebook

Summary

Hopefully, you can see where I'm going with this. Oxygen is an amazing tool for users who are developer-minded or want to learn to design web pages in a way closer to coding from scratch. You will not get the freedom that you get with Oxygen anywhere else, but that comes at a major cost of features and functionality out of the box.

If you are purely design-minded and do not want to spend time learning basic to intermediate programming concepts you will likely find Oxygen difficult to use or lacking. If you are developer minded and are willing to put in the effort to write custom functionality when you need it, you will find Oxygen to be, in my opinion, the perfect midground between coding from scratch and using a builder.

What You Need From a Builder

Next, we need to better understand what it is exactly that you need from a page builder.

If you are an agency or a freelancer who plans to make many websites and you need to be able to make custom functionality depending on your clients' specifications, Oxygen might be a good play for you. If you are an individual making a site for yourself or your own business and you're just looking for a way to quickly throw a site together without knowledge of web development practices, Oxygen probably isn't for you.

Oxygen is by far best suited to people who need freedom from their builder and who are looking for something that feels more like a framework or even an IDE than a drag and drop page builder. People looking for a more conventional drag and drop, plug and play, website in 10 minutes experience are better off checking some of the other options out there.

So, Is Oxygen Right For Me?

Now that's up to you to decide. I can't tell you whether Oxygen is the right fit for you, but with the above information, you should have a decent understanding of what kind of people Oxygen makes sense for. If you're not one of those people, don't force it! There are other great options out there. I absolutely love Oxygen Builder, but the reality is it isn't for everyone and that's OK. The right builder for you comes down to who you are and what you need out of a builder.

If you think you could use a bit more information I recommend checking out my Oxygen Builder review as well!

Hopefully, I was able to give you some food for thought in making your decision. If you have any questions at all please feel free to ask in the comments and I will be more than happy to answer them!

I don't have extensive experience with Elementor or Divi as neither of them really appealed to me, but I did use Beaver Builder for about two years and I had good experiences using it. If you decide that Oxygen isn't the route for you, I recommend checking out Beaver Builder!

What is OxyNinja Core?

OxyNinja is an importable design set for Oxygen Builder with one major feature that sets it apart from the rest. On top of the usual pre-built sections that you're accustomed to finding in a design-set, you get the "OxyNinja Core Framework", which is a CSS framework that can completely change your Oxygen workflow if you choose to take advantage of it.

Core Framework

OxyNinja's Core Framework is a CSS framework similar to something like Tailwind and UIkit. Basically, it gives you a whole bunch of pre-made utility classes to help you rapidly build your own designs. If you don't know what utility classes are, they are CSS classes that generally do one thing. The classes in OxyNinja cover things like CSS grid column layouts, padding, margins, colors, and more.

My favorite part of the Core Framework is the classes for making CSS grids. So, imagine you want a row of four columns. Instead of using Oxygen's flexbox column system, you can simply create a div to represent the row, then add three more divs inside to represent the columns. Add the class "c-columns-4" to the row div and instantly your three inner divs will become CSS grid columns. Want to add a medium-sized gap between all the columns? Add "c-columns-gap-m". Using classes like this is a great way to easily keep your designs consistent, which is one of the most important aspects of good design.

Let's take it up another notch. Say you want your columns to become rows of two columns on tablets and you want them to become rows of one column for phones. Add "c-columns-l-2" (large - 2 columns) and "c-columns-s-1" (small - 1 column). It's THAT easy. This is the kind of power you can get out of using any of the major CSS frameworks, but OxyNinja is currently the only way to get an awesome framework like this effortlessly imported into OxyGen.

Here's another quick example. Say you have two columns and you want the left column to be two parts and the right column to be three parts. Add "c-columns-2-3". Done.

For anyone interested in the Core Framework I highly recommend watching this video from their product page. It's an example of how quickly you can throw together a design using the utility classes provided with OxyNinja, and it's what sold me on it.

Pre-built Sections

There's only so much to say about pre-built sections, but what I can say is that they are nice looking, efficiently built, and easily modifiable.

The Basics

The designs are all very attractive and consistent. They are all built using OxyNinja's Core Framework which makes them super easy to modify by just swapping out CSS classes. For example, turning this section...

into this section that I'm using for a project...

only took a couple of minutes using the Core Framework classes.

Import From Live Demo

A really cool feature of OxyNinja's prebuilt sections is their unique live demo and import system. You can visit the live demo page here, then click the copy button when previewing any section, and then click the OxyNinja button in your Oxygen editor and it will instantly add the section to your page in Oxygen Builder. In my opinion, this is a huge upgrade over the built-in design set system (which you can still use if you'd rather do that). It's hard to really tell what the sections are like from the small screenshots in the design set UI, so this makes it a lot easier to pick out the right section for the job.

Mega Menus

If you've ever tried to make a mega menu in Oxygen, you'll know that it's a bit of a pain to do. Fortunately, OxyNinja comes with a few different pre-built mega menus that you can import and easily customize for your sites.

Pricing

OxyNinja Core has only one pricing option which is a lifetime, unlimited use license for $99.

Things I'd like to see in the future

• More sections for cool JS effects using various JS libraries
  • Similar to some of the things offered by Design4Fun's Unlimited Elements pack
• Improved support response times
  • This was once one of the strong points of OxyNinja, but they got a bit overwhelmed. According to the developer, solving this is their top priority right now
• Extensions to the Core Framework
  • It already has all of the most important things, but I'd love to see it continue to be extended to include many of the additional things that frameworks like UIkit and Tailwind add.

Conclusion

I think OxyNinja is one of the best, if not THE best companion plugin for Oxygen Builder. The only other plugin that I find this essential to the Oxygen experience is Hydrogen. The pre-made sections are great, but for me, the real value comes in the CSS framework. It has become an absolutely integral part of my workflow and has made it possible for me to throw designs together so much faster. For a lifetime price of $99 I honestly can't see a reason not to get it if you have the money in your budget. It only has to save a few hours to pay for itself and it will save you a ton of time in the long run.

As a testament to how much I like OxyNinja, you might notice that this blog post single is actually based on one of the sections from the OxyNinja design set, and the utility classes are used widely across my site.

Where's the Cons / Dislikes section?

Simply put, there isn't really anything I dislike about OxyNinja Core Framework. There are things I'd like to see added in the future as I mentioned above, but nothing that's truly negative about the product in its current form. I think the pre-made designs are great and the framework is phenomenal. Note: There is no affiliate program for OxyNinja, so you can be sure that this is an entirely genuine opinion!

What is Hydrogen?

Hydrogen Pack by Clean Plugins is a pack of features for Oxygen Builder to improve quality of life and speed up your workflow. These are features to improve your life as the developer/designer, and not something the client or users will ever see. As Hydrogen is a pack of a bunch of smaller, mostly unrelated features, I am going to review each feature separately.

Effects On Performance

Hydrogen did not add any bloat to the front end at all and thus has no effect on the end-user. I did not notice any discernable difference in backend load times and performance either.

Features

Sandbox Mode

This is one of my favorite parts of Hydrogen. It adds a simple switch to toggle Sandbox mode. Once sandbox mode is enabled you can freely make changes to your site without any of the changes affecting the live site. Users will still be able to open the site and see it the way it is meant to be seen. If you decide you don't like the changes you made in sandbox mode you can safely wipe them and go back to live. If you're happy with your changes you can simply drag the slider to deploy your changes and everything will be instantly applied to the live site. You can even generate a link to the sandbox version to send to a client for approval before sending it to live.

This sounds like a risky aspect to entrust to a plugin, but I haven't run into any bugs or issues with it yet, and it has been extremely useful for publishing updates to my site after going live.

Copy Styles

This allows you to copy both inline styles and CSS classes from one element to another using the right-click menu or key binds. I find this feature extremely useful and I used it a lot throughout the redesign of my website. I use a lot of utility classes, and this makes applying them to several elements insanely quick.

Copy Elements

This allows you to copy entire elements from one page to elsewhere on the page, another page, or even onto an entirely different website (using Oxygen of course). I found this equally as useful as I did the Copy Styles feature and didn't experience any issues with it.

Keyboard Shortcuts

This one is pretty self-explanatory. It adds key binds for just about all of the actions in Oxygen that would make sense to have a key bind for. The most common ones are set by default and the rest come unbound, but it comes with an easy interface to set up whatever binds you prefer. This pairs great with the Copy Styles and Copy Elements features.

Right-Click Menu

This adds a lot of the most commonly used buttons to a quickly and easily accessible right-click menu. It includes things like Copy, Paste, Duplicate, Wrap With Div, Add Conditions, etc. I used this a lot and found it very useful.

Structure Panel Width

This allows you to adjust the width of Oxygen's Structure panel. I haven't felt the need to adjust it, but I tested it for the sake of testing and it works fine.

Compact Mode

Compact mode removes some space and padding from the structure panel to make it fit better in smaller screens. I leave it on all the time as it helps avoid the scroll bar when nesting several elements.

Element Icons

This simply adds icons for each element type in the structure panel. It's not a huge deal, but it is nice having the icons.

Disable Edit Locking

I recommend being careful with this one. I use it personally, but the edit locking feature is there for a reason. This removes the warning that prevents you from opening multiple Oxygen editors at the same time. Having multiple open at the same time can result in loss of work if you accidentally save the wrong one.

I turned this on because I was tired of Oxygen incorrectly thinking I already had another editor open and this feature allowed me to bypass that.

Pricing

Pricing for Hydrogen is pretty reasonable. All options are lifetime licenses. $29.99 for one site, $39.99 for five sites, and $59.99 for unlimited. If I were only planning to create one website I don't think I would personally find it worth it to buy a license unless that one site was going to be very large and need frequent updates. As someone who intends to use Oxygen for almost all client sites from now on, the unlimited license feels like a steal.

Concerns

It's worth noting that most of these features could theoretically be added natively to Oxygen someday and I wouldn't be surprised if they are. Fortunately, the price is pretty low though so I won't really feel like I wasted my money considering how much value it is adding for now.

While I really enjoy the sandbox mode, the concept of entrusting something so crucial and potentially dangerous to a relatively young and inexpensive plugin can be a bit unnerving. The good news is, the developer of Hydrogen is actually a member of the official Oxygen Team and in the 3 months this feature has been live, an issue has never been reported. I trust it, but my recommendation is to make a quick backup before making changes in sandbox mode. It's always best to be careful!

Conclusion

I really enjoy Hydrogen and I wholeheartedly recommend it! I really haven't had any negative experiences with it and it definitely improves my workflow. The sandbox mode and copy features are game-changing and I don't think I could ever stop using Hydrogen unless Oxygen added these features natively.

Affiliate Link

I want to make it clear that I DO have an affiliate link for this product now. Each link to the Hydrogen page on this review is an affiliate link. If you do decide to purchase Hydrogen and use my affiliate link to support me I highly appreciate it. I do not write any of my content with the intention of making money. I simply include these affiliate links because I can and I might as well see if I can get a small amount of free money out of it. I hope with this in mind you are still able to trust my reviews, and I promise that my written opinions are always the honest truth and I would never attempt to lead my viewers into a purchase they might regret.

The Basics

Oxygen builder is forever tied in with other names like Elementor, Beaver Builder, Divi, etc. but it really isn't the same thing. Oxygen feels a lot more like coding with a GUI than using a conventional page builder. The amount of control you have over everything is so much better than with any other builder. Other builders give you a lot of drag and drop components to create the content you want. These components are usually filled with lots of baked-in features and options, but it can be a bit tricky to change them in a way that the builder developers didn't intend. Oxygen is a bit different in that it gives you all the tools you need to make that component instead. Using the tools they give you, you can build it exactly the way you want it. This allows you to make the perfect design rather than one that's just close enough.

How It Works

Oxygen gives you some very basic drag and drop components such as sections, divs, columns, text, images, etc. They also provide a few of what they call "helpers". These are a little bit more like what you see in a lot of page builders, but they are less feature-filled and much more flexible. These include things like a header-builder, slider, tabs, and a repeater.

The way you create your pages (and templates) is much more similar to the way that you would do so manually with code. Rather than inserting made-up builder lingo modules, we use divs. Just like we would if we were coding from scratch, we start by building a sort of framework out of divs then add our content inside. From there you can adjust every little thing about each element easily from the interface. If there's something less typical that you want to do, you can easily add custom CSS to the element as well.

Continuing with the more realistic development practices, Oxygen allows you to very easily create CSS classes and then assign them to various elements. You can even edit the properties of a class in different states such as :hover: which you'll find yourself using a lot.

One of the most unique things about Oxygen is that it actually disables and replaces the default WordPress theme system entirely. Oxygen essentially is your theme. In Oxygen, you can create templates for everything that you'd normally make a template PHP file for in a theme such as a header/footer, archives, singles, special page types, etc. This aspect of Oxygen is similar to what Beaver Builder's Beaver Themer plugin adds.

This video is a showcase for a plugin called OxyNinja Core Framework which is basically a CSS framework you can import into Oxygen, but I think it's a great example of what a good workflow in Oxygen looks like if you are using CSS classes right. With or without OxyNinja, this is what building a page should look like once you've established some of your common CSS utility classes and such.

Pros and Cons

Pros

• Stylish and intuitive interface
• No made-up builder lingo
  • Uses real terminology instead (ex: div, class)
• The way things are built using divs and classes is much closer to a real developer workflow than other builders
• Creates clean code with no divception
• Doesn't add a bunch bloat that slows down the site
  • Oxygen only imports what is absolutely necessary on every page
• Structure panel makes it easy to find the correct elements to edit
• Freedom to do virtually anything
  • Unlike other builders, using Oxygen doesn't make me feel limited or constricted to the capabilities of the builder.
• Can easily make a page editable in Gutenberg for clients to edit content without breaking formatting
  • There is also an "Edit Mode" coming soon in 3.6 that will allow clients to do the same in the Oxygen editor.

Cons

• Drag and drop is very clunky
  • Both in the main editor window and the structure panel
• I think the header-builder could be fleshed out a bit more. I would like to see more options
  • For example, there is no way to make the typical standard accordion-like menu for mobile
• Since Oxygen disables the theme system, I think they should have some sort of native interface for enqueueing resources
  • Fortunately, it's not too hard to make your own plugin to enqueue resources
• Steep learning curve for people unfamiliar with more traditional web development practices

Pricing

Oxygen's current price model is, in my opinion, an insanely good value. I expect they will change to a yearly subscription model at some point when they own a larger percentage of the page builder market share, but for right now they only offer lifetime licenses and those lifetime licenses are a similar price to the yearly cost for other builders. $99 gets you a lifetime license, $149 gets you a lifetime license plus including the WooCommerce Integration, and $169 gets you a lifetime license plus the Gutenberg Block Builder and all future additions.

Is Oxygen Builder For Me?

If you are a developer who is comfortable writing HTML and CSS and perhaps a bit of JavaScript and PHP, absolutely yes! Equipped with the knowledge of the above languages there is virtually nothing you can't do with Oxygen. If you are looking to speed up your design process but don't want to fight with typical page builders to make more unique functionality or slow down your site with extra files you don't need, Oxygen is probably the choice for you. In my opinion, Oxygen is the perfect middle-ground between coding from scratch and using a builder.

If you don't really know how HTML and CSS work you might have some trouble getting started with Oxygen Builder. With that said, I think with the right attitude and effort anyone can learn to build with Oxygen. There will be a steep learning curve, but you will become a much better and more versatile developer/designer for it.

If you have no desire to learn the more intricate parts of web development/design and just want to click and drag to make decent designs I don't recommend Oxygen for you. For this group of people, I recommend something like Beaver Builder (Disclaimer: THIS IS AN AFFILIATE LINK) instead. Beaver Builder offers decent performance in terms of page speed, tons of features, and an easy to use drag and drop interface.

Conclusion

I love Oxygen Builder and I plan to use it for a long time. I think it's the perfect middle-ground between coding from scratch and using a typical page builder. Using Oxygen doesn't make me feel limited in what I can do at all. Workflows in Oxygen closely mirror that of a coding from scratch approach and promotes doing things the right way, rather than throwing something together with a bunch of drag and drop modules and bloating your site with random garbage you don't need. Creating a site takes a bit longer in Oxygen than with other builders, but that's mostly because, if you're anything like me, you end up spending an inordinate amount of time nitpicking every little thing until it's perfect, which other builders just don't really let you do.

1. Create the Files and Directories

First things first, let's create the files and directory structure that we'll need. Create a folder on your desktop (or wherever you prefer) and name it something like "resource-enqueuer". Inside that folder, create a file called "plugin.php" and another folder called "assets". Inside the assets folder, I recommend creating some more sub-directories like "css", "js", etc. depending on what kind of resources you are working with. It's not totally necessary if you only have a few files, but it's best practice to keep things organized.

2. Add Resources to Your Directories

Simply place the JS and CSS files you need in their respective directories in the plugin folder.

3. Add the Basic Code For plugin.php

Alrighty, if you've never coded anything before this will be the trickiest part, but trust me it's very simple! I'm going to lay everything out as simply as possible. First, copy and paste the code below into your new plugin.php.

<?php
/*
Plugin Name:	Resource Enqueuer
Description:	Enqueues Resource Files
*/

//You can ignore this, but don't forget to include it. 
//It helps prevent people from directly executing your code.
if ( ! defined( 'WPINC' ) ) {
	die;
}

add_action( 'wp_enqueue_scripts', 'resource_enqueuer' );

function resource_enqueuer() {

	//Put your CSS enqueues under here



	//Put your JS enqueues under here


}

4. Add Your Enqueues

Next, we're going to add our enqueues to the plugin.php file. This is where you're going to need to pay attention a little more, as everyone's case is slightly different and you need to insert the correct names of your files. Below I've written out a few examples of what your enqueue calls should look like for CSS / JS files and if you have your files locally saved or on a CDN.

//CSS enqueue from directory
wp_enqueue_style( 'YourCssSheetName', plugin_dir_url( __FILE__ ) . 'assets/css/yourfilename.css' );

//CSS enqueue from CDN link
wp_enqueue_style( 'YourCssSheetName', 'https://yourcdnlink.com/yourfile.css' );

//JS enqueue from directory
wp_enqueue_script( 'YourJsScriptName', plugin_dir_url( __FILE__ ) . 'assets/js/yourfilename.js', '', '', true );

//JS enqueue from CDN link
wp_enqueue_script( 'YourJsScriptName', 'https://yourcdnlink.com/yourfile.css', '', '', true );

Additionally, you might want to enqueue some resources only on specific pages. Below I've provided some examples of some conditional statements to help you do that! Simply place your enqueues inside the necessary conditionals to make your resources load only on the pages you need them on. There are MANY more conditionals available in WordPress and I've only listed some of the most common scenarios. If you'd like to learn more or have a different use-case, check out this link.

//On the front page ONLY
if ( is_front_page() ){

	//insert enqueues here

}
	
//On every page EXCEPT the front page
if ( ! is_front_page() ) {

	//insert enqueues here
		 
}

//On specified page (based on slug or ID)
if ( is_page('your-page-slug-or-id') ){

	//insert enqueues here

}

//On several specified pages (based on slugs or IDs)
if ( is_page( array('first-slug', 'second-slug', 'etc...') ) ){

	//insert enqueues here

}

//On all posts of a specified type
if ( get_post_type() == 'yourposttype' ){

	//insert enqueues here

}

Don't forget to save your file!

Here's an example of what a simple completed plugin.php might look like (note: you can add additional enqueues easily any time and I'll talk about that more later)

<?php
/*
Plugin Name:	Resource Enqueuer
Description:	Enqueues Resource Files
*/

//You can ignore this, but don't forget to include it. 
//It helps keep your plugin safe from being tampered with!
if ( ! defined( 'WPINC' ) ) {
	die;
}

add_action( 'wp_enqueue_scripts', 'resource_enqueuer' );

function resource_enqueuer() {

	//Put your CSS enqueues under here

	//Enqueues morphtext.css everywhere
	wp_enqueue_style( 'morphtext', 'https://cdnjs.cloudflare.com/ajax/libs/Morphext/2.4.4/morphext.css' );


	//Put your JS enqueues under here

	//Enqueues particles.js on the front page only
	if (is_front_page()){
		wp_enqueue_script( 'particlesjs', 'https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js', '', '', true );
	}

	//Enqueues morphtext.js everywhere
	wp_enqueue_script( 'morphtextjs', 'https://cdnjs.cloudflare.com/ajax/libs/Morphext/2.4.4/morphext.min.js', '', '', true );

}

5. Install Your Plugin

We're finally ready to see some results! Next, go ahead and right-click on your plugin folder and select Send to > Compressed (zipped) folder.

Now we just need to upload and activate the plugin like we would any other plugin! Go to Plugins > Add New > Upload Plugin then select and upload your new zip file. Once that's done, activate the plugin.

We're done! Congrats! You've created your very own plugin to enqueue your resource files (and maybe your first plugin in general)!

How to Edit the Plugin to Add More Later

You can easily add additional enqueues any time by editing the files for your plugin on the server. If you need help with that just follow the steps below!

First, we need to connect to our server with FTP / SFTP. If for some reason you're unable to do that or you aren't familiar with how to use those, you can use the plugin WP File Manager to do so, but please deactivate and delete it after you're done using it for security purposes. Once you're successfully browsing your server you should be able to find the plugin at /public_html/wp-content/plugins/your-plugin-name. From there, simply add the resources to the assets folder and edit your plugins.php file with the new enqueues you'd like to add.

1. Create your particle config

First lets head to particles.js to create our config. Vincent Garraeu lets you configure just about everything super easily through a visual editor on the website. Adjust the speed, the number of particles, lines, etc, and when you're happy with what you have, go ahead and click "Download current config". This will give you a JSON file that we'll use in a few minutes.

2. Import particles.js

There are a few ways to do this. The most correct way is to enqueue it with WordPress' wp_enqueue_script function; however, Oxygen makes enqueueing a little weird because we no longer have access to the theme files where we'd normally do that. If you want to enqueue the script you can create a custom plugin to do so, and I highly recommend doing that method. You can follow my guide here to learn how to do that! Alternatively, if you're not up for that at the moment you can just use a typical HTML script tag in the footer.

Create a code block in oxygen at the bottom of your footer, then add the following to the HTML:

<!-- Import particles.js -->
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>

3. Add an ID to the div

Next, we just need to add an ID to the div we want to contain the particles inside, or you can just make note of the ID automatically given to it by Oxygen.

Note: The position of this div needs to be set to relative.

4. Call the particlesJS() function

Now it's time to finally start seeing some visual progress. There are two ways we can proceed from here. The first option is to upload your particles.json config file to your server somewhere, then feed the file path into the particlesJS() function:

//Wait until the document is loaded
document.addEventListener("DOMContentLoaded", function(){
    /* particlesJS(@dom-id, @path-json)); */
    particlesJS('InsertYourDivIdHere', 'yourpath/particles.json');
});

If you don't want to deal with that you can actually just paste the contents of your particles.json file inside some curly braces where the file path would normally go like so:

//Wait until the document is loaded
document.addEventListener("DOMContentLoaded", function(){
  /*particlesJS.load(@dom-id, @path-json);*/
  particlesJS('InsertYourDivIdHere', {
      //Paste the entire contents of your particles.json here
  });
});

You should be able to see some particles now! (note: they may not be visible in the Oxygen backend, so be sure to view the frontend) Depending on how your page is setup, there's a good chance that the particles canvas is being displayed below the div you wanted it to be in, so I'll show you what I did to fix that next.

5. CSS Fixes

If you have a custom stylesheet started, go ahead and open that and insert the following CSS. If not, create a new one and do the same:

.particles-js-canvas-el{
    position: absolute;
    top: 0;
    z-index: -1; //You will likely need to play around with this
}

On my site, there is nothing behind the div that I attached my particles to, and I set my background color via that div. If yours is any different you may need to adjust the z-index of the particles canvas among other things to get everything layered properly. It's important to make sure your text and buttons have a higher index than your particles canvas or else users won't be able to interact with them.

That's it! I hope this helped you add a cool effect to your sites!