Published on Jun 2, 2020

How to add custom CSS in Oxygen editor

Sridhar Katakam

Looking to run custom CSS code in the Oxygen editor?

Adding the following in a Code Snippet will load the specified CSS inline and can be used to make styling changes to the elements of the builder itself:

add_action( 'wp_enqueue_scripts', 'wpdd_oxygen_editor_css', PHP_INT_MAX );
* Add custom CSS in the Oxygen editor.
function wpdd_oxygen_editor_css() {
// if we are not in the Oxygen editor, abort.
if ( ! defined( 'SHOW_CT_BUILDER' ) ) {
$css = '
.oxygen-add-section-element[data-searchcat="Reusable"] {
width: calc(100% - 6px);
wp_add_inline_style( 'oxygen', $css );


.oxygen-add-section-accordion-contents .oxygen-add-section-element {
width: calc(100% - 6px);

with your CSS code that should be loaded in the Oxygen editor.

The above code will make the reusable elements in the +Add section appear 100% wide and stacked one below the other.