EU Cookie Law WordPress Plugin [Retired]

This tutorial and download shows you how to implement an 'implied consent' notification message using jQuery and includes WordPress plugin.

The Cookie Law

The Cookie Law was started as an EU Directive 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 into UK law. Each EU member state has done or is doing the same thing. Although they all have their 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 May 26th 2012.

The directive's requirements mean website operators must get "informed consent" from users before recording 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 also affected, so even if your website does not use cookies but you use Google Analytics (or possibly any other similar products), you still need consent from the user.

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

• Explicit consent means a website will not use 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 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 rely on implied consent, you must 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:

You can change this text from within the plugin settings page.

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

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 will not be displayed or shown again. The plugin and code set a cookie to determine if the message has been displayed. 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 expiration date.

The code is very straightforward; it first checks to see if cookies are enabled on the guest's 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 it is displayed, 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 Compliance Message.

EU Cookie Law Wordpress Plugin

Installation

If you are using the WordPress plugin:

1. Upload all files to the '/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 can customise the title, message, and close button text and change the visual style using a built-in light or dark theme or create 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's maximum page width. This is the maximum width that the text will occupy.

Message hovers over content: By enabling this option, the cookie warning message can be placed above your website header, pushing the header below the message. The default is for the message to "hover" on the website header.

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

Pure HTML & Javascript

You may need to edit the template or theme if you use the above code on a non-Wordpress website. 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, and the other includes 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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Your Title</title>
  <meta name="Description" content="Your description" />
  <meta name="Keywords" content="Your, comma delimited, keywords" />
  <meta equiv="content-type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" media="all" href="your-css-stylesheet.css" />
</head >
<body>
  <!-- YOUR CONTENT HERE -->  
  
  <script type="text/javascript">
    jQuery(function(){ 
      if (navigator.cookieEnabled === true)
      {
        if (document.cookie.indexOf("visited") == -1)
        {
          // The message
          jQuery('body').prepend('<div id="cookie"><div id="wrapper"><h2>Cookies on this website</h2>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>.

<div id="close"><a href="#" id="closecookie">? Close</a></div><div style="clear:both"></div></div></div>');
    
          // The CSS
          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:0 1%;float:left;}#cookie #close{width:9%;float:right;}}</style>');
    
          // Don't touch this
          jQuery('#cookie').show("fast");
          jQuery('#closecookie').click(function() {jQuery('#cookie').hide("fast");});
          document.cookie="visited=yes; expires=Thu, 31 Dec 2020 23:59:59 UTC; path=/";  
        }
      }
    })
  </script>  
</body>
</html>