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".
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.
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:
You can change this text from within the plug-in settings page.
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.
See it in action:View on CodePen
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 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 as it is shown and finally the cookie is set so that the message isn't shown again.
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 (6.72 kB)
If you are using the WordPress plugin:
- Upload all files to the '/content/plugins/' directory
- Activate the plugin through the 'Plugins' menu in WordPress
- Configure the text through the 'Settings' menu under 'EU Cookie Message'
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.
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.
Using an xHTML Transistional Skeleton template it should be structured similar to this: