Recently one of the members in our Facebook Group asked this:
So which one is the fastest cookie notice plugin?
I couldn’t find a good one. Most of the cookie consent WordPress plugins will slow down your site. They’re bloated with too many features and unwanted CSS and JavaScript.
So I built one, a code snippet for cookie notice in WordPress without a plugin!
- Less than 1 KB in size (~500 bytes gzipped)
- No CSS or JavaScript files (everything inlined)
- No jQuery dependency
- No database queries needed
- Responsive
- Fully customizable
Here is how it looks:
On mobile:
Easily customize to match your theme:
Code
<p id="cookie-notice">This website uses cookies to ensure you get the best experience on our website<br><button onclick="acceptCookie();">Got it!</button></p>
<style>#cookie-notice{color:#fff;font-family:inherit;background:#596cd5;padding:20px;position:fixed;bottom:10px;left:10px;width:100%;max-width:300px;box-shadow:0 10px 20px rgba(0,0,0,.2);border-radius:5px;margin:0px;visibility:hidden;z-index:1000000;box-sizing:border-box}#cookie-notice button{color:inherit;background:#3842c7;border:0;padding:10px;margin-top:10px;width:100%;cursor:pointer}@media only screen and (max-width:600px){#cookie-notice{max-width:100%;bottom:0;left:0;border-radius:0}}</style>
<script>function acceptCookie(){document.cookie="cookieaccepted=1; expires=Thu, 18 Dec 2030 12:00:00 UTC; path=/",document.getElementById("cookie-notice").style.visibility="hidden"}document.cookie.indexOf("cookieaccepted")<0&&(document.getElementById("cookie-notice").style.visibility="visible");</script>Adding it to WordPress
I didn’t make it as WordPress plugin because it’s so easy to integrate. Also creating it as WordPress plugin will require database calls to query the text, colour etc.
In order to add it to your WordPress site, go to your Appearance -> Theme Editor -> Theme Footer (footer.php) (from the right side) and paste the above code just before </body>.
Customization
The text can be easily changed in the <p> tag. You can insert links or anything as you wish.
To edit the background colour, search for #596cd5 and replace it with yours. For the button’s background colour search for #3842c7 and replace it.
Comment below if you’ve any queries or feedback. I read and reply back to each of them within 12 hours!
