WordPress Plugin: EU Cookie Law

Written by on Wednesday 13th June 2012 under WordPress

The Cookie Law is a new piece of privacy legislation from Europe that requires websites to obtain consent from visitors to store or retrieve cookies and is designed to protect online privacy, by making consumers aware of how information about them is collected by websites, and enable them to choose whether or not they want to allow it to take place. This tutorial and download shows you how to implement an 'implied consent' notification message.

Update 17/06/2013: Major update to the WordPress Cookie plugin. Changes include fully responsive layout, new configuration manager, improved control over styling and more configuration options. See notes below for details.

The Cookie Law

The Cookie Law was started as an EU Directive that was adopted by all EU countries on May 26th 2011. At the same time the UK updated its Privacy and Electronic Communications Regulations, which brought the EU Directive it into UK law. Each EU member state has done or is doing the same thing. Although they all have their own approach and interpretation, the basic requirements of the directive remain the same.

Many people are unaware that the law is already in effect in the UK. However, the UK's regulator, The Information Commissioner's Office (ICO), gave everybody a one year 'grace period' for implementing a solution which expired on 26th May 2012.

In a nutshell, the requirements of the directive mean that website operators must get "informed consent" from users before they record any detailed information in the cookies they store on visitors' computers. This means that a website must ask for consent from the user before using cookies.

Are all cookies affected? The vast majority are - all cookies that are not "strictly necessary for a service requested by a user".

Tracking cookies used by Google Analytics are affected as well, so even if your website does not use cookies, but you use Google Analytics (or possibly any other similar products) still need consent from the user.

There are two methods for gaining consent - explicit and implied.

  • Explicit consent means that a website will not use any cookies unless the user explicitly agrees to "opt-in" to receiving cookies.
  • Implicit consent means that a website will continue to use cookies and that it is up to the user to "opt-out" by changing their browser cookie preferences or by leaving the site.

A Solution

This method relies on implied consent and you should ensure that this method is correct for your website. If you are relying on implied consent you need to be satisfied that your users understand that their actions will result in cookies being set. Without this understanding you do not have their informed consent (further info here)

This code and WordPress plugin will create a small banner at the top of the guest's browser that greets them with the message:

Wordpress Plugin EU Cookie Law

Wordpress Plugin EU Cookie Law

You can change this text from within the plug-in settings page.

DISCLAIMER

Whilst every effort has been taken to ensure that this code remains up to date and conforms to the EU Cookie Law, the authors cannot and will not be held responsible if it is found to be inadequate in any way. The authors are NOT legal experts and nothing contained within constitutes legal advice.

It is your responsibility to ensure that implied consent is suitable for your site before using this code or plugin.

For more information on the Cookie Law please visit the The Information Commissioner's Office.

The Code

The code and plugin both require jQuery to work and can be included in any website with minimal coding.

  1. <script type="text/javascript">jQuery(function(){
  2.   if(navigator.cookieEnabled===true)
  3.   {
  4.     if(document.cookie.indexOf("visited")==-1)
  5. {
  6.       // The message
  7.   jQuery('body').prepend('<div id="cookie"><div id="wrapper"><h2>Cookies on this website</h2><p>We use cookies to ensure that we give you the best experience on our website. If you continue without changing your settings, we'll assume that you are happy to receive all cookies from this website. If you would like to change your preferences you may do so by following the instructions <a href="http://www.aboutcookies.org/Default.aspx?page=1" rel="nofollow">here</a>.</p><div id="close"><a href="#" id="closecookie">✓ Close</a></div><div style="clear:both"></div></div></div>');
  8.  
  9.  // The CSS
  10.  jQuery('head').append('<style type="text/css">#cookie {position:absolute;left:0;top:0;width:100%;height:100%;background:rgb(0,0,0);background:rgba(0,0,0,0.8);z-index:9999;}#cookie #wrapper {padding:20px;}#cookie h2 {color:#ffffff;padding-top:0;display:block;text-align:center;font-family:ariel,sans-serif;font-size:1.8em}#cookie p {color:#BEBEBE;display:block;font-family:ariel,sans-serif;font-size:1.4em}#cookie #close{text-align:center;}#closecookie{color:#ffffff;font-family:ariel,sans-serif;font-size:1.6em;text-decoration:none}@media only screen and (min-width: 480px){#cookie {height:auto;}#cookie #wrapper{max-width:980px;margin-left:auto;margin-right:auto;}#cookie h2{width:18%;margin-top:0;margin-right:2%;float:left;text-align:right;}#cookie p {width:68%;margin:01%;float:left;}#cookie #close{width:9%;float:right;}}</style>');
  11.  
  12.  // Don't touch this
  13.   jQuery('#cookie').show("fast");
  14.   jQuery('#closecookie').click(function(){jQuery('#cookie').hide("fast");});
  15.   document.cookie="visited=yes; expires=Thu, 31 Dec 2020 23:59:59 UTC; path=/";
  16. }
  17.   }
  18. })</script>

On the first visit to the website the user will see a banner across the top of the page as shown in the screenshot above. If they continue to use the site the message is not shown, nor will it be shown again. The plugin and code set a cookie to determine if the message has already been shown. This cookie is deemed essential to the services provided and is excluded from the regulation. The cookie is called visited and the value is set to yes. The cookie has a far-future expires date.

The code is very straightforward, it first checks to see if cookies are enabled or not on the guests browser. If they are then it checks to see if the message has already been shown using the presence of the visited cookie. If the cookie does not exist then the message is added to the top of the page, it has an expanding type animation when shown. The close button will shrink the message in the same way as it is shown and finally the cookie is set so that the message isn't shown again.

WordPress Plugin

The WordPress plugin can be downloaded from the WordPress Plugin Directory or using the link below: EU Cookie Law Complience Message.

EU Cookie Law WordPress Plugin
EU Cookie Law WordPress Plugin
Size: 6718 bytes
Format: ZIP

Installation

If you are using the WordPress plugin:

  1. Upload all files to the '/wp-content/plugins/' directory
  2. Activate the plugin through the 'Plugins' menu in WordPress
  3. Configure the text through the 'Settings' menu under 'EU Cookie Message'

Configuration Options

Using the WordPress plugin you are able to customise the title, message and the close button text as well as changing the visual style using a built in light or dark theme, or creating your own.

Content Padding: This option allows you to change the padding inside the main content section to increase the space around the borders.

Message Maximum Width: Change this to suit your website maximum page width. This is the maximum width that the text will occupy.

Message hovers over content: By enabling this option you can have the cookie warning message placed above your website header - it will push the header below the message. The default is for the message to "hover" on top of the website header.

Debug Mode: This prevents the plugin from setting a cookie. You can use this for testing and the message will be shown on every page load. Remember to disable debugging when your site goes into production.

Pure HTML & Javascript

If you are going to be using the above code on a non-Wordpress website you may need to edit the template or theme. Methods will vary on how your website is written, but in general all you need to do is include the jQuery library to every page that will contain the message and paste in the above snippet into the page just before the end of the body tag.

There are two lines in the javascript, one contains the HTML for the message, the other contains the stylesheet. You can edit these to change the look and feel of the message.

Using an xHTML Transistional Skeleton template it should be structured similar to this:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.   <title>Your Title</title>
  5.   <metaname="Description"content="Your description"/>
  6.   <metaname="Keywords"content="Your, comma delimited, keywords"/>
  7.   <metaequiv="content-type"content="text/html; charset=utf-8"/>
  8.   <linkrel="stylesheet"type="text/css"media="all"href="your-css-stylesheet.css"/>
  9. </head>
  10. <body>
  11.   <!-- YOUR CONTENT HERE -->  
  12.  
  13.   <scripttype="text/javascript">
  14.     jQuery(function(){
  15.       if (navigator.cookieEnabled === true)
  16.       {
  17.         if (document.cookie.indexOf("visited") == -1)
  18.         {
  19.           // The message
  20.           jQuery('body').prepend('<div id="cookie"><div id="wrapper"><h2>Cookies on this website</h2><p>We use cookies to ensure that we give you the best experience on our website. If you continue without changing your settings, we'll assume that you are happy to receive all cookies from this website. If you would like to change your preferences you may do so by following the instructions <ahref="http://www.aboutcookies.org/Default.aspx?page=1"rel="nofollow">here</a>.</p><divid="close"><ahref="#"id="closecookie">✓ Close</a></div><divstyle="clear:both"></div></div></div>');
  21.    
  22.          // The CSS
  23.          jQuery('head').append('<styletype="text/css">#cookie {position:absolute;left:0;top:0;width:100%;height:100%;background:rgb(0,0,0);background:rgba(0,0,0,0.8);z-index:9999;}#cookie #wrapper {padding:20px;}#cookie h2 {color:#ffffff;padding-top:0;display:block;text-align:center;font-family:ariel,sans-serif;font-size:1.8em}#cookie p {color:#BEBEBE;display:block;font-family:ariel,sans-serif;font-size:1.4em}#cookie #close{text-align:center;}#closecookie{color:#ffffff;font-family:ariel,sans-serif;font-size:1.6em;text-decoration:none}@media only screen and (min-width: 480px){#cookie {height:auto;}#cookie #wrapper{max-width:980px;margin-left:auto;margin-right:auto;}#cookie h2{width:18%;margin-top:0;margin-right:2%;float:left;text-align:right;}#cookie p {width:68%;margin:0 1%;float:left;}#cookie #close{width:9%;float:right;}}</style>');
  24.    
  25.          // Don't touch this
  26.           jQuery('#cookie').show("fast");
  27.           jQuery('#closecookie').click(function(){jQuery('#cookie').hide("fast");});
  28.           document.cookie="visited=yes; expires=Thu, 31 Dec 2020 23:59:59 UTC; path=/";  
  29.         }
  30.       }
  31.     })
  32.   </script>  
  33. </body>
  34. </html>

17 Responses to “WordPress Plugin: EU Cookie Law”

  1. Unreadable on IE8.
    Since c. 18 - 34 % of users on different sites I'm responsible for use IE8 this would be unacceptable to me.

    But I've made a quick fix by replacing the transparent background with a solid colour. Would be preferable if CSS was separate so could be styled as desired.

    I appreciate the non-WP instructions as I have a site that is a mixture of both.

  2. Philsays:

    Hi, thanks for this lovely plug-in.
    I didnt really like the rather subtle nature of the plug-in so was playing with the CSS and made it rather bigger. Somehow during this - kept deleting the visited cookie and reloading page it suddenly stopped working!!!
    I have removed and re-installed the plug-in but to no avail. It still does not work.
    What did I do and how can I correct it?

    thanks.
    Phil.

  3. TVGsays:

    Hello,

    I have added some of my own text to the default provided. However, this means the text no longer fits inside the black semi-transparent background. Which parameter needs to be larger in order for this to work?

    Thank you for this excellent plugin.

    Kind regards

  4. Marysays:

    Thanks for releasing this.

    I'd like to use it, but my site's html. Could you please update it so it works in all browsers?

    I appreciate this resource very much, think it looks great.

  5. Hi Mary,

    Updated code sample should work in browsers, but not on locally as cookies are disabled on local pages. You can easily comment out the cookie check though.

    Tim

  6. Do you get any error messages at all? Have you inadvertently disabled cookies on the page? Try commenting out the cookie enabled and cookie value checks and see if that makes any difference.

  7. Geoffsays:

    I prefer the idea of implied consent, basically anything to put fewer barriers in front of my visitors is a good thing. One thing this plugin doesn't appear to feature is the recognition of where a visitor comes from. In other words, if someone visits from say Australia there's no need for him to see any cookies message. Any plans to incorporate that feature in your plugin at all?

  8. Ulasays:

    Hi,

    I installed your plugin for a wordpress site and it worked, but after changing the default infos it's no longer visible. Can you help me? Do you have you clue what could be wrong?

    The adress is http://www.open5.pl

    Thank you!

    Ula

  9. Hmm.. I suspect that there is an incompatibility a certain character in Polish which has triggered a Javascript error which has caused the cookie message not to show.

    I can see the code in the source of your site, and it looks like the error occurs after "aktualnymi", Javascript does not seem to like the character after it. Did you insert a newline or carriage return? Judging by the sentence construction I'd guess not. I'll take a look and get back to you.

    As a side note, I will be releasing a new version shortly which fixes a problem with incorrectly escaped characters and mobile integration which may help. Watch this space.

    Tim

  10. Filipsays:

    Hello!

    I need your help with eu-cookie-law. I want to put this banner on my site, but not on the top of the page because it covers buttons on the page. Can you explain me how to (which value to change) or make for me some code to put banner position little down, or on the bottom of the page. I know taht is very easy for coders but not for me.

    Thank you!
    Filip

  11. Hi,

    First of all thanks for this great plug-in. There is one problem, when I activate the plug-in my WordPress admin bar at the top of my website dissapears. Do you know what i could do about that?

    Thanks,
    Martijn

  12. Hi Martijn

    There was a bug that removed the admin bar, it was a test line that I added during development and forgot to remove. Version 2.01 has been committed to WordPress repository and fixes this. Please update from WordPress.Org and the admin bar will be shown again.

    Tim

  13. Used this awesome plugin for cookie on my website works just super. Thanks guys.

  14. Hi Tim, I installed the plugin in my dev environment and it is displaying some PHP notices when WP_DEBUG is enabled. I normally like to correct this things, went ahead, and ended rewriting the whole plugin.

    You can take a look at https://github.com/brasofilo/European-Law-Compliance-Message. The readme file has a summary of the changes. I modified the cookie checking scheme, but am not really sure. If you like the result, we can continue the conversation at GitHub.

    Cheers and thanks for sharing  :) 

  15. Alexsays:

    Hi

    Thanks for handy plugin. Is it possible to put message on the bottom or side of the page?

    Best
    Alex

  16. Techmantiumsays:

    Yes you can, all you need to is change the CSS. Try adding

    #cookie {position:bottom}

    to the custom stylesheet to have it positioned at the bottom, or

    #cookie {top:0;left:0;width:200px;height:100%}

    to have it positioned on the right and 200px wide. I haven't tested this, but it should work.

  17. nichesssays:

    Hi,
    thanks for your great plugin.

    I would like to know, if the incompatibility to certain characters is still observed?

    The plugin seems to work in admin mode but not when logged out.

    http://www.brazgotina.net/

    Cheers

Leave a Reply