Creating your own design sets with the Oxygen user library
The user library is a much-overlooked feature in Oxygen but in my opinion, it’s one of the most powerful features it has. Whether you are an agency owner or freelancer, knowing how to use the library effectively will dramatically speed up your Oxygen development.
In this first article (of three) we will look at how to set up an Oxygen install as a design set, then talk about how to structure and prepare your design sets for use, and go through a couple of ways of using them efficiently.
Part 2 will cover how to develop or implement a CSS framework to bring unity and even more efficiency to your workflow. We will go over some of the quirks of how selectors are imported and how to overcome them. We will also cover Atomic Design and how Oxygen and it’s user library is *almost set up perfectly for it, and talk about how to integrate the user library with your agency if you work with a design team.
Part 3 will focus on Oxyframe and how it can combine everything we talk about in this series to supercharge your workflow. I’ll also show you how to make your own simple companion plugin so you can add further time-saving tricks to your belt.
Lets get started.
How to turn any site into a design set
Design sets must exist on a server. They can also be set up locally if that’s how you prefer to work, but then we can’t use them outside of our local environment so it’s best to host them online as we can then use our sets anywhere. This isn’t as painful as it sounds. We’re all web developers and so we should have access to the space. All we need is one domain (or subdomain), and we can create and host as many sets as we like. You can even set up a wp multi-site, and fill it with as many sets as you want. I prefer to use sub-domains and treat them independently.
Initialising a design set is quite simple. All we need to do is go to Oxygen > Settings > Library in the admin panel, then check the box that says ‘Make this WordPress Install a Design Set’. Save your changes, then you will see a bunch of new options appear. The first of these options is a site key.
Site Key
This is your unique site key. In any site you want to use your design set in, just navigate to this screen and check ‘Enable 3rd party Design Sets’. Save your changes and you will see an ‘Add Design Set’ button appear. Click this button then paste your site key into the add source sites box.
You can also regenerate the key at any point, which is useful if it ever falls into the wrong hands.
URL to Site Screenshot
This link will be the main site screenshot. This is what you will see when you select a full site to import. If you have ever installed a pre-built site when you install Oxygen, this image will be displayed on that screen.
That’s it. Our design set is now initialised, but we still have a little way to go to start using our design sets.
Several changes have now taken place in Oxygen. We now have access to the block library as well as new options in Oxygen’s meta box. We need to set up which elements will be available in the design set.
Setting up our elements
There are four things we can include in our library. Blocks (Sections & Elements), Pages, Templates and entire sites.
Blocks
The first thing you might notice after initialising the design set is that we now have a ‘Block library’ section in our Oxygen menu.
This is where we can build new, isolated blocks to use in our design set. We also have a new ‘copy to block’ option in the structure panel edit dropdown.
By choosing a section and selecting ‘Copy to block’, we can give it a name and then a new block is created in the block library.
Tip – Using a post organizer such as Happy Files can really help you out as your library grows.
This still hasn’t included anything in our design set, we must do that from the design set options meta box. Open up a block post and you will see the following.
Once you select a category for the block to appear in, it will be included in the library in the relevant section under ‘Sections and Elements’. You can also either generate a screenshot (which works 70% of the time) or link to an image here.
Tip – You can also link to .gif files, which is cool if your block has moving parts
Another, slightly different method of adding a block/section to the library is by choosing a section and then categorizing it from the newly available option in the dropdown.
This will not create a block, it just makes the section available in the ‘sections and elements’ part of our design set, when we check ‘include the sections in this page/template in the library’. If there is a difference between these two methods in the final result – I don’t know what it is! If you use both methods in the same design set, you will end up with two of the same block which gets confusing and hard to maintain. I would personally recommend sticking to the block library to store your blocks, as it makes things easier to keep track of and maintain in the long run. The only time I define a block within a page is to quickly pass a newly designed section from a site I may be working on, back to my master component library – more on that later.
Pages
In the Oxygen meta box on a page post type, you will see the following
The first option ‘Include this page in the default setup‘ will create this page in WordPress when you install a full design set.
‘Include the sections in this page in the library‘ will include any sections on the page that we categorize from the structure panel.
‘include this entire page in the library‘ means just that. Selecting this will place the page in the library so you can pull it in from the sidebar.
Templates
In the Oxygen meta box on a template post type, you will see the following
The options work the same as the pages with just a couple of other considerations. There are no categories to the templates and if the template type is a reusable post, it will only be available as a reusable part in the default setup when installing a full site. You can also categorise a reusable part and make it available as a block, but that seems pointless and messy when we have a block library.
Entire Site Installs
This is where we get really productive. When you install a full site, Oxygen will create all your pages for you in WordPress, all your templates and places they apply, import your stylesheets, selectors, global settings etc. Think about that – you can have a collection of ready to go templates with all the common pages, home, 404 etc… and all of your templates set up ready to go
Importing everything like this can be a blessing and a curse as we’ll see in the next article where we discuss keeping things unified, but let’s not worry about it now. Once your design set has been added as a 3rd party set, Go to Oxygen > Home > Install a website and you will find it there.
Using the library in your workflow
How you use your new library system is a matter of what works best for you. You could simply have a collection of ready-made templates that you install as a starting point, and then edit to suit your client. You could just have a single design set that includes everything you need, including blocks and a collection of re-usable components – This might work well if you tend to focus on a niche, as many do.
My workflow is something like this. I have a master library where I keep track of and maintain all of my blocks. I will take things from this library as needed, and put new stuff back in if I feel it will be useful in the future. This can be done in a couple of ways. You can temporarily turn the site you’re working on into a design set, and then pull your new elements in. Use a plugin like Hydrogen pack to copy and paste, or simply copy and paste the JSON or shortcode (this will not copy classes, but that can be a good thing depending on your process)
Alongside my master library, I have a collection of genre or purpose specific starter templates. So, if I’m working on eCommerce, I install my ‘ecom’ starter template. My starter templates don’t contain much in terms of components if any at all – just basic wireframes. The real timesaver is being able to set up Oxygen with all of my pages, shop template pages, search results and 404 pages etc. – all there ready to go. Then I can use whatever I need from my master block library. Doing this compared to starting from scratch each time is going to save you hours.
Conclusion
So there you have it. If you are not yet using the Oxygen user library or if like many, you just didn’t know about its existence or potential, it’s about time you did. I love Oxygen and this is the feature that really sold it to me when I started working with it in 2019. The potential it has within your agency is simply extraordinary.
See you in the next part where we will look at design system integration, CSS frameworks and a more in-depth look at how to use the library more productively.