Oxygen Developers Guide

This article presents tips for developers when working with Oxygen.

This is a useful reference whether you are building complex custom designs or creating plugins.

Load assets both in Oxygen editor and on the front end

Use oxygen_enqueue_scripts action hook.

Ex.:

add_action( 'oxygen_enqueue_scripts', 'custom_enqueue_assets' );
/**
 * Load assets both in Oxygen editor and on the front end.
 */
function custom_enqueue_assets() {
	wp_enqueue_style( 'swiper', plugin_dir_url( __FILE__ ) . 'assets/css/swiper.min.css' );

	wp_enqueue_script( 'swiper', plugin_dir_url( __FILE__ ) . 'assets/js/swiper.min.js', array(), '4.5.0', true );
}

Load assets in Oxygen editor only

Use oxygen_enqueue_ui_scripts action hook with if ( defined( 'SHOW_CT_BUILDER' ) ).

Ex.:

add_action( 'oxygen_enqueue_ui_scripts', 'custom_enqueue_assets' );
/**
 * Load assets in Oxygen editor only.
 */
function custom_enqueue_assets() {
	if ( defined( 'SHOW_CT_BUILDER' ) ) {
		wp_enqueue_style( 'swiper', plugin_dir_url( __FILE__ ) . 'assets/css/swiper.min.css' );

		wp_enqueue_script( 'swiper', plugin_dir_url( __FILE__ ) . 'assets/js/swiper.min.js', array(), '4.5.0', true );
	}
}

Load assets on front end only

Use

oxygen_enqueue_frontend_scripts

or

oxygen_enqueue_scripts with if ( ! is_admin() && ! defined( 'SHOW_CT_BUILDER' ) ).

Ex.:

// add_action( 'oxygen_enqueue_scripts', 'custom_enqueue_assets' );
add_action( 'oxygen_enqueue_frontend_scripts', 'custom_enqueue_assets' );
/**
 * Load assets on front end only.
 */
function custom_enqueue_assets() {
	// if ( ! is_admin() && ! defined( 'SHOW_CT_BUILDER' ) ) {
		wp_enqueue_style( 'swiper', plugin_dir_url( __FILE__ ) . 'assets/css/swiper.min.css' );

		wp_enqueue_script( 'swiper', plugin_dir_url( __FILE__ ) . 'assets/js/swiper.min.js', array(), '4.5.0', true );
	// }
}

Add immediately after opening body tag

Use ct_before_builder action hook.

Ex.:

add_action( 'ct_before_builder', 'custom_after_body_open' );
/**
 * Add stuff immediately after opening body tag (in both the Oxygen editor and the front end).
 */
function custom_after_body_open() {
	echo 'test';
}

Actions for injecting in the Oxygen editor

oxygen_before_toolbar_close: Hook for add-ons to add UI elements inside the toolbar.

oxygen_after_toolbar: Hook for add-ons to add UI elements outside the toolbar.

I plan to update this with more info on hooks and filters – specific to Oxygen in the future.