Show GDPR Cookie Consent in WordPress Without Plugin in 3 Easy Steps

show cookie consent in wordpress without any plugin

European Union has enforced General data Protection Resolution 2016/679. GDPR was first drafted to replace the old and outdated Data Protection Directive in EU law, and it was adopted by the parliament back in April 2016.

General data Protection Resolution governs everything related to privacy and data protection of every single individual living within European Union. Furthermore, it also has directives for the extreme penalties in case any business or enterprise is found guilty. For more in-depth information related to this resolution, you can visit the official EU website.

What is Cookie?

In a perfect world, the browser cookie would be something sweet and precious that Edge, Google Chrome or Firefox would shoot out of the screens that you could enjoy picking up on empty calories.

Unfortunately, we don’t live in a perfect world, and in a computing context, the term “Cookie” doesn’t refer to free desserts. They are actually very small files (usually between few bytes to few kilobytes) stored in your browser cache that can do lots of useful things but have also been scrutinized for potentially compromising the users’ privacy.

Browser cookies not only helps to identify your computer but they also serve the purpose of tracking your activity. Now, this is not always as serious as it sounds. The way it works is that when you visit any cookie-enabled website for the first time, for example, let’s say the Amazon. The site will put a cookie on your computer that contains a unique ID.

Amazon (and similar websites) uses this ID to keep track of your session so that the site knows which shopping cart is yours and what you looked at so that it can suggest important stuff to you which might be of your interest. The identifier and a cookie can also allow a server to keep track of your login so you don’t have to keep entering your password every time you visit the site. It can also remember how you customized the layout or appearance of the page previously.

Cookies also allow sites to figure out how many unique visitors they get as each unique visitor has their own ID which you might have already guessed is stored in their browser cache. All these trackings are important for webmasters who need analytical data for business development.

How to Show Cookie Consent in WordPress Without Plugin?

show something like this

The fundamental criteria to comply with the guidelines of GDPR is to show the consent to your website visitors. You need to tell your visitors about all the information which you or any other 3rd party application/service may be collecting from them. Furthermore, you also need to ensure that you give them the appropriate and easy way to withdraw from the consent.

So now you know why it’s freaking so essential to show cookie consent in WordPress websites.

Note: This tutorial is intended for those individuals who don’t want to use any premium or free plugin for this specific task. This tutorial is intended for only those who love codes and wants to get 100% control of their website and functionality.

So, without any further delay, lets dive in.

Step 1. Introduction to Cookie Info Script

It’s a dependency free ( bye, bye jQuery ), lightweight and super easy to customize javascript. It will help your website to comply with new EU Cookie law and disclosure policy. Furthermore, it’s cross-browser compatible, mobile responsive and works on any type of website without any sort of issues. Because it’s dependency free, it will never create any problems with any jQuery dependent functionality on your site.

This javascript supports data-attributes. You can modify or add more attributes to customize the look and feel of the cookie consent banner in your website. It supports a bunch of attributes, and few of them are font-size, font-family, text-align, height, position, message, more info, effects, etc. You can check the complete list here.

Step 2: Open Your Theme’s footer.php in Theme Editor

You don’t want to load any script in your site’s head section because then your site will get score badly in Google Page Speed test. So, I will show you how to add this script in the footer section of your site.

  1. Navigate to your website’s administration panel which should be yourdomain.com/wp-admin.
  2. Put your cursor on “Appearance” menu and from the sub-menu click on “Editor”.
  3. Now from the list of files shown in the right-hand side of the screen, search for footer.php and then click on it.
open footer.php file in wordpress theme editor
Click me to see me in full-size

In case you aren’t able to locate the file, please take a look at the above image. Just follow the pattern and you will definitely locate it.

Step 3. Add the Script to Show Cookie Consent Banner

Now copy the code provided below and paste it just above the “</body>” tag in your footer.php file.

<script type="text/javascript" id="cookieinfo"
src="https://cdn.rawgit.com/designvkp/CookieInfoScript/68f31f13/cookieinfo.min.js"
data-bg="#645862"
data-fg="#FFFFFF"
data-link="#F1D600"
moreinfo="enter the url of your privacy policy page"
data-cookie="CookieInfoScript"
data-text-align="left"
data-close-text="Got it!">
</script>
properly paste the code

Please don’t replace the source of the script unless you want to slow down your site. This script is being hosted on Stackpath CDN and in this way your website can maintain its initial speed even after implementation of this javascript file. You can also check the source code at the GitHub project page.

Make sure to replace text in “moreinfo” attribute (in the above code) with your site’s privacy policy page. In case you want to perform more customizations, then you can read the official documentation on how to do so.

Now clear your site’s cache if you are using any cache plugin like W3 Total, WP Rocket, etc. and then reload your website to see the cookie consent banner.

If you are facing any issue following any step in this tutorial, then please let me know about it in the comment section.

Written by .

Leave a Reply

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