The easiest way to add a cookie consent popup for your WordPress site is here. This process will hardly take 2 minutes to complete. First, we will get the JavaScript for the cookie consent and then we will add it to our site through ‘functions.php‘ in the footer. This will automatically install a cookie on the user’s browser.
We are not going to waste your time explaining whether you need really to add a GDPR compliance notice for your websites. We may have a separate article on that.
In short, Every Single Website on the Internet (except those which are strictly informational without any user involvement and tracking) needs acceptance from the user for its policies.
Before we proceed, we sincerely thank ‘WebsitePolicies.com’ due to which we are able to set our Cookie Policy Notice in just under 2 minutes.
There is one more website ‘osano.com’ which also provides a similar service. You can also test that. This tutorial is based on websitepolicies.com. If someone needs one more tutorial for osano.com, let us know in the comments.
Table of Contents
Publish Policy Page
Your site must have a Privacy Policy Page which clearly mentions what data you collect and how are you going to use that data.
You can also have a separate Cookie Policy page that complies with GDPR, CPPA, and all other individual country policy laws. So have that Link ready.
Generate Java Script
Visit this Link: https://www.websitepolicies.com/create/cookie-consent-banner. Let us generate our Custom JS Script for Free!
In any case, if you are NOT able to find this website we referred to, you can directly use the code that we provide. More on that at the end of this article.
Welcome Screen and Position
You can select the Position and Styles you like on your website. It cab be Tool Tip or Bar type.
Layout and Color
Here you can set custom Colors or Prest Colors. You can also change them through CSS Later.
Policy Link with Custom Text
Here you will add the link to the Cookie / Privacy Policy page of your website. You can also change the message that appears to the user. This can be changed later too. You can also visually see how the consent appears on the screen.
Copy the Java Code
The code which will be generated will be unique for everyone due to the color, link, position preferences you chose.
PHP Code
Add the below code to your Child Theme’s functions.php or through the Code Snippets Plugin. Before saving, Paste the code you copied from the websitepolicies.com website to line 5 in the below PHP. Save it and Test it. It will work.
/* Name The Footer Code Here. Also Change Function Name Below */
add_action('wp_footer', 'wpclimax_footer_function_cookie_notice');
function wpclimax_footer_function_cookie_notice(){
?>
PASTE THE CODE HERE INCLUDING THE SCRIPT TAG
<?php
};Congratulations! You have now successfully added Cookie Notice for your site in just under 2 minutes. Below we are going to optimize it further. You can follow these steps only if necessary.
Run Offline (Optional)
As you can see in the code provided, the Javascript is called from an external website with this link: https://cdn.websitepolicies.io/lib/cookieconsent/1.0.3/cookieconsent.min.js
Also, at the same time, in order for the JS to work it needs CSS too, and the same is also downloaded from this external address: https://cdn.websitepolicies.io/lib/cookieconsent/1.0.3/cookieconsent.min.css.
So, each time, the Cookie Consent loads to any user, the JavaScript and CSS will load from the mentioned website. There is nothing wrong with that. The site is already fast and it loads through CDN. If you want to make it offline, follow this step below.
Download JS & CSS
On any browser, open the JS link mentioned above. Save it (Ctrl+S). By default, the code will be saved with the ‘.js‘ extension. In the same JS link, just edit the URL end to .css instead of .js. Also, download that CSS file. Now you’ll have two files ready.
Edit JS
This step can also be done after the 3rd step in Hosting Control Panel itself. In case you don’t have access to ‘File Manager’ for your hosting and if FTP is the only option, you will edit the JS file on your computer before uploading.
Once JS is downloaded, open it. Search for “CDN” in the code (Use any WordPad Software). You will find a link to the CSS file. Replace that link with the new link to the CSS file on your hosting server.
Note: It is better to add an absolute path (‘https://site.com/folder/file.css) for the URL instead of relative (‘/folder/file.css’)
Upload JS
Once the JS file is updated with a proper link for the CSS file, upload the JS file to your root directory/ public_html folder/ or any custom folder. Make sure that the folder you saved the JS file has proper permissions. If you created a separate folder, don’t forget to disable directory indexes through ‘.htaccess’ for that folder.
Update the Code
In case you have options to edit files within your hosting panel, you can upload files directly and can do the necessary changes in the panel itself later instead of doing it prior to uploading.
Example
The below example loads JS and JS from an external source.
/* wpclimax.com Cookie Consent Notice (Loads JS from CDN) */
add_action('wp_footer', 'wpclimax_footer_function_cookie_notice');
function wpclimax_footer_function_cookie_notice(){
?>
<script src="https://cdn.websitepolicies.io/lib/cookieconsent/1.0.3/cookieconsent.min.js" defer></script><script>window.addEventListener("load",function(){window.wpcc.init({"colors":{"popup":{"background":"#000000","text":"#ffffff","border":"#000000"},"button":{"background":"#ffffff","text":"#000000"}},"position":"bottom","content":{"href":"http://wpclimax.com/privacy-policy/","message":"We rely on Cookies to Provide Better User Experience","button":"I Understand","link":"Learn More"}})});</script>
<?php
};Below is an example of the Code we use on our Site. We are loading both JS and CSS from our own server.
/* wpclimax.com Cookie Consent Notice (JS Loads from our Server)*/
add_action('wp_footer', 'wpclimax_footer_function_cookie_notice');
function wpclimax_footer_function_cookie_notice(){
?>
<script src="/downloads/cookieconsent.min.js" defer></script><script>window.addEventListener("load",function(){window.wpcc.init({"colors":{"popup":{"background":"#000000","text":"#ffffff","border":"#000000"},"button":{"background":"#ffffff","text":"#000000"}},"position":"bottom","content":{"href":"http://wpclimax.com/privacy-policy/","message":"We rely on Cookies to Provide Better User Experience","button":"I Understand","link":"Learn More"}})});</script>
<?php
};For any reason, if the said site is not available, you can self-host the JS as in the second example. You can download the JS from here. You also need to download the CSS (from here) and link the JS to the server’s CSS by editing JS code as mentioned in previous steps.
ToolTip Format
<script src="https://cdn.websitepolicies.io/lib/cookieconsent/1.0.3/cookieconsent.min.js" defer></script><script>window.addEventListener("load",function(){window.wpcc.init({"border":"thin","corners":"small","colors":{"popup":{"background":"#f6f6f6","text":"#000000","border":"#555555"},"button":{"background":"#555555","text":"#ffffff"}},"position":"bottom-right"})});</script>Bar Bottom
<script src="https://cdn.websitepolicies.io/lib/cookieconsent/1.0.3/cookieconsent.min.js" defer></script><script>window.addEventListener("load",function(){window.wpcc.init({"border":"thin","corners":"small","colors":{"popup":{"background":"#f6f6f6","text":"#000000","border":"#555555"},"button":{"background":"#555555","text":"#ffffff"}},"position":"bottom"})});</script>PushDown Top
<script src="https://cdn.websitepolicies.io/lib/cookieconsent/1.0.3/cookieconsent.min.js" defer></script><script>window.addEventListener("load",function(){window.wpcc.init({"border":"thin","corners":"small","colors":{"popup":{"background":"#f6f6f6","text":"#000000","border":"#555555"},"button":{"background":"#555555","text":"#ffffff"}},"position":"top","pushdown":true})});</script>CSS Customize
You can customize it further using CSS. If you need any suggestions, let us know in the comments.