[FIX] Resolve toggle switch functionality in UI enhancements

admin/css/wp-allstars-admin.css

@@ -109,25 +109,50 @@
     }
 }
 
-/* Base Toggle Switch Component */
+/* Setting notification */
+.wp-setting-notification {
+    display: inline-flex;
+    align-items: center;
+    margin-left: 10px;
+    background: #00a32a;
+    color: white;
+    padding: 3px 10px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 500;
+    animation: fadeIn 0.3s ease-in-out;
+    height: 20px;
+    box-sizing: border-box;
+    position: relative;
+    transform: translateY(-3px);
+    white-space: nowrap;
+    min-width: 60px;
+    justify-content: center;
+}
+
+.wp-setting-notification.error {
+    background: #d63638;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+/* Toggle Switch */
 .wp-toggle-switch {
     position: relative;
     display: inline-block;
-    width: 36px;
+    width: 40px;
     height: 20px;
-    flex-shrink: 0;
+    vertical-align: middle;
-    cursor: pointer;
+    margin-right: 8px;
-    pointer-events: all;
-    z-index: 2;
 }
 
 .wp-toggle-switch input {
     opacity: 0;
     width: 0;
     height: 0;
-    margin: 0;
-    padding: 0;
-    position: absolute;
 }
 
 .wp-toggle-slider {
@@ -139,7 +164,7 @@
     bottom: 0;
     background-color: #ccc;
     transition: .3s;
-    border-radius: 20px;
+    border-radius: 34px;
 }
 
 .wp-toggle-slider:before {
@@ -152,15 +177,55 @@
     background-color: white;
     transition: .3s;
     border-radius: 50%;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
 input:checked + .wp-toggle-slider {
     background-color: #2271b1;
 }
 
+input:focus + .wp-toggle-slider {
+    box-shadow: 0 0 1px #2271b1;
+}
+
 input:checked + .wp-toggle-slider:before {
-    transform: translateX(16px);
+    transform: translateX(20px);
+}
+
+/* Settings layout */
+.wp-setting-row {
+    background: #fff;
+    border: 1px solid #e5e5e5;
+    box-shadow: 0 1px 1px rgba(0,0,0,.04);
+    padding: 20px;
+    margin-bottom: 20px;
+    border-radius: 3px;
+}
+
+.wp-setting-header {
+    position: relative;
+}
+
+.wp-setting-main {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.wp-setting-left {
+    display: flex;
+    align-items: center;
+}
+
+.wp-setting-label {
+    font-weight: 600;
+    margin: 0;
+    font-size: 14px;
+}
+
+.wp-setting-description {
+    margin: 10px 0 0;
+    color: #666;
+    font-size: 13px;
 }
 
 /* Tab Content Area - GLOBAL SETTINGS - All tab spacing should inherit from here */
@@ -717,28 +782,6 @@ input:checked + .wp-toggle-slider:before {
     }
 }
 
-/* Settings Notification */
-.wp-setting-notification {
-    display: inline-flex;
-    align-items: center;
-    margin-left: 10px;
-    background: #00a32a;
-    color: white;
-    padding: 3px 10px;
-    border-radius: 12px;
-    font-size: 12px;
-    font-weight: 500;
-    animation: fadeIn 0.3s ease-in-out;
-    height: 20px;
-    box-sizing: border-box;
-    position: relative;
-    transform: translateY(-3px);
-}
-
-.wp-setting-notification.error {
-    background: #d63638;
-}
-
 /* Add space for notification to prevent layout shifts */
 .wp-setting-left label,
 .wp-allstars-toggle-left label,
@@ -758,11 +801,6 @@ input:checked + .wp-toggle-slider:before {
     line-height: 1.4;
 }
 
-@keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
-}
-
 .wpa-loading-overlay {
     position: absolute;
     top: 0;

admin/css/wp-allstars-ui-enhancements.css

@@ -198,6 +198,67 @@
 /* 
  * Enhanced Toggle Styles 
  */
+/* Base toggle styles that apply even without enhanced UI */
+.wp-toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 40px;
+    height: 20px;
+    vertical-align: middle;
+    margin-right: 8px;
+}
+
+.wp-toggle-switch input[type="checkbox"] {
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 2;
+    cursor: pointer;
+    margin: 0;
+    padding: 0;
+    top: 0;
+    left: 0;
+}
+
+.wp-toggle-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: .3s;
+    border-radius: 34px;
+    z-index: 1;
+}
+
+.wp-toggle-slider:before {
+    position: absolute;
+    content: "";
+    height: 16px;
+    width: 16px;
+    left: 2px;
+    bottom: 2px;
+    background-color: white;
+    transition: .3s;
+    border-radius: 50%;
+}
+
+input:checked + .wp-toggle-slider {
+    background-color: #2271b1;
+}
+
+input:focus + .wp-toggle-slider {
+    box-shadow: 0 0 1px #2271b1;
+}
+
+input:checked + .wp-toggle-slider:before {
+    transform: translateX(20px);
+}
+
+/* Enhanced UI specific toggle styles - only apply additional styling */
 .wp-allstars-enhanced-ui .wp-toggle-switch {
     width: 46px;
     height: 24px;
@@ -206,7 +267,6 @@
 .wp-allstars-enhanced-ui .wp-toggle-slider {
     border-radius: 24px;
     background-color: #ccc;
-    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
 }
 
 .wp-allstars-enhanced-ui .wp-toggle-slider:before {
@@ -215,7 +275,6 @@
     left: 3px;
     bottom: 3px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
 }
 
 .wp-allstars-enhanced-ui input:checked + .wp-toggle-slider {

admin/includes/class-admin-manager.php

@@ -109,6 +109,7 @@ class WP_Allstars_Admin_Manager {
         $allowed_options = array(
             'wp_allstars_simple_setting',
             'wp_allstars_auto_upload_images',
+            'wp_allstars_admin_color_scheme',
             'wp_allstars_max_width',
             'wp_allstars_max_height',
             'wp_allstars_exclude_urls',

admin/includes/class-settings-manager.php

@@ -29,6 +29,7 @@ class WP_Allstars_Settings_Manager {
     public static function register_settings() {
         // General settings
         register_setting('wp_allstars_settings', 'wp_allstars_simple_setting');
+        register_setting('wp_allstars_settings', 'wp_allstars_admin_color_scheme');
         
         // Advanced settings
         register_setting('wp_allstars_settings', 'wp_allstars_auto_upload_images');
@@ -71,6 +72,31 @@ class WP_Allstars_Settings_Manager {
         ?>
         <div class="wp-allstars-settings-section">
             <div class="wp-allstars-settings-grid">
+                <!-- Admin Color Scheme Setting -->
+                <div class="wp-setting-row">
+                    <div class="wp-setting-header">
+                        <div class="wp-setting-main">
+                            <div class="wp-setting-left">
+                                <div class="wp-toggle-switch">
+                                    <input type="checkbox" 
+                                           id="wp_allstars_admin_color_scheme"
+                                           name="wp_allstars_admin_color_scheme" 
+                                           value="1"
+                                           <?php checked(get_option('wp_allstars_admin_color_scheme', false)); ?> 
+                                    />
+                                    <span class="wp-toggle-slider"></span>
+                                </div>
+                                <label for="wp_allstars_admin_color_scheme" class="wp-setting-label">
+                                    <?php esc_html_e('Modern Admin Colors', 'wp-allstars'); ?>
+                                </label>
+                            </div>
+                        </div>
+                        <p class="wp-setting-description">
+                            <?php esc_html_e('Switch to the Modern Admin colors, to remind that you\'re using WP Allstars.', 'wp-allstars'); ?>
+                        </p>
+                    </div>
+                </div>
+                
                 <!-- Example of a simple toggle setting (no panel) -->
                 <div class="wp-setting-row">
                     <div class="wp-setting-header">
@@ -158,6 +184,7 @@ class WP_Allstars_Settings_Manager {
         
         // Save general settings
         update_option('wp_allstars_simple_setting', isset($_POST['wp_allstars_simple_setting']) ? 1 : 0);
+        update_option('wp_allstars_admin_color_scheme', isset($_POST['wp_allstars_admin_color_scheme']) ? 1 : 0);
         
         // Save advanced settings
         update_option('wp_allstars_auto_upload_images', isset($_POST['wp_allstars_auto_upload_images']) ? 1 : 0);

admin/js/wp-allstars-admin-colors.js

@@ -0,0 +1,74 @@
+/**
+ * WP Allstars Admin Colors Script
+ *
+ * Handles toggling the admin color scheme
+ */
+(function($) {
+    'use strict';
+
+    // Once the DOM is ready
+    $(document).ready(function() {
+        // Find the color scheme toggle
+        var $toggle = $('#wp_allstars_admin_color_scheme');
+        
+        if (!$toggle.length) {
+            return;
+        }
+        
+        // Listen for changes to the toggle
+        $toggle.on('change', function() {
+            var $this = $(this);
+            var enabled = $this.is(':checked');
+            var $notification = $this.closest('label').find('.wp-setting-notification');
+            
+            // Show loading notification
+            if ($notification.length) {
+                $notification.text('Saving...').show();
+            } else {
+                $notification = $('<span class="wp-setting-notification">Saving...</span>');
+                $this.closest('label').append($notification);
+            }
+            
+            // Send AJAX request
+            $.ajax({
+                url: wpAllstarsColors.ajax_url,
+                type: 'POST',
+                data: {
+                    action: 'wp_allstars_update_color_scheme',
+                    nonce: wpAllstarsColors.nonce,
+                    enabled: enabled ? 1 : 0
+                },
+                success: function(response) {
+                    if (response.success) {
+                        // Show success notification
+                        $notification.text('Saved!').removeClass('error');
+                        
+                        // Reload page after a short delay to apply new color scheme
+                        setTimeout(function() {
+                            window.location.reload();
+                        }, 1000);
+                    } else {
+                        // Show error notification
+                        $notification.text('Error').addClass('error');
+                        
+                        // Revert toggle
+                        $this.prop('checked', !enabled);
+                        
+                        // Log error
+                        console.error('Error updating color scheme:', response.data);
+                    }
+                },
+                error: function(xhr, status, error) {
+                    // Show error notification
+                    $notification.text('Error').addClass('error');
+                    
+                    // Revert toggle
+                    $this.prop('checked', !enabled);
+                    
+                    // Log error
+                    console.error('AJAX error:', error);
+                }
+            });
+        });
+    });
+})(jQuery); 

admin/js/wp-allstars-admin.js

@@ -1,387 +1,72 @@
-// Define loadTheme in the global scope so it can be called from inline scripts
+/**
-var loadTheme;
+ * WP Allstars Admin Script
+ *
+ * Handles UI interactions in the admin settings
+ */
+(function($) {
+    'use strict';
 
-jQuery(document).ready(function($) {
+    // Document ready handler
-    // Function to show notification
+    $(document).ready(function() {
-    function showNotification(message, $element, isError = false) {
+        // Handle toggle switches
-        // Remove any existing notifications
+        $('.wp-toggle-switch input[type="checkbox"]').on('change', function() {
-        $('.wp-setting-notification').remove();
+            var $this = $(this);
+            var option = $this.attr('id');
+            var value = $this.is(':checked') ? 1 : 0;
             
-        // Create notification element
+            // Don't handle the admin color scheme toggle here - it has its own handler
-        var $notification = $('<span class="wp-setting-notification' + (isError ? ' error' : '') + '">' + message + '</span>');
+            if (option === 'wp_allstars_admin_color_scheme') {
+                return;
+            }
             
-        // If element is provided, show notification next to it
+            // Show update notification
-        if ($element && $element.length) {
+            var $notification = $this.closest('label').find('.wp-setting-notification');
-            $element.after($notification);
+            if ($notification.length === 0) {
+                $notification = $('<span class="wp-setting-notification">Saving...</span>');
+                $this.closest('label').append($notification);
             } else {
-            // Fallback to header if no element provided
+                $notification.text('Saving...').removeClass('error').show();
-            $('.wp-allstars-header h1').after($notification);
             }
             
-        // Fade out after delay
+            // Save the option via AJAX
-        setTimeout(function() {
+            $.ajax({
-            $notification.fadeOut(300, function() {
+                url: wpAllstars.ajaxurl,
-                $(this).remove();
-            });
-
-        }, 2000);
-    }
-
-    // Handle option updates
-    function updateOption(option, value) {
-        return $.ajax({
-            url: ajaxurl,
                 type: 'POST',
                 data: {
                     action: 'wp_allstars_update_option',
+                    nonce: wpAllstars.nonce,
                     option: option,
-                value: value,
+                    value: value
-                nonce: wpAllstars.nonce
+                },
+                success: function(response) {
+                    if (response.success) {
+                        $notification.text('Saved!');
+                        setTimeout(function() {
+                            $notification.fadeOut(300);
+                        }, 2000);
+                    } else {
+                        $notification.text('Error').addClass('error');
+                        console.error('Error saving option:', response.data);
                     }
-        }).then(function(response) {
+                },
-            if (!response.success) {
+                error: function(xhr, status, error) {
-                throw new Error(response.data || 'Error saving setting');
+                    $notification.text('Error').addClass('error');
+                    console.error('AJAX error:', error);
                 }
-            return response;
             });
-
-    }
-
-    // Handle toggle switch clicks
-    $('.wp-toggle-switch').on('click', function(e) {
-        e.stopPropagation();
-        var $checkbox = $(this).find('input[type="checkbox"]');
-        var isChecked = $checkbox.is(':checked');
-        $checkbox.prop('checked', !isChecked).trigger('change');
         });
         
-
-    // Prevent label clicks from toggling the checkbox directly
-    $('.wp-setting-label, .wp-allstars-toggle-left label').on('click', function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-    });
-
-
-    // Handle checkbox changes
-    $('.wp-toggle-switch input[type="checkbox"]').on('change', function(e) {
-        e.stopPropagation();
-        var $input = $(this);
-        var option = $input.attr('name');
-        var value = $input.is(':checked') ? 1 : 0;
-        var $label = $input.closest('.wp-setting-left, .wp-allstars-toggle-left').find('label');
-        
-        updateOption(option, value)
-            .then(function() {
-                showNotification('Saved', $label);
-            })
-            .catch(function() {
-                showNotification('Error saving settings', $label, true);
-            });
-
-    });
-
-
-    // Handle text input changes
-    $('.wp-allstars-setting-row input[type="text"], .wp-allstars-setting-row input[type="number"], .wp-allstars-setting-row textarea').on('blur change', function() {
-        var $input = $(this);
-        var option = $input.attr('name');
-        var value = $input.val();
-        var $label = $input.closest('.wp-allstars-setting-row').find('label').first();
-        
-        updateOption(option, value)
-            .then(function() {
-                showNotification('Saved', $label);
-            })
-            .catch(function(error) {
-                console.error('Error:', error);
-                showNotification('Error saving setting', $label, true);
-            });
-
-    });
-
-
         // Toggle expandable panels
-    $('.wp-allstars-toggle-header').on('click', function(e) {
+        $('.wp-allstars-toggle-header').on('click', function() {
-        if (!$(e.target).closest('.wp-toggle-switch').length && 
+            var $this = $(this);
-            !$(e.target).closest('label').length) {
+            var $settings = $this.next('.wp-allstars-toggle-settings');
-            var $settings = $(this).closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings');
+            var isExpanded = $this.attr('aria-expanded') === 'true';
-            var isExpanded = $(this).attr('aria-expanded') === 'true';
             
-            $(this).attr('aria-expanded', !isExpanded);
+            // Toggle aria-expanded attribute
+            $this.attr('aria-expanded', !isExpanded);
+            
+            // Toggle settings visibility
             $settings.slideToggle(200);
-        }
-    });
-
-
-    // Set initial panel states
-    $('.wp-allstars-toggle-header').each(function() {
-        var $settings = $(this).closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings');
-        var isExpanded = $(this).attr('aria-expanded') === 'true';
-        
-        if (!isExpanded) {
-            $settings.hide();
-        }
-    });
-
-
-    // Remove JavaScript-based tab switching - let the native WordPress tab links work
-    
-    // Plugin category filters
-    if ($('#wpa-plugin-filters').length) {
-        $('#wpa-plugin-filters a').on('click', function(e) {
-            e.preventDefault();
-            var category = $(this).data('category');
-            
-            // Update active filter
-            $('#wpa-plugin-filters a').removeClass('current');
-            $(this).addClass('current');
-            
-            // Load plugins for the selected category
-            loadPlugins(category);
-        });
-
-        
-        // Load initial plugins if we're on the recommended tab
-        if ($('#recommended').is(':visible') && $('#wpa-plugin-list').is(':empty')) {
-            loadPlugins('minimal');
-        }
-    }
-    
-    // Load theme tab content if we're on the theme tab
-    if ($('#theme').is(':visible') && $('#wpa-theme-list').length && $('#wpa-theme-list').is(':empty')) {
-        loadTheme();
-    }
-    
-    // Function to load plugins
-    function loadPlugins(category) {
-        var $container = $('#wpa-plugin-list');
-        var $loadingOverlay = $('<div class="wp-allstars-loading-overlay"><span class="spinner is-active"></span></div>');
-        
-        // Show loading overlay
-        $container.css('position', 'relative').append($loadingOverlay);
-        
-        // Clear existing plugins
-        $container.empty().append($loadingOverlay);
-        
-        // AJAX request to get plugins
-        $.ajax({
-            url: ajaxurl,
-            type: 'POST',
-            data: {
-                action: 'wp_allstars_get_plugins',
-                category: category,
-                _wpnonce: wpAllstars.nonce
-            },
-            success: function(response) {
-                // Remove loading overlay
-                $loadingOverlay.remove();
-                
-                if (response.success) {
-                    // Append plugins HTML
-                    $container.html(response.data);
-                    
-                    // Initialize plugin action buttons
-                    initPluginActions();
-                    
-                    // Individual plugin card spinners have been removed
-                } else {
-                    // Show error message
-                    $container.html('<div class="notice notice-error"><p>' + response.data + '</p></div>');
-                }
-            },
-            error: function(xhr, status, error) {
-                // Remove loading overlay
-                $loadingOverlay.remove();
-                
-                // Show error message
-                $container.html('<div class="notice notice-error"><p>Failed to load plugins. Please try again. Error: ' + error + '</p></div>');
-                console.error('AJAX Error:', xhr.responseText);
-            }
-        });
-
-    }
-    
-    // Theme handlers are initialized directly from the inline script
-    // We don't need a separate loadTheme function anymore
-    
-    // Initialize plugin action buttons
-    function initPluginActions() {
-        // Remove any existing event handlers to prevent duplicates
-        $('.plugin-card .install-now').off('click');
-        $('.plugin-card .update-now').off('click');
-        $('.plugin-card .activate-now').off('click');
-        
-        // Install plugin
-        $('.plugin-card .install-now').on('click', function(e) {
-            e.preventDefault();
-            var $button = $(this);
-            var slug = $button.data('slug');
-            
-            $button.addClass('updating-message').text('Installing...');
-            
-            wp.updates.installPlugin({
-                slug: slug,
-                success: function(response) {
-                    $button.removeClass('updating-message').addClass('updated-message').text('Installed!');
-                    setTimeout(function() {
-                        // Replace the button with an activate button
-                        var $parent = $button.parent();
-                        $button.remove();
-                        $parent.html('<a class="button activate-now" href="' + response.activateUrl + '" data-slug="' + slug + '" aria-label="Activate ' + slug + '">Activate</a>');
-                        
-                        // Re-initialize the event handlers
-                        initPluginActions();
-                    }, 1000);
-                },
-                error: function(response) {
-                    $button.removeClass('updating-message').text('Install Now');
-                    alert(response.errorMessage);
-                }
         });
     });
-        
+})(jQuery);
-        // Update plugin
-        $('.plugin-card .update-now').on('click', function(e) {
-            e.preventDefault();
-            var $button = $(this);
-            var slug = $button.data('slug');
-            
-            $button.addClass('updating-message').text('Updating...');
-            
-            wp.updates.updatePlugin({
-                slug: slug,
-                success: function() {
-                    $button.removeClass('updating-message').addClass('updated-message').text('Updated!');
-                    setTimeout(function() {
-                        $button.removeClass('update-now updated-message')
-                               .addClass('button-disabled')
-                               .text('Active');
-                    }, 1000);
-                },
-                error: function(response) {
-                    $button.removeClass('updating-message').text('Update Now');
-                    alert(response.errorMessage);
-                }
-            });
-        });
-        
-        // Activate plugin
-        $('.plugin-card .activate-now').on('click', function(e) {
-            e.preventDefault();
-            var $button = $(this);
-            var url = $button.attr('href');
-            var slug = $button.data('slug');
-            
-            $button.addClass('updating-message').text('Activating...');
-            
-            $.ajax({
-                url: url,
-                dataType: 'html',
-                success: function() {
-                    $button.removeClass('updating-message').addClass('updated-message').text('Activated!');
-                    setTimeout(function() {
-                        // Replace the button with an active button
-                        var $parent = $button.parent();
-                        $button.remove();
-                        $parent.html('<button type="button" class="button button-disabled" disabled="disabled">Active</button>');
-                    }, 1000);
-                },
-                error: function() {
-                    $button.removeClass('updating-message').text('Activate');
-                    alert('Failed to activate plugin. Please try again or activate from the Plugins page.');
-                }
-            });
-        });
-    }
-    
-    // Expose initPluginActions to global scope for use in other scripts
-    window.initPluginActions = initPluginActions;
-
-    // Initialize theme handlers
-    function initThemeHandlers() {
-        console.log('Initializing theme handlers');
-        // Remove any existing event handlers to prevent duplicates
-        $('.theme-actions .install-now').off('click');
-        $('.theme-actions .activate-now').off('click');
-        
-        // Install theme - use wp.updates.installTheme AJAX method
-        $('.theme-actions .install-now').on('click', function(e) {
-            e.preventDefault();
-            var $button = $(this);
-            var slug = $button.data('slug');
-            var buttonText = $button.text();
-            
-            $button.addClass('updating-message').attr('aria-label', wp.updates.l10n.installing);
-            
-            wp.updates.installTheme({
-                slug: slug,
-                success: function(response) {
-                    $button.removeClass('updating-message').addClass('updated-message').attr('aria-label', wp.updates.l10n.installed);
-                    setTimeout(function() {
-                        // Replace the button with an activate button
-                        var $parent = $button.parent();
-                        $button.remove();
-                        
-                        // Create activate URL with nonce
-                        var activateUrl = ajaxurl + '?action=wp_allstars_activate_theme&theme=' + slug + '&_wpnonce=' + wpAllstars.nonce;
-                        
-                        $parent.prepend('<a href="' + activateUrl + '" class="button button-primary activate-now" data-slug="' + slug + '" data-name="Kadence" data-nonce="' + wpAllstars.nonce + '">Activate</a>');
-                        
-                        // Re-initialize the event handlers
-                        initThemeHandlers();
-                    }, 1000);
-                },
-                error: function(response) {
-                    $button.removeClass('updating-message').text(buttonText);
-                    alert(response.errorMessage || 'Error installing theme');
-                }
-            });
-        });
-
-        // Activate theme - use AJAX
-        $('.theme-actions .activate-now').on('click', function(e) {
-            e.preventDefault();
-            var $button = $(this);
-            var slug = $button.data('slug');
-            var nonce = $button.data('nonce');
-            var buttonText = $button.text();
-            
-            $button.addClass('updating-message').attr('aria-label', 'Activating...');
-            
-            $.ajax({
-                url: ajaxurl,
-                type: 'POST',
-                data: {
-                    action: 'wp_allstars_activate_theme',
-                    theme: slug,
-                    _wpnonce: wpAllstars.nonce
-                },
-                success: function(response) {
-                    if (response.success) {
-                        $button.removeClass('updating-message').addClass('updated-message').attr('aria-label', 'Activated');
-                        setTimeout(function() {
-                            // Replace the button with an active button
-                            var $parent = $button.parent();
-                            $button.remove();
-                            $parent.prepend('<button type="button" class="button button-disabled" disabled="disabled">Active</button>');
-                            
-                            // Optionally reload the page to show the activated theme
-                            // window.location.reload();
-                        }, 1000);
-                    } else {
-                        $button.removeClass('updating-message').text(buttonText);
-                        alert(response.data || 'Error activating theme');
-                    }
-                },
-                error: function(xhr, status, error) {
-                    $button.removeClass('updating-message').text(buttonText);
-                    alert('Failed to activate theme. Please try again or activate from the Themes page. Error: ' + error);
-                }
-            });
-        });
-    }
-    
-    // Expose initThemeHandlers to global scope for use in other scripts
-    window.initThemeHandlers = initThemeHandlers;
-});

debug.php

@@ -0,0 +1,34 @@
+<?php
+// Debug file to identify WordPress plugin errors
+error_reporting(E_ALL);
+ini_set('display_errors', 1);
+
+echo "Starting debug process<br>";
+
+// First check free-plugins.php syntax
+$output = shell_exec('php -l admin/data/free-plugins.php');
+echo "Syntax check for free-plugins.php: " . $output . "<br>";
+
+// Then check class-free-plugins-manager.php syntax
+$output = shell_exec('php -l admin/includes/class-free-plugins-manager.php');
+echo "Syntax check for class-free-plugins-manager.php: " . $output . "<br>";
+
+// Try including the files
+echo "Attempting to include free-plugins.php<br>";
+include_once 'admin/data/free-plugins.php';
+echo "Successfully included free-plugins.php<br>";
+
+echo "Attempting to include class-free-plugins-manager.php<br>";
+include_once 'admin/includes/class-free-plugins-manager.php';
+echo "Successfully included class-free-plugins-manager.php<br>";
+
+// Check the function output
+if (function_exists('wp_allstars_get_free_plugins')) {
+    $plugins = wp_allstars_get_free_plugins();
+    echo "Function wp_allstars_get_free_plugins() exists and returned:<br>";
+    echo "<pre>";
+    print_r($plugins);
+    echo "</pre>";
+} else {
+    echo "Function wp_allstars_get_free_plugins() is not defined<br>";
+} 

debug2.php

@@ -0,0 +1,30 @@
+<?php
+// Debug file to read and analyze class-free-plugins-manager.php
+error_reporting(E_ALL);
+ini_set('display_errors', 1);
+
+echo "Reading class-free-plugins-manager.php content:<br>";
+$content = file_get_contents('admin/includes/class-free-plugins-manager.php');
+if ($content === false) {
+    echo "Failed to read file<br>";
+} else {
+    // Count how many times 'multisite' appears in the file
+    $multisite_count = substr_count($content, 'multisite');
+    echo "Found 'multisite' {$multisite_count} times in the file<br>";
+    
+    // Line-by-line analysis to find issues around the multisite references
+    $lines = explode("\n", $content);
+    
+    for ($i = 0; $i < count($lines); $i++) {
+        if (strpos($lines[$i], 'multisite') !== false) {
+            echo "Line " . ($i+1) . ": " . htmlspecialchars($lines[$i]) . "<br>";
+            // Check a few lines before and after for context
+            for ($j = max(0, $i-3); $j <= min(count($lines)-1, $i+3); $j++) {
+                if ($j != $i) {
+                    echo "Context Line " . ($j+1) . ": " . htmlspecialchars($lines[$j]) . "<br>";
+                }
+            }
+            echo "<br>";
+        }
+    }
+} 

includes/class-wp-allstars-admin-colors.php

@@ -0,0 +1,169 @@
+<?php
+/**
+ * WP ALLSTARS Admin Colors Feature
+ *
+ * Handles setting the admin color scheme based on user preferences
+ *
+ * @package WP_ALLSTARS
+ * @since 0.2.3.1
+ */
+
+if (!defined('ABSPATH')) {
+    exit; // Exit if accessed directly
+}
+
+/**
+ * Admin Colors Handler Class
+ */
+class WP_Allstars_Admin_Colors {
+    
+    /**
+     * Option name for the admin color scheme setting
+     *
+     * @var string
+     */
+    private $option_name = 'wp_allstars_admin_color_scheme';
+    
+    /**
+     * Modern color scheme key
+     *
+     * @var string
+     */
+    private $modern_scheme = 'modern';
+    
+    /**
+     * Default color scheme key
+     *
+     * @var string
+     */
+    private $default_scheme = 'fresh';
+    
+    /**
+     * Initialize the class and set up hooks
+     */
+    public function __construct() {
+        // Set up hooks
+        add_action('admin_init', array($this, 'set_admin_color_scheme'));
+        add_action('wp_ajax_wp_allstars_update_color_scheme', array($this, 'handle_color_scheme_update'));
+        
+        // Add script to handle the toggle
+        add_action('admin_enqueue_scripts', array($this, 'enqueue_color_scripts'));
+    }
+    
+    /**
+     * Enqueue scripts and styles for the color scheme toggle
+     */
+    public function enqueue_color_scripts() {
+        // Only enqueue on our plugin pages
+        $screen = get_current_screen();
+        if (!isset($screen->id) || strpos($screen->id, 'wp-allstars') === false) {
+            return;
+        }
+        
+        wp_enqueue_script(
+            'wp-allstars-color-toggle',
+            plugin_dir_url(dirname(__FILE__)) . 'admin/js/wp-allstars-admin-colors.js',
+            array('jquery'),
+            WP_ALLSTARS_VERSION,
+            true
+        );
+        
+        wp_localize_script('wp-allstars-color-toggle', 'wpAllstarsColors', array(
+            'ajax_url' => admin_url('admin-ajax.php'),
+            'nonce' => wp_create_nonce('wp_allstars_color_nonce'),
+            'option_name' => $this->option_name,
+        ));
+    }
+    
+    /**
+     * Set the admin color scheme based on user preference
+     */
+    public function set_admin_color_scheme() {
+        // Only apply for administrators
+        if (!current_user_can('manage_options')) {
+            return;
+        }
+        
+        // Get current user
+        $user_id = get_current_user_id();
+        if (!$user_id) {
+            return;
+        }
+        
+        // Check if our option is enabled
+        $enable_modern = get_option($this->option_name, false);
+        
+        // Set the appropriate color scheme
+        if ($enable_modern) {
+            // Use modern scheme if available, otherwise use default
+            $this->set_user_color_scheme($user_id, $this->modern_scheme);
+        }
+    }
+    
+    /**
+     * Set a user's color scheme
+     *
+     * @param int $user_id The user ID
+     * @param string $scheme The color scheme to set
+     */
+    private function set_user_color_scheme($user_id, $scheme) {
+        // Check if the scheme exists
+        global $_wp_admin_css_colors;
+        
+        // If the scheme doesn't exist, use the default
+        if (!isset($_wp_admin_css_colors[$scheme])) {
+            $scheme = $this->default_scheme;
+        }
+        
+        // Update the user's color scheme
+        update_user_meta($user_id, 'admin_color', $scheme);
+    }
+    
+    /**
+     * Handle AJAX request to update color scheme
+     */
+    public function handle_color_scheme_update() {
+        // Verify nonce
+        if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'wp_allstars_color_nonce')) {
+            wp_send_json_error('Invalid nonce');
+        }
+        
+        // Verify user can manage options
+        if (!current_user_can('manage_options')) {
+            wp_send_json_error('Insufficient permissions');
+        }
+        
+        // Get the new value
+        $enabled = isset($_POST['enabled']) ? (bool) $_POST['enabled'] : false;
+        
+        // Update the option
+        update_option($this->option_name, $enabled);
+        
+        // Get current user
+        $user_id = get_current_user_id();
+        
+        // Set the color scheme
+        if ($enabled) {
+            $this->set_user_color_scheme($user_id, $this->modern_scheme);
+            $message = 'Modern admin colors enabled';
+        } else {
+            $this->set_user_color_scheme($user_id, $this->default_scheme);
+            $message = 'Default admin colors restored';
+        }
+        
+        // Send success response
+        wp_send_json_success(array(
+            'message' => $message,
+            'enabled' => $enabled,
+        ));
+    }
+    
+    /**
+     * Check if modern color scheme is enabled
+     *
+     * @return bool Whether modern color scheme is enabled
+     */
+    public function is_modern_color_scheme_enabled() {
+        return (bool) get_option($this->option_name, false);
+    }
+} 

includes/class-wp-allstars-ui-enhancements.php

@@ -27,6 +27,9 @@ class WP_Allstars_UI_Enhancements {
         
         // Initialize UI components
         $this->init_components();
+        
+        // Ensure toggle functionality works
+        add_action('admin_footer', array($this, 'ensure_toggle_functionality'), 99);
     }
     
     /**
@@ -90,6 +93,157 @@ class WP_Allstars_UI_Enhancements {
         add_action('admin_footer', array($this, 'render_notification_template'));
     }
     
+    /**
+     * Ensure toggle switch functionality
+     * This adds JS to reinitialize toggle switch handlers after our enhanced UI is applied
+     */
+    public function ensure_toggle_functionality() {
+        // Only on WP Allstars pages
+        if (!isset($_GET['page']) || strpos($_GET['page'], 'wp-allstars') === false) {
+            return;
+        }
+        
+        // Get the nonce value
+        $nonce = wp_create_nonce('wp-allstars-nonce');
+        
+        ?>
+        <script type="text/javascript">
+        jQuery(document).ready(function($) {
+            // Make sure the wpAllstars object is available
+            if (typeof wpAllstars === 'undefined') {
+                window.wpAllstars = {
+                    ajaxurl: '<?php echo esc_url(admin_url('admin-ajax.php')); ?>',
+                    nonce: '<?php echo esc_js($nonce); ?>'
+                };
+            }
+            
+            // Remove any existing handlers first to prevent duplicates
+            $('.wp-toggle-switch input[type="checkbox"]').off('change');
+            $('.wp-allstars-toggle-header').off('click');
+            
+            // Re-bind toggle switch handlers
+            $('.wp-toggle-switch input[type="checkbox"]').on('change', function() {
+                console.log('Toggle switch changed:', this.id);
+                var $this = $(this);
+                var option = $this.attr('id');
+                var value = $this.is(':checked') ? 1 : 0;
+                
+                // Don't handle the admin color scheme toggle here - it has its own handler
+                if (option === 'wp_allstars_admin_color_scheme') {
+                    return;
+                }
+                
+                // Show update notification
+                var $notification = $this.closest('.wp-setting-left').find('.wp-setting-notification');
+                if ($notification.length === 0) {
+                    $notification = $('<span class="wp-setting-notification">Saving...</span>');
+                    $this.closest('.wp-setting-left').append($notification);
+                } else {
+                    $notification.text('Saving...').removeClass('error').show();
+                }
+                
+                // Save the option via AJAX
+                $.ajax({
+                    url: wpAllstars.ajaxurl,
+                    type: 'POST',
+                    data: {
+                        action: 'wp_allstars_update_option',
+                        nonce: wpAllstars.nonce,
+                        option: option,
+                        value: value
+                    },
+                    success: function(response) {
+                        if (response.success) {
+                            $notification.text('Saved!');
+                            setTimeout(function() {
+                                $notification.fadeOut(300);
+                            }, 2000);
+                        } else {
+                            $notification.text('Error').addClass('error');
+                            console.error('Error saving option:', response.data);
+                        }
+                    },
+                    error: function(xhr, status, error) {
+                        $notification.text('Error').addClass('error');
+                        console.error('AJAX error:', error);
+                    }
+                });
+            });
+            
+            // Re-bind expandable panels
+            $('.wp-allstars-toggle-header').on('click', function() {
+                var $this = $(this);
+                var $settings = $this.next('.wp-allstars-toggle-settings');
+                var isExpanded = $this.attr('aria-expanded') === 'true';
+                
+                // Toggle aria-expanded attribute
+                $this.attr('aria-expanded', !isExpanded);
+                
+                // Toggle settings visibility
+                $settings.slideToggle(200);
+            });
+            
+            // Special handling for admin color scheme toggle if exists
+            if (typeof wpAllstarsColors !== 'undefined') {
+                var $colorToggle = $('#wp_allstars_admin_color_scheme');
+                if ($colorToggle.length) {
+                    $colorToggle.off('change').on('change', function() {
+                        var isModern = $(this).is(':checked');
+                        
+                        // Show saving notification
+                        var $notification = $colorToggle.closest('.wp-setting-left').find('.wp-setting-notification');
+                        if ($notification.length === 0) {
+                            $notification = $('<span class="wp-setting-notification">Saving...</span>');
+                            $colorToggle.closest('.wp-setting-left').append($notification);
+                        } else {
+                            $notification.text('Saving...').removeClass('error').show();
+                        }
+                        
+                        // Save the option via AJAX
+                        $.ajax({
+                            url: wpAllstarsColors.ajaxurl,
+                            type: 'POST',
+                            data: {
+                                action: 'wp_allstars_update_color_scheme',
+                                nonce: wpAllstarsColors.nonce,
+                                is_modern: isModern ? 1 : 0
+                            },
+                            success: function(response) {
+                                if (response.success) {
+                                    if (isModern) {
+                                        $('body').addClass('wp-allstars-modern-admin');
+                                    } else {
+                                        $('body').removeClass('wp-allstars-modern-admin');
+                                    }
+                                    
+                                    $notification.text('Saved!');
+                                    setTimeout(function() {
+                                        $notification.fadeOut(300);
+                                    }, 2000);
+                                } else {
+                                    $notification.text('Error').addClass('error');
+                                    console.error('Error updating color scheme:', response.data);
+                                    
+                                    // Revert toggle
+                                    $colorToggle.prop('checked', !isModern);
+                                }
+                            },
+                            error: function(xhr, status, error) {
+                                $notification.text('Error').addClass('error');
+                                console.error('AJAX error:', error);
+                                
+                                // Revert toggle
+                                $colorToggle.prop('checked', !isModern);
+                            }
+                        });
+                    });
+                }
+            }
+        });
+        </script>
+        <?php
+    }
+    
     /**
      * Render accordion template
      */