How to add your own Cookie Notice without a Plugin

Sharing is caring!

Disclosure: Please note that this article may contain affiliate links. You can read my full disclosure here.
    Need help with the Tech-side of blogging? Join my Facebook Group and get some answers.
~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~

If your blog has visitors from the European Union or UK, then you need to display a cookie notice for those visitors on your site to give them a heads up that your website uses cookies. You can geotarget your visitors so it only displays for specific locations, but I find that this slows down the loading of your site, so I have the notice display to all visitors now.

I will provide the code similar to what we currently on our sites for our cookie notice, you can use it and modify to your liking. If you do so, I’d love to see your sites using the cookie notice – comment on this post so we can check it out.

Here is what the Cookie Notice looks like on desktop/tablet:
Screenshot of Cookie Notice basic

Here is what the Cookie Notice looks like on mobile:
Screenshot of Cookies notice mobile

The Cookie notice is one tool in your tool belt for making your site compliant. If you find that you keep procrastinating in making your site GDPR compliant, see the GDPR Compliant Blog How to make your blog GDPR compliant in less than 48 hours (templates included) by Lucrezia from TinyLoveBug. There is also the option for just the Policy Templates, which comes with a Cookies Policy Template as a bonus too. Lucrezia is a lawyer and holds a Master’s degree and a Ph.D. in International and EU Law.

Back in May 2018, when the GDPR rules were first coming out, I was a complete wreck trying to figure out how to make our sites compliant. Every post I found online said we needed an “opt-in” cookie consent model for EU visitors.

We lost a fair bit of analytics data for the EU because of this misinformation and scare tactics used.

I am so glad that Lucrezia set me straight after all my previous findings had my head spinning.

She let me know that there was no change to the Cookie law when the GDPR rules came into effect (except for the GDPR rules on consent equally applying to cookies). Here is the quote. However, this may change at a future date.
 

I always recommend my readers “to research and learn as much as possible but please be mindful of the reliability of your sources because there is so much conflicting advice out there and I have personally come across some advice that was plain wrong. Given the steep fines and what’s at stake, I would make sure you don’t rely on random posts and articles but that you carefully check your sources”.

If you look at the GDPR (a ctrl+F search for the words cookie/cookies in the following link will do
https://eur-lex.europa.eu/legal-content/EN/TXT/HTML/?uri=CELEX%3A32016R0679&from=EN you will see there is no mention of any new specific change in regulation for cookies.

Obviously, the rules on consent set by the GDPR will also apply to cookies. So, you must get the user’s consent before any tracking is performed. To be valid, consent must be freely given, specific and informed.

Consent does not necessarily have to be explicit consent. However, consent must be given by a clear positive action which means it must involve some form of unambiguous positive action. The positive action may even be scrolling down the page of your website as long as your user is put in the position to fully understand that they are giving you consent by doing so.

Under the GDPR, it must be as easy to withdraw as to give consent. So, users must be given the possibility to refuse or withdraw their consent.

But this doesn’t mean that you must provide users with the means to toggle cookie preferences directly on your website. You can explain in your cookie policy/privacy policy how cookies can be disabled in users’ browser settings.

I will also add something from the Information Commissioner’s Office which is the Supervisory Authority under the GDPR in the UK and their own cookie pop-up on their own website.

screenshot of the ICO cookie notice
Screenshot of the
ICO cookie notice

“Much of the debate around the so-called “consent for cookies” rule has focussed on the nature of the consent required for compliance. Implied consent has always been a reasonable proposition in the context of data protection law and privacy regulation and it remains so in the context of storage of information or access to information using cookies and similar devices.

While explicit consent might allow for regulatory certainty and might be the most appropriate way to comply in some circumstances this does not mean that implied consent cannot be compliant. Website operators need to remember that where their activities result in the collection of sensitive personal data such as information about an identifiable individual’s health then data protection law might require them to obtain explicit consent.

Early reporting on the new rule led some to believe that an explicit, opt-in style consent would be required for every cookie each time it was set. The 6 V.3 May 2012 Information Commissioner’s guidance made it clear that although an explicit optin mechanism might provide regulatory certainty it was not the only means of gaining consent.

In some circumstances those seeking consent might consider implied consent as an option that was perhaps more practical than the explicit opt-in model. Implied consent is certainly a valid form of consent but those who seek to rely on it should not see it as an easy way out or use the term as a euphemism for “doing nothing”.

In many cases, to create a situation in which implied consent is acceptable to subscribers, users and the regulator it would still be necessary to follow the steps set out in the Information Commissioner’s existing guidance.

To explain further it might be useful to unpack what we actually mean by the term “implied consent” remembering throughout that consent (whether it is implied or express) has to be a freely given, specific and informed indication of the individual’s wishes.

For implied consent to work there has to be some action taken by the consenting individual from which their consent can be inferred. This might for example be visiting a website, moving from one page to another or clicking on a particular button.

The key point, however, is that when taking this action the individual has to have a reasonable understanding that by doing so they are agreeing to cookies being set”.

See Lucrezia’s Post on what GDPR is and what this means for bloggers.

Adding the Cookie Notice Code

Before you start this tutorial it is important to take a backup. If you don’t have a backup solution yet, here is a post with step-by-step instructions on setting up Updraft Plus.

We will be modifying the footer.php file of your theme to add the Cookie notice to the footer on your site. If you are not sure how to modify your theme files, see this post, the links open in a new tab, so you won’t lose your place here.

There are 3 parts to the Cookie Notice code you can use as is or modify as you see fit.

  1. The CSS Style
  2. The HTML code.
  3. The Javascript to make it work.

 

 

The CSS Style

The CSS style is used to set the size and branding colors.

In CSS the /* */ are comment opening and closing tags respectively, to add notes to your code.
We are using some media Queries below so you will see @media CSS, so that on desktops the cookie notice is a small square on the bottom right side of the screen, but on mobile, the cookie banner is across the bottom footer.

Where you see colors listed below, you can change those up, use either the words, or css hex color codes, check out this site for a list of the CSS color codes.

If you modify the code, remember this:

  • When you have add an html class to an element, you add the css by adding a dot in front of the class name.
  • If you add an html id to an element, you add the css by adding a hashtag in front of the id name.
  • z-index below is instead of adding “!important”. The higher the z-index the more “authority” that css code has.
  •  

    <style>
    /* All Screen Sizes */
    .ok-btn, .cookie-btn {
    border:2px solid black;
    font-family:sans-serif;
    font-size:14px;
    padding:3px;
    display:block;
    width:220px;
    background-color:#62374e;
    text-align:center;
    color:white;
    }

    .EU_cookie_banner {
    line-height:1.2;
    padding-top:5px;
    padding-left:5px;
    color:white;
    background-color:black;
    position:fixed;
    bottom:0;
    right:0;
    z-index:10000;
    }
    .options b a {
    color:white;
    }
    .lbl {
    text-align:left;
    position:relative;
    display:block;
    }
    .input_buttons {
    display:block;
    }
    .cookies_hidden {
    color:white;
    background-color:black;
    }
    #mb-close {
    position:absolute;
    top:-4px;
    right:2px;
    font-size:1.2em;
    }
    /* Desktop and Tablets */
    @media screen and (min-width: 751px), screen and (min-device-width:751px) {
    .EU_cookie_banner {
    width:240px;
    }
    .input_buttons {
    padding-bottom:15px;
    }
    .cookies_hidden {
    padding-left:5px;
    max-width:240px;
    }
    .mobile {
    display:none !important;
    }
    }
    /* Mobile */
    @media screen and (max-width: 750px), screen and (max-device-width:750px) {
    .EU_cookie_banner {
    width:100%;
    max-height:100px;
    }
    .input_buttons {
    display:block;
    width:280px;
    }
    .cookies_hidden {
    padding-left:5px;
    max-width:350px;
    bottom:100px;
    position:fixed;
    z-index:9999;
    }
    .desktop {
    display:none !important;
    }
    }
    </style>

    The HTML code

    In this first part, we set the wording on our cookie banner, and add the link to the Cookies Policy page. You will need to setup your own Cookies Policy and Privacy Policy pages and add the links to it below.
     

    <div id="EU_cookie_banner" class="EU_cookie_banner">
    <span class="txt">This website uses cookies. If you continue to use this website we will assume you are okay with this.
    <span class="options"><b><a href="/cookies-policy/">Cookie Policy.</a>~*~*~<a href="/privacy-policy/">Privacy Policy.</a></b></span>
    </span><!-- txt -->
    </div><!-- Eu cookie banner html -->

    The code here activates the “ok” button that when clicked the banner closes.
     

    <span id="ok" class="ok-btn" onclick="close_button()"> Ok </span><!--End ok-btn -->

    The code here adds a close ‘×’ on your Cookie notice for another option to close the notice.

    <div id="mb-close" onclick="close_button()">×</div>

    Find this post helpful, tell others about it. Pin on Pinterest or share on Facebook or your favorite social media. Thank you!
    gdpr compliance cookie notice policy templates

    The Javascript code

    This code checks if the referrer information is present, if so, it checks if the visitor is just clicking to another page on your site, and not just landing there for the first time, do not display the cookie notice. (this will likely not work if your links have the noreferrer code on them – see this post for more info on noreferrer)
     

    <script>
    if (document.referrer.indexOf('?') > 0) {
    if (document.referrer.substring(0, document.referrer.indexOf('?')).toLowerCase().indexOf('add-your-site-here.com') >= 0) {
    document.getElementById("EU_cookie_banner").style.display = "none";
    }
    } else if (document.referrer.toLowerCase().indexOf('add-your-site-here.com') > 0) {
    document.getElementById("EU_cookie_banner").style.display = "none";
    } else {
    document.getElementById("EU_cookie_banner").style.display = "block";
    document.getElementById("EU_cookie_banner").style.zindex = "200";
    }
    </script>

    This code here, closes the Cookie Notice when someone clicks either the × or the OK button.
     

    <script>
    function close_button() {
    document.getElementById('EU_cookie_banner').style.display = 'none';
    }
    </script>

    This code here, hides the Cookie Notice once the user starts scrolling down the page.
     

    <script>
    window.onscroll = function() {scrollFunction()};
    function scrollFunction() {
    if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300 ) {
    document.getElementById('EU_cookie_banner').style.display = 'none';
    }
    }
    </script>

    Putting it all together

    Save this code in the footer.php file of your active theme, before the ending body tag </body>. Then clear your caches and type your site into the browser address bar and confirm the cookie notice displays as expected.

    <!-- Cookie Banner -->
    <style>
    /* All Screen Sizes */
    .ok-btn, .cookie-btn {
    border:2px solid black;
    font-family:sans-serif;
    font-size:14px;
    padding:3px;
    display:block;
    width:220px;
    background-color:#62374e;
    text-align:center;
    color:white;
    }

    .EU_cookie_banner {
    line-height:1.2;
    padding-top:5px;
    padding-left:5px;
    color:white;
    background-color:black;
    position:fixed;
    bottom:0;
    right:0;
    z-index:10000;
    }
    .options b a {
    color:white;
    }
    .lbl {
    text-align:left;
    position:relative;
    display:block;
    }
    .input_buttons {
    display:block;
    }
    .cookies_hidden {
    color:white;
    background-color:black;
    }
    #mb-close {
    position:absolute;
    top:-4px;
    right:2px;
    font-size:1.2em;
    }
    /* Desktop and Tablets */
    @media screen and (min-width: 751px), screen and (min-device-width:751px) {
    .EU_cookie_banner {
    width:240px;
    }
    .input_buttons {
    padding-bottom:15px;
    }
    .cookies_hidden {
    padding-left:5px;
    max-width:240px;
    }
    .mobile {
    display:none !important;
    }
    }
    /* Mobile */
    @media screen and (max-width: 750px), screen and (max-device-width:750px) {
    .EU_cookie_banner {
    width:100%;
    max-height:100px;
    }
    .input_buttons {
    display:block;
    width:280px;
    }
    .cookies_hidden {
    padding-left:5px;
    max-width:350px;
    bottom:100px;
    position:fixed;
    z-index:9999;
    }
    .desktop {
    display:none !important;
    }
    }
    </style>

    <div id="EU_cookie_banner" class="EU_cookie_banner">
    <div id="mb-close" onclick="close_button()">×</div>
    <span class="txt">This website uses cookies. If you continue to use this website we will assume you are okay with this.
    <span class="options"><b><a href="/cookies-policy/">Cookie Policy.</a>~*~*~<a href="/privacy-policy/">Privacy Policy.</a></b></span>
    </span><!-- txt -->
    <span id="ok" class="ok-btn" onclick="close_button()"> Ok </span><!--End ok-btn -->
    </div><!-- Eu cookie banner html -->

    <script>
    if (document.referrer.indexOf('?') > 0) {
    if (document.referrer.substring(0, document.referrer.indexOf('?')).toLowerCase().indexOf('add-your-site-here.com') >= 0) {
    document.getElementById("EU_cookie_banner").style.display = "none";
    }
    } else if (document.referrer.toLowerCase().indexOf('add-your-site-here.com') > 0) {
    document.getElementById("EU_cookie_banner").style.display = "none";
    } else {
    document.getElementById("EU_cookie_banner").style.display = "block";
    document.getElementById("EU_cookie_banner").style.zindex = "200";
    }
    </script>
    <script>
    function close_button() {
    document.getElementById('EU_cookie_banner').style.display = 'none';
    }
    </script>
    <script>
    window.onscroll = function() {scrollFunction()};
    function scrollFunction() {
    if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300 ) {
    document.getElementById('EU_cookie_banner').style.display = 'none';
    }
    }
    </script>
    <!-- Cookie Banner -->

    Are you using the Cookie Notice

    Let us know in the comments if you’ve setup this cookie notice or if there’s another you recommend.

    Got blogging questions? Join my Facebook group here WP Blogger Assist Questions Advanced WordPress user with coding knowledge? Advanced Coding on WordPress

    Tara, WP Blogger Assist

    I have over 15 years experience in IT. Over this time: managing server infrastructure, building websites and more. This website is dedicated to helping WordPress bloggers with setting up their blogs and websites; optimizing fast page loading, SEO and social media marketing - such as; Pinterest, Facebook and more.

    Leave a Reply

    Your email address will not be published. Required fields are marked *