Custom PHP and HTML can be added to your page using the Code Block element. PHP behaves just like it does if you were coding it in a WordPress theme file. You can run the WordPress loop, make database queries, and use any other WordPress API functions.
To add a Code Block, click +Add > Basics > Code Block. Click PHP & HTML to access the editor.
Your code will be executed inside Oxygen, allowing you to see the results of your code live, without saving, uploading, and refreshing.
JavaScript
You can write JavaScript and jQuery in Oxygen and see the results live.
Adding JavaScript to an element
Each element can have its own JavaScript. Click the Advanced > JavaScript tab to access the JavaScript editor.
%%ELEMENT_ID%% will be replaced with the actual ID of the element.
Example:
jQuery('#%%ELEMENT_ID%%').click(...)
Adding JavaScript to your page or template
Do you want to add custom JavaScript to your page or template? Add a Code Block (+Add > Basics > Code Block). Then click JavaScript to open the JavaScript editor.
Using jQuery
As is default with WordPress, jQuery is loaded automatically. To use jQuery, write jQuery('...'), not $('...').
Loading External JavaScript Libraries
You may load external JavaScript libraries in one of two ways:
create a plugin to enqueue them with wp_enqueue_script
upload them somewhere and insert the necessary tags
If you have code that looks like from your typography, analytics, or other 3rd party cloud provider, read this article on adding code to or before .
Header & Footer Code
Use the plugin Insert Headers and Footers to add code to your or before the tag.
Once the plugin has been installed, go to Settings > Insert Headers and Footers and you will see where you can insert your tracking and integration code, either in or before the tags. Simply copy and paste the code into one of the two text areas.
Once you insert your code, click Save.
Custom Attributes
Oxygen allows you to add custom HTML attributes to elements. You can find this option in the Advanced Tab of the Properties Pane, in the Attributes control section.
To add an attribute to an element, click the Add Attribute button. You can add multiple attributes to each element.
You can use the Dynamic Data buttons in the name and value fields to insert dynamic data.
To remove an attribute, click the x icon to the right of the attribute you'd like to remove.
Custom HTML attributes allow you to add data-attributes that are used by third-party JavaScript libraries, ARIA attributes & roles, and much more.
CSS
Oxygen's visual interface provides controls for many CSS properties, but sometimes you may want to add additional, custom CSS that can't be created with Oxygen's visual controls.
When writing custom CSS, Oxygen displays the result right inside the editor.
Adding CSS Properties to an Element or Class
When editing an element or class, you may specify any additional CSS properties that Oxygen doesn't provide visual controls for. Click Advanced > Custom CSS and add CSS properties you need.
Adding Custom CSS to a Page or Template
Additional CSS can be added to a page or template using the Code Block element, which can be added from +Add -> Basics -> Code Block
Adding Sitewide CSS
Stylesheets that will be loaded on every page of your site can be added from Manage -> Stylesheets.
Alternatives to functions.php
Because Oxygen is not a theme there is no functions.php file.
If you need to put some custom PHP functions somewhere, and using an Oxygen Code Block isn't appropriate, put your functionality in a plugin.
This way, you don't need to use a child theme, and updating Oxygen won't overwrite your custom PHP.
Here is an example plugin you can use as a starting point for your own: https://github.com/srikat/my-custom-functionality
Code
WordPress Widgets
Most WordPress widgets can be embedded in Oxygen from +Add > WordPress > Widgets.
For most widgets, the widget settings will appear in the Basic Styles tab.
After editing the widget settings, click Apply at the bottom of the panel to save the settings.
Some widgets have elaborate and complex JavaScript settings screens that are not fully compatible with Oxygen's interface. These widgets must be edited in the WordPress admin panel.
To add these widgets to your pages, follow these steps:
Install the plugin WooSidebars.
Create a widget area from Appearance -> Widget Areas.
Go to Appearance -> Widgets and add the widget to your newly created widget area.
Embed the widget area in Oxygen from Add+ -> WordPress -> Sidebars.
Toggle
The Toggle element displays an clickable toggle that will show or hide the element that follows it.
Add a Toggle element to your page from Add+ > Helpers > Toggle.
Toggle Structure
By default, a Heading element will be placed inside the Toggle element, but this can be deleted and replaced with any other elements.
The element placed immediately after the Toggle will be shown or hidden when the Toggle is clicked.
In the below example, a Heading is placed inside the Toggle. When it is clicked, the Text element that immediately follows the Toggle will be shown or hidden.
Toggle Settings
Icon Color - set the color of the Toggle element』s icon.
Icon Size - set the size of the Toggle element』s icon.
Toggle Initial State - whether the toggle is open or closed when the page is first loaded
Toggle Target (optional) - by default, this is left blank and the next element under Toggle will be used as the target. If, however, you want to toggle a specific element elsewhere on the page by clicking the Toggle element, you can specify the ID of the element to show/hide.
Testimonial
The Testimonial element displays a customizable testimonial on the page, with various options for layout, typography, spacing, and image settings.
Add a Testimonial element to your page from Add+ > Helpers > Testimonial.
Image
Image URL - set the URL of the testimonial photo
Image Size - control the size of the photo
Image Spacing - control the spacing between the photo and the testimonial text.
Image Position - position the image before or after the testimonial text.
Layout
Layout - choose horizontal or vertical.
Vertical Layout Below - set a screen width below which the image and testimonial text become vertically stacked. You can choose a horizontal layout as the default, while setting the Vertical Layout Below to a smaller screen width.
Content Alignment - select left, center, or right to align the elements within the testimonial.
Mobile Content Alignment - select left, center, or right to override the Content Alignment setting at widths below the width set in Vertical Layout Below.
Typography
In this tab you can control the typography for three sets of text within the Testimonial element: Author, Author Info, and Text.
Each of these three tabs have identical typography settings, which are the same as those found at Advanced > Typography.
Spacing
In this tab, you can control the amount of spacing underneath each text element in the testimonial.
Text Space Below - set the spacing below the testimonial text.
Author Space Below - set the spacing below the testimonial author.
Author Info Space Below - set the spacing below the testimonial author info.