This guide will help you create a Cookie Consent notice for a WordPress website without using a plugin.
Under the General Data Protection Regulation (GDPR) implemented on May 25, 2018, any website that can be accessed from Europe will require a Privacy Policy page as well as an alert to users if cookies are being used on your website or blog. If you have a website that is targeted to users living in Europe, then you will need to provide visitors with a cookie alert before they access your website.
While there are many plugins that have great-looking cookie consent notices, you may not want to use any plugins to create your cookie consent notice for a few reasons listed below. The majority of cookie consent plugins available are loaded with too many features and include additional CSS and JavaScript files that will negatively affect your website’s speed performance.
You can create your own cookie notice code without the use of a cookie consent plugin, as described in methods one and two attributes.
Method #1: Cookie Consent Code for WordPress without plugin by Gijo Varghese.
The cookie consent code is provided by Gijo Varghese, a website speed optimization specialist who runs www.wpspeedmatters.com. Below are the considerations for using this cookie consent code:
- The size of the cookie consent code is less than 1 KB (500 bytes when compressed).
- All coding is inline - there are no standalone JavaScript or CSS files.
- There is no jQuery dependency.
- There are no database queries.
- Responsive to various screen sizes.
The image below illustrates how the layout of the cookie consent code will look when viewed by visitors.
<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>Because this cookie consent code has been created without the use of a cookie consent plugin, you will need to paste this code directly into your WordPress database, by going to Appearance > Theme Editor > Theme Footer (footer.php) place code before closing tag.
To modify the text of your cookie consent code, simply change what is written in the tag to whatever desired text. To change the background colour, look for #596cd5 in the cookie consent code and change this to your desired background colour. To change the button background colour, search for #3842c7 and change this to your desired button colour.
Method #2: Create a GDPR Cookie Consent Code Without the Use of a Cookie Consent Plugin by Suraj Katwal.
The second cookie consent code was provided by Suraj Katwal found at www.wplogout.com. Below are the benefits of using this cookie consent code:
- The size of the cookie consent JavaScript code is around 1KB
- The code is easy to implement
- The cookie consent notice is fully mobile friendly
- The cookie consent code works in Internet Explorer 8
- There is complete customisation of the cookie consent notice.
<style>#cookie-law-div{z-index:10000000;position:fixed;bottom:3%;right:2%;padding:1em;max-width:400px;border-radius:10px;background:#fff;border:1px solid rgba(0,0,0,.15);font-size:15px;box-shadow:rgba(23,43,99,.4) 0 7px 28px}@media (max-width:600px){#cookie-law-div{border-radius:0;max-width:100%;right:0;bottom:0}}#cookie-law-div a{font-size:15px;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.5)}#cookie-law-div a:hover{opacity:.7}#cookie-law-div p{margin:0;color:#000;padding-right:50px}#cookie-law-div button{position:absolute;right:.5em;top:20px;align-self:center;line-height:1;color:#fff;background-color:#000;border:none;opacity:.6;font-size:12px;cursor:pointer;border-radius:50px}#cookie-law-div button:hover{opacity:1}</style>
<script>cookieLaw={dId:"cookie-law-div",bId:"cookie-law-button",iId:"cookie-law-item",show:function(e){if(localStorage.getItem(cookieLaw.iId))return!1;var o=document.createElement("div"),i=document.createElement("p"),t=document.createElement("button");i.innerHTML=e.msg,t.id=cookieLaw.bId,t.innerHTML=e.ok,o.id=cookieLaw.dId,o.appendChild(t),o.appendChild(i),document.body.insertBefore(o,document.body.lastChild),t.addEventListener("click",cookieLaw.hide,!1)},hide:function(){document.getElementById(cookieLaw.dId).outerHTML="",localStorage.setItem(cookieLaw.iId,"1")}},cookieLaw.show({msg:"We use cookies to give you the best possible experience. By continuing to visit our website, you agree to the use of cookies as described in our <a href='#'>Cookie Policy</a>",ok:"x"});</script>To add this code to your WordPress footer, simply follow the same steps as stated above in Method #1.
By investing the time, to create your own cookie consent notice without the use of a plugin, you will do so with little time, and not slow the performance of your website.
