Updated on February 13, 2020

Looking to bring back the missing WP admin bar aka The Toolbar from Oxygen editor? Simply add the snippet below and you can have it just like in the WordPress admin and the frontend.

Combined with Oxygen Navigator, this makes it quick and easy to directly edit any Oxygen Template or WordPress Page from literally anywhere on the site saving a ton of time.

Install and activate Code Snippets.

Add a new Snippet titled say, Enable WP Toolbar in Oxygen editor.

Code:

// Revert admin bar removal from the Oxygen editor.
remove_action( 'init', 'ct_hide_admin_bar' );

add_action( 'init', 'wpdd_hide_admin_bar' );
/**
 * Remove admin bar from the Oxygen editor's iframe.
 */
function wpdd_hide_admin_bar() {
    if ( defined( 'OXYGEN_IFRAME' ) ) {
    	add_filter( 'show_admin_bar', '__return_false' );
    }
}

add_action( 'wp_enqueue_scripts', 'wpdd_add_oxygen_editor_inline_css' );
/**
 * Add custom CSS in the Oxygen editor.
 */
function wpdd_add_oxygen_editor_inline_css() {
    if ( ! defined( 'SHOW_CT_BUILDER' ) ) {
		return;
	}
	
	$css = '
		#oxygen-ui .oxygen-add-section-library-flyout-panel,
		#ct-sidepanel,
		#oxygen-global-settings {
			top: 90px;
		}
		
		#oxygen-ui #oxygen-sidebar {
			height: calc(100vh - 90px);
		}
		
		.ng-scope .oxygen-sidebar-stylesheet-editor-wrap {
		    height: calc(100vh - 296px);
		}
		
		/* body.oxygen-builder-body {
			margin-top: 32px;
		} */';

	wp_add_inline_style( 'oxygen', $css );
}

We can also navigate to other parts of the site by adding custom links to the Toolbar.

Thanks to Gagan Goraya for the hint.

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

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: