Fix theme installation and activation with AJAX-based approach

admin/js/wp-allstars-admin.js

@@ -301,15 +301,50 @@ jQuery(document).ready(function($) {
         $('.theme-actions .install-now').off('click');
         $('.theme-actions .activate-now').off('click');
         
-        // Install theme - use standard WordPress behavior
+        // Install theme - use WordPress AJAX-based installation
         $('.theme-actions .install-now').on('click', function(e) {
-            // We're not preventing default here - let the standard WordPress installer handle it
+            e.preventDefault();
-            // Just add the updating message
             var $button = $(this);
             var slug = $button.data('slug');
+            var themeName = $button.data('name') || slug;
+            
+            console.log('Installing theme via AJAX:', slug);
             $button.addClass('updating-message').text('Installing...');
-            console.log('Installing theme using standard WordPress URL:', $button.attr('href'));
+            
-            // The rest will be handled by WordPress core
+            // Use the WordPress core updates API for AJAX installation
+            wp.updates.installTheme({
+                slug: slug,
+                success: function(response) {
+                    console.log('Theme installed successfully:', response);
+                    $button.removeClass('updating-message').addClass('updated-message').text('Installed!');
+                    
+                    setTimeout(function() {
+                        // Replace the button with an activate button
+                        var $parent = $button.closest('.theme-actions');
+                        $button.remove();
+                        
+                        // Create a proper activation link
+                        var activateUrl = response.activateUrl || 
+                                         'themes.php?action=activate&stylesheet=' + slug + 
+                                         '&_wpnonce=' + wp.updates.data.activateNonce;
+                        
+                        var adminUrl = wpAllstars.adminUrl || ajaxurl.replace('/admin-ajax.php', '/');
+                        var $activateButton = $('<a class="button button-primary activate-now" href="' + adminUrl + activateUrl + '">Activate</a>');
+                        $activateButton.attr('data-slug', slug);
+                        $activateButton.attr('data-name', themeName);
+                        
+                        $parent.prepend($activateButton);
+                        
+                        // Re-initialize the event handlers
+                        initThemeHandlers();
+                    }, 1000);
+                },
+                error: function(response) {
+                    console.error('Theme installation failed:', response);
+                    $button.removeClass('updating-message').text('Install');
+                    alert(response.errorMessage || 'Failed to install theme. Please try again.');
+                }
+            });
         });
 
         // Activate theme - use standard WordPress behavior

admin/partials/theme-panel.php

@@ -39,19 +39,13 @@ if (!defined('ABSPATH')) {
                     <?php esc_html_e('Activate'); ?>
                 </a>
             <?php else: ?>
-                <?php 
+                <button type="button" 
-                // Use the standard WordPress theme installation URL format
-                $install_url = wp_nonce_url(
-                    admin_url('update.php?action=install-theme&theme=kadence'),
-                    'install-theme_kadence'
-                );
-                ?>
-                <a href="<?php echo esc_url($install_url); ?>" 
                    class="button button-primary install-now" 
                    data-slug="kadence" 
-                   data-name="Kadence">
+                   data-name="Kadence"
+                   aria-label="<?php esc_attr_e('Install Kadence'); ?>">
                     <?php esc_html_e('Install'); ?>
-                </a>
+                </button>
             <?php endif; ?>
             <script>
             jQuery(document).ready(function($) {

wp-allstars-plugin.php

@@ -68,6 +68,7 @@ function wp_allstars_admin_assets() {
     // Localize script for AJAX
     $ajax_data = array(
         'ajaxurl' => admin_url( 'admin-ajax.php' ),
+        'adminUrl' => admin_url(),
         'nonce'   => wp_create_nonce( 'wp-allstars-nonce' )
     );
     wp_localize_script( 'wp-allstars-admin', 'wpAllstars', $ajax_data );