I am trying to add a button to switch between two different css files. I have another php file where I can choose the option setting with a form. That is why I just wanted to get the option and update it. The problem is when I submit these form now.
When I click on wordpress setting it is good, I have the 2 css files in the network and works. But when I submit Wooster style, it generated compagnon-wooster.css: so it is good but then I click on the switch button, it calls wp.css , ok but the style displayed is not good, it is a mixed of both css because the title is still purple (compagnon-wooster.css ) and the button blue ( wp.css ) but in the network , it is well written wp style.
[enter image description here](https://i.sstatic.net/lGL4KiS9.jpg)
I tried to use Localstorage first and then cookies.
<?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">
<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>
</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 backendStyle = '<?php echo get_option('wooster_style', 'compagnon-wp.css'); ?>';
var currentStyle = getCookie('wooster_style') || backendStyle;
// Update cookie if the style has changed in the backend
if (currentStyle !== backendStyle) {
setCookie('wooster_style', backendStyle, 7);
currentStyle = backendStyle;
}
toggleStyleBtn.addEventListener('click', function() {
currentStyle = currentStyle === 'compagnon-wp.css' ? 'compagnon-wooster.css' : 'compagnon-wp.css';
changeStyle(currentStyle);
});
function changeStyle(styleName) {
var oldStyleElement = document.getElementById('wooster-custom-style');
if (oldStyleElement) {
oldStyleElement.parentNode.removeChild(oldStyleElement);
}
var styleElement = document.createElement('link');
styleElement.id = 'wooster-custom-style';
styleElement.rel = 'stylesheet';
styleElement.href = '<?php echo plugins_url('wooster-partner/assets/css/'); ?>' + styleName + '?v=' + new Date().getTime();
document.head.appendChild(styleElement);
setCookie('wooster_style', styleName, 7);
}
// Load the initial style
changeStyle(currentStyle);
});
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
</script>
<?php
}
/**
* Enqueues the selected style for Wooster plugin settings page
*
* @return void
*/
public function enqueue_styles()
{
// Enqueue other necessary styles and scripts
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'); // Js library
// Enqueue your script
wp_enqueue_script('switch-style');
}
}
new WoosterBanner();