From dabc9a3eee6014c70c5dcc718a70e43fc41e7714 Mon Sep 17 00:00:00 2001
From: Marcus Quinn <marcus@agentdesign.co.uk>
Date: Mon, 17 Mar 2025 01:02:01 +0000
Subject: [PATCH] Fix theme installation and activation buttons by using proper
 WordPress URLs and event handlers

---
 admin/js/wp-allstars-admin.js  | 67 ++++++++++++++++++----------------
 admin/partials/theme-panel.php | 32 ++++++++++------
 2 files changed, 56 insertions(+), 43 deletions(-)

diff --git a/admin/js/wp-allstars-admin.js b/admin/js/wp-allstars-admin.js
index ab7c146..0620dc2 100644
--- a/admin/js/wp-allstars-admin.js
+++ b/admin/js/wp-allstars-admin.js
@@ -306,24 +306,34 @@ jQuery(document).ready(function($) {
             e.preventDefault();
             var $button = $(this);
             var slug = $button.data('slug');
-            var $themeCard = $button.closest('.theme-card');
+            var themeName = $button.data('name') || slug;
             
             console.log('Installing theme:', slug);
             $button.addClass('updating-message').text('Installing...');
             
+            // Use the WordPress core update API
             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();
-                        var activateButton = $('<button type="button" class="button button-primary activate-now">Activate</button>');
-                        activateButton.attr('data-slug', slug);
-                        activateButton.attr('data-nonce', wpAllstars.nonce);
-                        $parent.prepend(activateButton);
+                        
+                        // Create a proper activation link
+                        var activateUrl = response.activateUrl || 
+                                         wp.updates.adminUrl + 'themes.php?action=activate&stylesheet=' + slug + 
+                                         '&_wpnonce=' + wp.updates.data.nonce;
+                        
+                        var $activateButton = $('<a class="button button-primary activate-now" href="' + activateUrl + '">Activate</a>');
+                        $activateButton.attr('data-slug', slug);
+                        $activateButton.attr('data-name', themeName);
+                        $activateButton.attr('data-nonce', wpAllstars.nonce);
+                        
+                        $parent.prepend($activateButton);
                         
                         // Re-initialize the event handlers
                         initThemeHandlers();
@@ -331,8 +341,8 @@ jQuery(document).ready(function($) {
                 },
                 error: function(response) {
                     console.error('Theme installation failed:', response);
-                    $button.removeClass('updating-message').text('Install Now');
-                    alert(response.errorMessage);
+                    $button.removeClass('updating-message').text('Install');
+                    alert(response.errorMessage || 'Failed to install theme. Please try again.');
                 }
             });
         });
@@ -341,38 +351,33 @@ jQuery(document).ready(function($) {
         $('.theme-actions .activate-now').on('click', function(e) {
             e.preventDefault();
             var $button = $(this);
+            var url = $button.attr('href');
             var slug = $button.data('slug');
-            var nonce = $button.data('nonce') || wpAllstars.nonce;
             
-            console.log('Activating theme:', slug, 'with nonce:', nonce);
+            console.log('Activating theme:', slug, 'with URL:', url);
             $button.addClass('updating-message').text('Activating...');
             
-            // Use AJAX to activate the theme
+            // Use standard link-based activation like plugins
             $.ajax({
-                url: ajaxurl,
-                type: 'POST',
-                data: {
-                    action: 'wp_allstars_activate_theme',
-                    theme: slug,
-                    _wpnonce: nonce
-                },
+                url: url,
+                type: 'GET',
+                dataType: 'html',
                 success: function(response) {
-                    console.log('Theme activation response:', response);
-                    if (response.success) {
-                        $button.removeClass('updating-message').addClass('updated-message').text('Activated!');
-                        setTimeout(function() {
-                            // Replace the button with an active button
-                            var $parent = $button.closest('.theme-actions');
-                            $button.remove();
-                            $parent.prepend('<button type="button" class="button button-disabled" disabled="disabled">Active</button>');
-                        }, 1000);
-                    } else {
-                        $button.removeClass('updating-message').text('Activate');
-                        alert(response.data || 'Failed to activate theme');
-                    }
+                    console.log('Theme activation successful');
+                    $button.removeClass('updating-message').addClass('updated-message').text('Activated!');
+                    
+                    setTimeout(function() {
+                        // Replace the button with an active button
+                        var $parent = $button.closest('.theme-actions');
+                        $button.remove();
+                        $parent.prepend('<button type="button" class="button button-disabled" disabled="disabled">Active</button>');
+                        
+                        // Optionally reload the page to show the active theme
+                        // window.location.reload();
+                    }, 1000);
                 },
                 error: function(jqXHR, textStatus, errorThrown) {
-                    console.error('Theme activation AJAX error:', textStatus, errorThrown, jqXHR.responseText);
+                    console.error('Theme activation error:', textStatus, errorThrown);
                     $button.removeClass('updating-message').text('Activate');
                     alert('Failed to activate theme. Please try again or activate from the Themes page.');
                 }
diff --git a/admin/partials/theme-panel.php b/admin/partials/theme-panel.php
index 919e0c3..78966a8 100644
--- a/admin/partials/theme-panel.php
+++ b/admin/partials/theme-panel.php
@@ -31,22 +31,30 @@ if (!defined('ABSPATH')) {
                     <?php esc_html_e('Active'); ?>
                 </button>
             <?php elseif ($installed_theme->exists()): ?>
-                <button type="button" class="button button-primary activate-now" 
-                    data-slug="kadence" 
-                    data-nonce="<?php echo esc_attr($nonce); ?>">
+                <a href="<?php echo esc_url(wp_nonce_url(admin_url('themes.php?action=activate&stylesheet=kadence'), 'switch-theme_kadence')); ?>" 
+                   class="button button-primary activate-now" 
+                   data-slug="kadence" 
+                   data-name="Kadence"
+                   data-nonce="<?php echo esc_attr($nonce); ?>">
                     <?php esc_html_e('Activate'); ?>
-                </button>
-                <script>
-                console.log('Theme activation button initialized with:', {
-                    slug: 'kadence',
-                    nonce: '<?php echo esc_js($nonce); ?>'
-                });
-                </script>
+                </a>
             <?php else: ?>
-                <button type="button" class="button button-primary install-now" data-slug="kadence">
+                <a href="#" 
+                   class="button button-primary install-now" 
+                   data-slug="kadence" 
+                   data-name="Kadence">
                     <?php esc_html_e('Install'); ?>
-                </button>
+                </a>
             <?php endif; ?>
+            <script>
+            jQuery(document).ready(function($) {
+                // Make sure theme handlers are initialized
+                if (typeof initThemeHandlers === 'function') {
+                    console.log('Initializing theme handlers from template');
+                    initThemeHandlers();
+                }
+            });
+            </script>
         <?php endif; ?>
         <a class="button button-secondary preview install-theme-preview" href="<?php echo esc_url($theme_data->preview_url); ?>" target="_blank">
             <?php esc_html_e('Preview'); ?>