标签： code

Code

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

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.

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.

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.

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 .

PHP & HTML

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.