I have a form to set a CSS between 2 options, I add another php files for create a banner, when I click on the button switch I can change the css, the problem is that when WordPress option is selected in the form the button to switch works perfectly but when I select on the form Wooster it doesn’t work anymore :
<?php
/**
* Class used to manage the display of the content of the settings
*/
class WoosterPartnerSettings
{
/**
* Hook to display the contents of the 'Settings' menu if the license is valid
*/
public function __construct()
{
if (get_option('partner_license') && get_option('partner_license') != '') {
add_action('tab_content_settings', array($this, 'wooster_partner_settings'));
add_action('admin_init', array($this, 'display_style'));
add_action('admin_enqueue_scripts', array($this, 'enqueue_style'));
}
}
/**
* Allows you to display the form to choose the style sheet to display
*
* @return void
*/
public function wooster_partner_settings()
{
?>
<div class="wrap">
<h1><?php echo __('Réglages Wooster', 'wooster-partner'); ?></h1>
<hr class="line">
<form method="post" action="options.php">
<?php settings_fields('wooster-settings-group'); ?>
<?php do_settings_sections('wooster-settings-group'); ?>
<p class="parag"><?php echo __('Le plugin Compagnon propose deux styles d’affichage :', 'wooster-partner'); ?></p>
<label for="style_wordpress">
<input type="radio" id="style_wordpress" name="wooster_style" value="compagnon-wp.css" <?php checked(get_option('wooster_style'), 'compagnon-wp.css'); ?>>
<?php echo __('Style WordPress', 'wooster-partner'); ?>
</label>
<label for="style_wooster">
<input type="radio" id="style_wooster" name="wooster_style" value="compagnon-wooster.css" <?php checked(get_option('wooster_style'), 'compagnon-wooster.css'); ?>>
<?php echo __('Style Wooster', 'wooster-partner'); ?>
</label><br>
<input type="submit" class="wooster-button" value="<?php echo __('Enregistrer les modifications', 'wooster-partner') ?>">
</form>
</div>
<?php
}
/**
* Registers the setting for the Wooster plugin style
*
* @return void
*/
public function display_style()
{
register_setting('wooster-settings-group', 'wooster_style');
}
/**
* Enqueues the selected style for Wooster plugin settings page
*
* @return void
*/
public function enqueue_style()
{
if (is_admin()) {
if (isset($_GET['page']) && strpos($_GET['page'], 'wooster') === 0) {
$selected_style = get_option('wooster_style', 'compagnon-wp.css'); // default style
wp_enqueue_style('wooster-custom-style', plugins_url('wooster-partner/assets/css/' . $selected_style));
}
}
}
}
new WoosterPartnerSettings();
<?php
/**
* WoosterBanner class
* It creates a banner for the Wooster plugin
*
* @package Wooster
*/
class WoosterBanner
{
public function __construct()
{
if (isset($_GET['page']) && in_array($_GET['page'], ['wooster', 'wooster-followup', 'wooster-licences', 'wooster-compagnon', 'wooster-customers', 'wooster-partner', 'wooster-settings', 'wooster-setup']) && is_admin()) {
add_action('admin_enqueue_scripts', array($this, 'enqueue_styles'));
//add_action('wp_enqueue_scripts', array($this, 'enqueue_styles'));
add_action('in_admin_header', array($this, 'wooster_header_section'));
add_action('admin_footer', array($this, 'add_switch_style_button'));
}
add_action('wp_enqueue_scripts', array($this, 'enqueue_styles')); // for the front page
}
/**
* Adds the banner to the top of the Wooster plugin settings page
*
* @return void
*/
public function wooster_header_section()
{
?>
<div id="top-bar-banner">
<div class="wooster-banner">
<div class="logo">
<img src="<?php echo plugins_url('assets/img/logo.png', __DIR__); ?>" alt="Logo">
</div>
<div class="actions">
<div id="wooster-activity-panel" class="wooster-layout__activity-panel" aria-labelledby="activity-panel-header_73">
<div role="tablist" aria-orientation="horizontal" class="wooster-layout__activity-panel-tabs">
<button type="button" aria-selected="false" aria-controls="activity-panel-previewStore" id="switch-style" class="components-button wooster-layout__activity-panel-tab"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path d="M0 224c0 17.7 14.3 32 32 32s32-14.3 32-32c0-53 43-96 96-96H320v32c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-9.2-9.2-22.9-11.9-34.9-6.9S320 19.1 320 32V64H160C71.6 64 0 135.6 0 224zm512 64c0-17.7-14.3-32-32-32s-32 14.3-32 32c0 53-43 96-96 96H192V352c0-12.9-7.8-24.6-19.8-29.6s-25.7-2.2-34.9 6.9l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V448H352c88.4 0 160-71.6 160-160z" />
</svg>
</button>
<button type="button" aria-selected="false" aria-controls="activity-panel-previewStore" id="user-icon" class="components-button wooster-layout__activity-panel-tab"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path d="M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464H398.7c-8.9-63.3-63.3-112-129-112H178.3c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3z" />
</svg>
</button>
<button type="button" aria-selected="false" aria-controls="activity-panel-help" id="help-icon" class="components-button wooster-layout__activity-panel-tab"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
<path d="M12 4.75a7.25 7.25 0 100 14.5 7.25 7.25 0 000-14.5zM3.25 12a8.75 8.75 0 1117.5 0 8.75 8.75 0 01-17.5 0zM12 8.75a1.5 1.5 0 01.167 2.99c-.465.052-.917.44-.917 1.01V14h1.5v-.845A3 3 0 109 10.25h1.5a1.5 1.5 0 011.5-1.5zM11.25 15v1.5h1.5V15h-1.5z"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<?php
}
/**
* Registers the setting for the Wooster plugin style switch button
*
* @return void
*/
public function add_switch_style_button()
{
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
var toggleStyleBtn = document.getElementById('switch-style');
var currentStyle = localStorage.getItem('wooster_style') || '<?php echo get_option('wooster_style', 'compagnon-wp.css'); ?>';
//console.log('Style récupéré depuis localStorage :', currentStyle); // Instruction de débogage
toggleStyleBtn.addEventListener('click', function() {
currentStyle = currentStyle === 'compagnon-wp.css' ? 'compagnon-wooster.css' : 'compagnon-wp.css';
changeStyle(currentStyle);
});
function changeStyle(styleName) {
var styleElement = document.getElementById('wooster-custom-style');
if (!styleElement) {
styleElement = document.createElement('link');
styleElement.id = 'wooster-custom-style';
styleElement.rel = 'stylesheet';
document.head.appendChild(styleElement);
}
styleElement.href = '<?php echo plugins_url('wooster-partner/assets/css/'); ?>' + styleName;
localStorage.setItem('wooster_style', styleName);
//console.log('Style défini dans localStorage :', styleName); // Instruction de débogage
}
// Charger le style initial
changeStyle(currentStyle);
});
</script>
<?php
}
/**
* Enqueues the selected style for Wooster plugin settings page
*
* @return void
*/
public function enqueue_styles()
{
$selected_style = get_option('wooster_style', 'compagnon-wp.css'); // Style par défaut
wp_enqueue_style('wooster-custom-style', plugins_url('wooster-partner/assets/css/' . $selected_style));
// Enfiler d'autres styles nécessaires
wp_enqueue_style('wooster-banner', plugins_url('assets/css/banner.css', __DIR__));
wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css', array(), '5.15.4');
wp_enqueue_script('jquery'); // Bibliothèque JavaScript
// Localiser votre script
wp_localize_script('switch-style', 'switch_style_vars', array(
'wooster_style_url' => plugins_url("wooster-partner/assets/css/compagnon-wooster.css"),
'wp_style_url' => plugins_url("wooster-partner/assets/css/compagnon-wp.css"),
));
// Enfiler votre script
wp_enqueue_script('switch-style');
}
}
new WoosterBanner();
I tried to enqueue dequeue but as I already put a condition in the script , it should not be necessary. I can’t also enqueue and dequeue as the same time