Buy me
Guide

Oxygen

Introduction

Oxygen is an extremely powerful page builder that has no equal when it comes to customization and speed. Version 3.5 introduced the ability to apply data-attributes to elements, making it finally possible to use spx in it's full glory. The following guide is referring to spx 2.0+.

There are two possible ways to use spx with Oxygen:

  • wrapper element
  • code blocks

Which way you want to go totally depends on your use case. For many, using the wrapper element is a completely fine and viable option.

Element

The wrapper element can be found in the component section of Oxygen. It is located right next to the code block:

spx components in oxygen

Technically, it is very similar to any of the other elements that Oxygen offers, with one little twist. It can become any of the spx components.

the spx element in oxygen

The decision to integrate all components as one element was made to speed up the development process of the plugin, as every new element, property or feature is immediately available to be used inside Oxygen.

To put it into relation, before 2.0, every new detail of the plugin had to be duplicated for usage within Oxygen, making development stale and opposite to the versatile nature of web components.

Attributes

Controlling the components is done by using the attribute textarea. In spx, attributes are used to apply different settings to components, similarly to how it would be done outside of Oxygen.

an accordion component with settings applied to it

The component will update with the new settings once the "Apply Params" button at the bottom of the panel has been pressed.

A full list of available properties, slots and methods for each component can be found in the documentation.

Slots

Sometimes, more control is needed to really make some of the components work for you. Slots are useful in that regard, as they allow you to replace some of the standard behaviour with different markup. Let's replace the header of the accordion component with something more customised using the slot attribute like so:

an accordion header slot

This will give the heading element a slot attribute, instructing it to replace the default header text.

Code Block

Since all spx elements are just Web Components, they can be used in any environment where HTML is allowed. Since Oxygens Code Block also allows for PHP to be used, it is possible to make use of some of the PHP helpers that spx provides.

Usage

Code blocks are very comparable to writing code in themes, as there are no helpers on the way. This has the advantage that it is possible to just copy and paste code and see some instant results.

For example, let's copy this code from the playground:

<spx-masonry>   <img src="https://picsum.photos/230/500"/>   <img src="https://picsum.photos/420/300"/>   <img src="https://picsum.photos/550/450"/>   <img src="https://picsum.photos/240/300"/>   <img src="https://picsum.photos/960/300"/>   <img src="https://picsum.photos/600/800"/>   <img src="https://picsum.photos/560/500"/>   <img src="https://picsum.photos/1200/600"/>   <img src="https://picsum.photos/480/900"/>   <img src="https://picsum.photos/270/340"/>   <img src="https://picsum.photos/300/370"/>   <img src="https://picsum.photos/750/350"/>   <img src="https://picsum.photos/200/300"/>   <img src="https://picsum.photos/230/600"/>   <img src="https://picsum.photos/420/300"/>   <img src="https://picsum.photos/550/450"/>   <img src="https://picsum.photos/240/300"/>   <img src="https://picsum.photos/960/300"/>   <img src="https://picsum.photos/600/800"/>   <img src="https://picsum.photos/560/900"/>   <img src="https://picsum.photos/1200/600"/>   <img src="https://picsum.photos/480/900"/>   <img src="https://picsum.photos/270/340"/>   <img src="https://picsum.photos/300/370"/>   <img src="https://picsum.photos/750/350"/>   <img src="https://picsum.photos/200/300"/> </spx-masonry>

Pasted into Oxygens code block it looks like this:

masonry component inside oxygen code block

Pretty neat, right? Of course this example is only scratching the possibilities of the code block. All spx components can be used within loops and queries without any problems, making them a perfect solution for more complex tasks.

FAQ

Let's create an FAQ section using the accordion component and ACF repeater functionality.

repeater fields set up in acf

For this example, we are filling the fields with some dummy data like so:

repeater fields in post

To get all of the entries, we are also going to use the repeater element inside Oxygen, which is able to query the ACF fields.

repeater in oxygen

Instead of using the standard accordion header, we are going to insert data from the question field of the ACF repeater.

accordion header in oxygen

Again, this is done by applying a slot attribute with the value header to the heading element.

The same procedure has to be repeated for the content, this time applying the content attribute to the slot attribute.

accordion content in oxygen

Et voila, the final product will look like that:

Stay in the loop

You can unsubscribe at any time by clicking the link in the footer of our emails. For information about our privacy practices, please visit our website.

We use Mailchimp as our marketing platform. By clicking to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing.

Learn more about Mailchimp's privacy practices here.

Projects

A collection of web components
for WordPress developers.

A minimal and feature-packed
WordPress theme.

Quicklinks

Playground Changelog Privacy Login Reset password

Help

Documentation Product support

Guides

Oxygen Edit Button

Latest Post

2.0 is here! 2.0 is here!

© 2020 Fabrikat. All rights reserved.

hi@fabrikatdigital.com