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.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: