How to add Microthemer admin bar menu item in Oxygen editor

This tutorial provides the steps to add a custom “Microthemer” menu item to the WordPress Toolbar in Oxygen editor.

Prerequisites:

1. WPDevDesign – Oxygen – Navigator – adds useful links in the Toolbar for directly editing Pages and Templates when using Oxygen.
2. Enable WordPress Toolbar in Oxygen editor
3. Microthemer – the best visual CSS editor for WordPress with built-in support for Oxygen.

Note: This is an alternative and slightly quicker method to using Microthemer in the Oxygen editor. This is the standard workflow:

1. Click on Microthemer menu item in the admin toolbar.
2. View > Enable Oxygen.

Caveat: Dialog boxes having the text “Changes that you made may not be saved.” may appear even when no changes have been made soon after the editor is opened.

Here’s How

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: Add Microthemer admin bar menu item in Oxygen editor

Code:

add_action( 'wp_before_admin_bar_render', 'wpdd_microthemer_toolbar_oxygen_editor', 999 );
/**
 * Add Microthemer admin bar menu item in Oxygen editor.
 */
function wpdd_microthemer_toolbar_oxygen_editor() {
	if ( ! defined( 'SHOW_CT_BUILDER' ) ) {
		return;
	}
	
	global $wp_admin_bar;
	global $wp;

	$args = array(
		'title'  => __( 'Microthemer', 'text_domain' ),
		'href'   => sprintf( '%s?page=tvr-microthemer.php&mt_preview_url=%s&_wpnonce=%s', admin_url( 'admin.php' ), rawurlencode( home_url( add_query_arg( $_GET, $wp->request ) ) ), wp_create_nonce( 'mt-preview-nonce' ) ),
	);
	$wp_admin_bar->add_menu( $args );
}

Set the snippet to run everywhere. Save changes and activate.

References:

https://generatewp.com/toolbar/

/wp-content/plugins/microthemer/tvr-microthemer.php

https://wordpress.stackexchange.com/questions/274569/how-to-get-url-of-current-page-displayed#comment451833_299898

https://developer.wordpress.org/reference/functions/admin_url/#comment-959