From 1b47423a683ff0011137aae988b76b0c1ea45fd5 Mon Sep 17 00:00:00 2001
From: Marcus Quinn <marcus@agentdesign.co.uk>
Date: Mon, 17 Mar 2025 01:10:11 +0000
Subject: [PATCH] Fix theme installation and activation with AJAX-based
 approach

---
 admin/js/wp-allstars-admin.js  | 45 ++++++++++++++++++++++++++++++----
 admin/partials/theme-panel.php | 14 +++--------
 wp-allstars-plugin.php         |  1 +
 3 files changed, 45 insertions(+), 15 deletions(-)

diff --git a/admin/js/wp-allstars-admin.js b/admin/js/wp-allstars-admin.js
index a9ef4fc..ff5bd32 100644
--- a/admin/js/wp-allstars-admin.js
+++ b/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
-            // Just add the updating message
+            e.preventDefault();
             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
diff --git a/admin/partials/theme-panel.php b/admin/partials/theme-panel.php
index b4d03f3..acc63ca 100644
--- a/admin/partials/theme-panel.php
+++ b/admin/partials/theme-panel.php
@@ -39,19 +39,13 @@ if (!defined('ABSPATH')) {
                     <?php esc_html_e('Activate'); ?>
                 </a>
             <?php else: ?>
-                <?php 
-                // 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); ?>" 
+                <button type="button" 
                    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($) {
diff --git a/wp-allstars-plugin.php b/wp-allstars-plugin.php
index 8c8789b..d314e35 100644
--- a/wp-allstars-plugin.php
+++ b/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 );