Title: oce2's Replies | WordPress.org

---

# oce2

  [  ](https://wordpress.org/support/users/oce2/)

 *   [Profile](https://wordpress.org/support/users/oce2/)
 *   [Topics Started](https://wordpress.org/support/users/oce2/topics/)
 *   [Replies Created](https://wordpress.org/support/users/oce2/replies/)
 *   [Reviews Written](https://wordpress.org/support/users/oce2/reviews/)
 *   [Topics Replied To](https://wordpress.org/support/users/oce2/replied-to/)
 *   [Engagements](https://wordpress.org/support/users/oce2/engagements/)
 *   [Favorites](https://wordpress.org/support/users/oce2/favorites/)

 Search replies:

## Forum Replies Created

Viewing 3 replies - 1 through 3 (of 3 total)

 *   Forum: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
   
   In reply to: [Switch style button](https://wordpress.org/support/topic/switch-style-button/)
 *  Thread Starter [oce2](https://wordpress.org/support/users/oce2/)
 * (@oce2)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/switch-style-button/#post-17746005)
 * Maybe the problem is elsewhere: this is what I did , I don’t know how to well
   expose my problem, I wanted to put screenshoots but I can’t here. 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.
 *     ```wp-block-code
       <?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 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();
       ```
   
 *   Forum: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
   
   In reply to: [Switch style button](https://wordpress.org/support/topic/switch-style-button/)
 *  Thread Starter [oce2](https://wordpress.org/support/users/oce2/)
 * (@oce2)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/switch-style-button/#post-17740899)
 * I tried to use cookies I made researches that Local Storage is not appropriate.
   However, when I use cookit it doesn’t take into account the setting form anymore
 *   Forum: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
   
   In reply to: [Switch style button](https://wordpress.org/support/topic/switch-style-button/)
 *  Thread Starter [oce2](https://wordpress.org/support/users/oce2/)
 * (@oce2)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/switch-style-button/#post-17737417)
 * Thank you, it may be that. I tried to dequeue and enqueue but still in the front,
   when Wooster style is selected, It doesn’t change. I also add this which is specific
   for the front
 *     ```wp-block-code
        add_action('wp_enqueue_scripts', array($this, 'enqueue_styles')); // for the front page
       ```
   
 *     ```wp-block-code
            public function enqueue_styles()
            {
                // Register your script
                //wp_register_script('switch-style', plugins_url('wooster-partner/assets/js/switch-style.js'), array('jquery'), '1.0', true);
   
                $selected_style = get_option('wooster_style', 'compagnon-wp.css'); // default style
   
           if (!is_admin()) {
               if ($selected_style === 'compagnon-wooster.css') {
                   wp_dequeue_style('compagnon-wp');
                   wp_enqueue_style('wooster-custom-style', plugins_url('wooster-partner/assets/css/' . $selected_style));
               } else {
                   wp_dequeue_style('wooster-custom-style');
                   wp_enqueue_style('compagnon-wp', plugins_url('wooster-partner/assets/css/compagnon-wp.css'));
               }
           }
   
                // 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
   
                // Localize your 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"),
                ));
   
                // Enqueue your script
                wp_enqueue_script('switch-style');
            }
       ```
   
    -  This reply was modified 2 years, 1 month ago by [oce2](https://wordpress.org/support/users/oce2/).

Viewing 3 replies - 1 through 3 (of 3 total)