Admin bar button to enable/disable Query Monitor • Chez Brasofilo

The plugin Query Monitor is an essential tool for WordPress developers.

This helper plugin solves the following problem: when we need to view the page source code, especially on the frontend, QM can be very intrusive.

The plugin author suggests this solution to use in the wp-config.php file:

if ( ! defined( 'WP_ADMIN' ) || ! WP_ADMIN ) {
    define( 'QM_DISABLED', true );
}

My plugin offers a button to toggle this on the Admin Bar.

Just click on the admin bar icon to show/hide QM on the frontend. If the icon is blue, it means QM is active on the frontend; if it is colorless, it means it is inactive.

Usage Instructions

Copy the file “query-monitor-toggle.php” to the mu-plugins directory of WordPress.
After installation, administrators will find a new icon on the admin bar.

Clicking this button toggles the frontend visibility of Query Monitor without reloading the page.
To extend this functionality to the admin area, visit the Plugins > Must-Use (/wp-admin/plugins.php?plugin_status=mustuse) page to check “Also disable in the admin area” – this setting appears as an additional checkbox next to the plugin’s action links.

`query-monitor-toggle.php`

<?php
/**
 * Plugin Name: QM Disabler Toggle
 * Description: Allows toggling the plugin Query Monitor on/off on the frontend with an admin bar button.
 * Plugin URI: https://brasofilo.com/en/admin-bar-button-to-enable-disable-query-monitor/
 * Version: 1.3.2
 * Author: Rodolfo Buaiz
 * Author URI:  http://brasofilo.com
 */

/**
    Usage:
    - When enabled (default state), the plugin disables Query Monitor on the front-end (blue icon = active)
    - Click the admin bar button to instantly toggle Query Monitor's visibility (no page reload required)
    - For complete control, check "Also disable in admin area" in the Plugins page settings
    - All settings persist between sessions and automatically apply to all site visitors
    - Visual indicators show current status: blue icon (active), dark gray icon (inactive), with contextual tooltips 
*/

/**
 * Translations class
 */
class QMDT_Translate {
    const T = [
        'pt_BR' => [
            'Also disable in admin area' => 'Também desativar na área administrativa',
            'QM disabled on the frontend' => 'QM desativado no frontend',
            'QM enabled on the frontend' => 'QM ativado no frontend',
            'Unauthorized' => 'Não autorizado',
            'QM Disabler Toggle does not run if Query Monitor is inactive or not installed.' => 'O controle de desativação do QM não funciona se o Query Monitor estiver inativo ou não instalado.',
            'QUERY MONITOR IS DISABLED OR NOT INSTALLED' => 'QUERY MONITOR ESTÁ DESATIVADO OU NÃO INSTALADO',
        ],
        'es_ES' => [
            'Also disable in admin area' => 'También desactivar en el área administrativa',
            'QM disabled on the frontend' => 'QM desactivado en el frontend',
            'QM enabled on the frontend' => 'QM activado en el frontend',
            'Unauthorized' => 'No autorizado',
            'QM Disabler Toggle does not run if Query Monitor is inactive or not installed.' => 'El control de desactivación de QM no funciona si Query Monitor está inactivo o no instalado.',
            'QUERY MONITOR IS DISABLED OR NOT INSTALLED' => 'QUERY MONITOR ESTÁ DESACTIVADO O NO INSTALADO',
        ],
    ];
    
    public static function __($text) {
        $locale = get_locale();
        return self::T[$locale][$text] ?? $text;
    }
    
    public static function _e($text) {
        echo self::__($text);
    }
}

/**
 * Main class
 */
class QM_Disabler_Toggle {

    /**
     * Singleton instance
     * @var QM_Disabler_Toggle
     */
    private static $instance;

    /**
     * Option name for storing the toggle state
     * @var string
     */
    private $option_name = 'qm_disabler_enabled';

    /**
     * Main plugin instance
     * 
     * @return QM_Disabler_Toggle Singleton instance
     */
    public static function get_instance() {
        if (!isset(self::$instance)) {
            self::$instance = new self();
        }
        return self::$instance;
    }

    /**
     * Class constructor. Initializes plugin hooks.
     */
    private function __construct() {
        // Disable QM early if needed
        $this->maybe_disable_qm();
        
        // Admin bar integration
        add_action('admin_bar_menu', [$this, 'add_admin_bar_button'], 999);
        
        // AJAX handlers
        add_action('wp_ajax_toggle_qm_disabler', [$this, 'toggle_qm_disabler']);
        
        // Scripts and styles
        add_action('admin_footer', [$this, 'add_ajax_script']);
        add_action('wp_footer', [$this, 'add_ajax_script']);
        add_action('wp_head', [$this, 'add_ajax_url']);
        add_action('wp_enqueue_scripts', [$this, 'add_jquery']);
        
        $action_link = is_multisite() ? 'network_admin_' : '';
        add_filter( "{$action_link}plugin_action_links_query-monitor-toggle.php", [$this, 'plugin_action_links'], 20, 4 );
        add_action('admin_footer-plugins.php', [$this, 'toggle_admin_option']);
        add_action('wp_ajax_toggle_qm_admin_option', [$this, 'toggle_admin_option_ajax']);
    }

    /**
     * Disables Query Monitor on frontend if enabled
     */
    public function maybe_disable_qm() {
        $fully_disable = get_option('qm_fully_disable', false);
    
        if ($this->is_enabled() && ($fully_disable || !is_admin())) {
            define('QM_DISABLED', true);
        }
    }

    /**
     * Checks if QM is currently disabled on frontend
     * 
     * @return bool True if QM is disabled on frontend
     */
    public function is_enabled() {
        $opt = get_option($this->option_name, 'on');
        return $opt === 'on';
    }

    /**
     * Gets the current button color based on state
     * 
     * @return string Hex color code
     */
    private function get_color() {
        return $this->is_enabled() ? '#23282d' : '#3B88C3';
    }

    /**
     * Gets the current button tooltip text based on state
     * 
     * @return string Translated tooltip text
     */
    private function get_text() {
        return $this->is_enabled() 
            ? QMDT_Translate::__('QM disabled on the frontend')
            : QMDT_Translate::__('QM enabled on the frontend');
    }

    /**
     * Adds the toggle button to admin bar
     * 
     * @param WP_Admin_Bar $wp_admin_bar The admin bar object
     */
    public function add_admin_bar_button($wp_admin_bar) {
        if (!current_user_can('manage_options')) {
            return;
        }

        $wp_admin_bar->add_node([
            'id'    => 'qm-disabler-toggle',
            'title' => $this->get_svg($this->get_color()),
            'href'  => '#',
            'meta'  => [
                'title' => $this->get_text(),
                'class' => 'qm-disabler-toggle',
            ],
        ]);
    }

    /**
     * Handles the AJAX toggle request
     */
    public function toggle_qm_disabler() {
        check_ajax_referer('qm_disabler_nonce', 'nonce');
        
        if (!current_user_can('manage_options')) {
            wp_send_json_error(QMDT_Translate::__('Unauthorized'), 403);
        }

        $new_state = $this->is_enabled() ? 'off' : 'on';
        update_option($this->option_name, $new_state);

        wp_send_json_success([
            'new_text'  => $this->get_text(),
            'new_state' => ($new_state === 'on'),
            'new_color' => $this->get_color()
        ]);
    }

    /**
     * Adds plugin action links
     */
    public function plugin_action_links($actions, $plugin_file, $plugin_data, $context) {
        if (strpos(__FILE__, $plugin_file) !== false) {
            $is_fully_disabled = get_option('qm_fully_disable', false);
            $checked = $is_fully_disabled ? 'checked="checked"' : '';
            
            $actions[] = sprintf(
                '<label class="qm-toggle-admin"><input type="checkbox" %s data-nonce="%s" /> %s</label>',
                $checked,
                esc_attr(wp_create_nonce('qm_toggle_admin_nonce')),
                esc_html__(QMDT_Translate::__('Also disable in admin area'))
            );
        }
        return $actions;
    }

    /**
     * Prints the jQuery to handle the admin option toggle
     */
    public function toggle_admin_option() {
        if (!current_user_can('manage_options')) {
            return;
        }
        ?>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $('.qm-toggle-admin input').on('change', function() {
                    var $checkbox = $(this);
                    var isChecked = $checkbox.is(':checked');
                    
                    $.ajax({
                        url: ajaxurl,
                        type: 'POST',
                        data: {
                            action: 'toggle_qm_admin_option',
                            enable: isChecked ? 1 : 0,
                            nonce: $checkbox.data('nonce')
                        },
                        beforeSend: function() {
                            $checkbox.prop('disabled', true);
                        },
                        success: function(response) {
                            if (!response.success) {
                                $checkbox.prop('checked', !isChecked);
                                alert(response.data);
                            }
                        },
                        error: function(xhr, status, error) {
                            $checkbox.prop('checked', !isChecked);
                            alert('Error: ' + error);
                        },
                        complete: function() {
                            $checkbox.prop('disabled', false);
                        }
                    });
                });
            });
        </script>
        <style>
        .qm-toggle-admin {
            display: inline-block;
            line-height: 28px;
        }
        .qm-toggle-admin input {
            margin: 0 5px 0 0;
            vertical-align: middle;
        }
        label.qm-toggle-admin {
            color: #343434;
        }
        </style>
        <?php
    }

    /**
     * AJAX handler for toggling admin option
     */
    public function toggle_admin_option_ajax() {
        check_ajax_referer('qm_toggle_admin_nonce', 'nonce');
        
        if (!current_user_can('manage_options')) {
            wp_send_json_error(QMDT_Translate::__('Unauthorized'), 403);
        }

        $enable = isset($_POST['enable']) && $_POST['enable'];
        update_option('qm_fully_disable', (bool)$enable);
        
        wp_send_json_success();
    }

    public function add_ajax_url() {
        printf(
            '<script type="text/javascript">var ajaxurl = "%s";</script>',
            admin_url('admin-ajax.php')
        );
    }

    /**
     * Enqueue dependency
     */
    public function add_jquery() {
        if (!is_admin_bar_showing() || !current_user_can('manage_options')) {
            return;
        }
        wp_enqueue_script('jquery');
    }

    /**
     * Outputs the required JavaScript and CSS
     */
    public function add_ajax_script() {
        if (!is_admin_bar_showing() || !current_user_can('manage_options')) {
            return;
        }
        $nonce = wp_create_nonce('qm_disabler_nonce');
        ?>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $(document).on('click', '.qm-disabler-toggle', function(e) {
                    e.preventDefault();
                    
                    var $button = $(this).closest('li');
                    var $svg = $button.find('svg');
                    
                    $.ajax({
                        url: ajaxurl,
                        type: 'POST',
                        data: {
                            action: 'toggle_qm_disabler',
                            nonce: '<?php echo esc_js($nonce); ?>'
                        },
                        beforeSend: function() {
                            $button.addClass('disabled');
                        },
                        success: function(response) {
                            if (response.success) {
                                $svg.find('path').first().attr('fill', response.data.new_color);
                                $button.find('.ab-item').attr('title', response.data.new_text);
                            } else {
                                alert('Error: ' + response.data);
                            }
                        },
                        error: function(xhr, status, error) {
                            alert('Error: ' + error);
                        },
                        complete: function() {
                            $button.removeClass('disabled');
                        }
                    });
                });
            });
        </script>
        <style>
            #wpadminbar .disabled .ab-item {
                opacity: 0.5;
                pointer-events: none;
            }
            #wpadminbar #wp-admin-bar-qm-disabler-toggle .ab-item {
                padding: 0 5px;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 28px;
                height: 32px;
            }
            #wpadminbar #wp-admin-bar-qm-disabler-toggle .ab-item svg {
                width: 20px;
                height: 20px;
            }
            #wpadminbar #wp-admin-bar-qm-disabler-toggle .ab-item:hover svg path:first-child {
                opacity: 0.8;
            }
        </style>
        <?php
    }

    /**
     * Generates the SVG icon with specified color
     * 
     * @param string $color Hex color code for the icon
     * @return string SVG markup
     */
    private function get_svg($color) {
        $svg = '<svg width="20" height="20" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" preserveAspectRatio="xMidYMid meet">';
        $svg .= '<path fill="' . esc_attr($color) . '" d="M36 32a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4v28z"></path>';
        $svg .= '<path fill="#FFF" d="M23.459 28.008c-1.519.868-3.348 1.364-5.457 1.364c-6.294 0-10.666-4.992-10.666-11.41c0-6.449 4.341-11.41 10.666-11.41c6.232 0 10.666 5.116 10.666 11.41c0 2.728-.713 5.209-2.078 7.162l1.768 1.52c.59.527 1.086 1.023 1.086 1.892c0 1.085-1.086 1.953-2.139 1.953c-.684 0-1.24-.279-2.078-.992l-1.768-1.489zm-.371-6.077c.526-1.179.744-2.542.744-3.969c0-3.689-1.954-7.131-5.83-7.131c-3.876 0-5.829 3.379-5.829 7.131c0 3.782 1.891 7.132 5.829 7.132c.713 0 1.365-.094 1.984-.218l-1.116-1.085c-.341-.311-.589-.807-.589-1.24c0-1.209.838-2.232 2.108-2.232c.435 0 .806.155 1.179.403l1.52 1.209z"></path>';
        $svg .= '</svg>';
        return $svg;
    }
}

// Initialize the plugin or write warnings about QM not active
if(class_exists('QM_Activation') ) {
    QM_Disabler_Toggle::get_instance();
} else {
    $multisite = is_multisite() ? 'network_' : '';
    add_action("{$multisite}admin_notices", function() {
        $mustuse = isset($_GET['plugin_status']) && 'mustuse' === $_GET['plugin_status'];
        if (in_array(get_current_screen()->id, ['plugins','plugins-network']) && $mustuse) {
            printf(
                '<div class="notice notice-error"><p>%s</p></div>',
                QMDT_Translate::__('QM Disabler Toggle does not run if Query Monitor is inactive or not installed.')
            );
        }
    });
    $action_link = is_multisite() ? 'network_admin_' : '';
    add_filter( "{$action_link}plugin_action_links_query-monitor-toggle.php", function($actions){
        $actions[] = sprintf(
            '<span style="color:red">*** </span><span style="color:#343434">%s</span>',
            QMDT_Translate::__('QUERY MONITOR IS DISABLED OR NOT INSTALLED')
        );
        return $actions;
    }, 20);
}