We designed our new cookie banners for version 6.0 and later to be fully flexible. A solid, minimal default set-up that complies with WCAG and ADA and has many settings direct available in the back-end, and fully customizable as you expect from WordPress.
Below you will find an example of adding new toggles to the cookie banner with some simple changes. For full transparency, the toggles are from codepen and made by Raúl Barrera, available here. these animated toggle switches and more elements are available online whit the right Google search terms and easily implemented.
How to implement with MU plugins
In short, “MU plugins” is an extra folder in the /wp-content/ directory of your WordPress installation. Alongside the usual /wp-content/plugins/ folder you will (or can create) have the /wp-content/mu-plugins/ directory. Here you can add .PHP files to add functionality. For more information and example, read this article.
To create the toggles, please add these .PHP files to the mu-plugins folder.
new-toggles-cmplz-7.php in wp-content/mu-plugins/
After placing the PHP file, be sure to run the Wizard in Complianz → Wizard → Finish → Finish to regenerate the banner/CSS. If caching is enabled, clear all caches, this step is essential for changes to appear.
new-toggles-cmplz-7.php
Adjusting the colors
In the file new-toggles-cmplz-7.php inside your /wp-content/mu-plugins/ folder, you can edit color values directly in the CSS section of the code.
- Track OFF color: line 25 →
background: #2c3e50 !important; - Knob color ✕: line 65 →
background: #ffffff !important; - ✕ color: line 66 →
color: #2c3e50 !important;
- Track ON color: line 76 →
background: #16a085 !important; - Knob color ✓: line 83 →
background: #ffffff !important; - ✓ color: line 84 →
color: #16a085 !important;
Finally, clear all caches to ensure the new colors appear correctly.