How to install a simple cookie consent banner on wordpress
You’ve seen them on every website, these banners popping up as soon as you enter asking your consent before continuing. A Cookie Consent Banner is a must-have nowadays.
If you are wondering why this is actually necessary nowadays, please go ahead and check out my post about the GDPR for an explanation on why you need to take GDPR seriously for your website or blog even if you are not selling anything or collecting a mailing list.
In this article I will keep it short and sweet (haha failed!), and let you guys see how to simply add this banner onto your WordPress site.
(Pssst, scroll to the end to download the PDF version of this post!)
First, what are cookies?
I always found the word cookies both sweet, and confusing. I mean, we all know what cookies are, you have chocolate chip for instance, and they taste divine!
But we are not talking about a cookie recipe here, these cookies are more dry and virtual.
These cookies are small text files that are used to store small pieces of information. When a website is loaded on your browser, the cookies are stored on your device.
The cookies then help to provide a better user experience, to understand how the website performs and analyze the statistics. Marketing cookies are used to track your movements online, and to show you more targeted ads.
E.g. how miraculously after I browse for certain a kind of shoes online, my Facebook feed all of a sudden knows to show me those exact shoes in ads. Could be creepy, but could also be convenient. You decide.
How to install a Cookie Consent Banner on WordPress
Because of GDPR, we need to have a consent from our web users, and they need to be able to choose what data your website stores. So to be GDPR compliant, you need a cookie banner on your website.
For my WordPress I have used the plugin called “GDPR Cookie Consent”, which is a free download and pretty customizable. Let’s go through the steps how you can easily set this up on your WordPress.
It will look something like this:
#1 Download and install the FREE “GDPR Cookie Consent” Plugin
You can find the plugin here. Simply save it on your computer, go to your WordPress account and select Plugins: Add New.
You’ll want to select “Upload plugin”, browse to find the file on your computer, and hit “Install now.”
#2 General Settings for your Cookie Consent Banner
After installation is activated, you’ll see the “GDPR Cookie Consent” on your WordPress Menu on the left side as its own item. It’s time to start modifying your banner and making sure it fits your brand.
The first menu item on your GDPR Cookie Consent menu is “Cookie Consent Settings.”
The first tab open is “General”, and here you can modify the following under the first section, “Cookie Bar”:
Cookie bar is currently on or off (do you want the banner to show, or not). So make sure it’s ON.
You can choose if you want to see the Cookie bar as a banner, pop-up window, or a widget. I have chosen a banner, which shows up at the bottom of my page, in the Footer.
You can also choose it appear in the Header, on top of the page. If you choose a pop-up you can choose whether this will be done with an overlay or not. Basically if you choose an overlay, the rest of the site is blurred or blocked until the user makes a choice and clicks the Cookie bar.
A sure way of users not surfing further without checking out those cookies. Both have their benefits, up to you how you want this to be shown on your site.
You can choose if this is Sticky or Animated, meaning static or with some kind of movement. I chose Static here when the page loads, and animated on hide (I think those were also the standard settings).
Then it asks if you want to automatically hide the cookie bar after a while, assuming that you have consent since the person is still there. I have chosen NO here, because I do want an action from the user consenting to the cookies.
Same with the question if you want to make the assumption that user accepts by scrolling down. You know what assuming makes us?
Show Again tab
The “Show Again tab” is a tab at the bottom of your page that you can install to be visible all the time, or not.
You can choose to have this on or off, to have it shown on the right or left side of your site, how much from the sides you want it (standard 100px), and you can modify the text of the tab as well.
Remember to hit “Update Settings” every once in a while.
Here above you see the tab on the lower right hand corner.
Here you can choose whether you want the banner to re-load after accepting by scrolling, reload the banner after the Accept button has been clicked, or reload after Reject button has been clicked.
#3 Customize Cookie bar
Then it’s time to customize the cookie bar to make sure it matches the rest of your website.
You can choose a Heading for your banner or message. I have actually left it empty, I found that the actual text was enough.
You can customize the message for the banner. I have left it standard.
You can customize the Cookie Bar color by selecting one of the standard colors, or selecting a color you use for your brand. For me it’s selected as the gray-green I use a lot on my site.
Same with text color, this you can customize as well.
There are few font options, but it also uses the Default theme font if you choose that one.
You can add other options onto your Cookie banner, such as the option “Reject” and “Read more” which are not added per default.
After modifying your buttons below, you can copy the short link (so ‘cookie_reject’ and ‘cookie_settings’) which you see on the gray background, and paste them here after the text (after the …”5px]).
Remember to take the [ ] symbols also with you when copying. This will make the chosen buttons / links appear also on the Cookie banner.
#4 Customize Cookie Consent Banner Buttons
The next step is to customize the buttons shown. There are four sections here, Accept button, Reject button, Settings button, and Read More Link.
You can modify the text color and the button color. Here I’m using the same color button as I use on my website in general, to keep it consistent.
There is a choice to show this as a link or a button. I think button is slightly clearer, so hence my choice for that on my banner.
You can also choose the size of the button, varying from small to XL.
The Reject button has the same choices for layout.
The settings button links to your Cookie settings information, and you can choose this to be a link, or a button. Here I have chosen it to be a link, and the link color and size can be customized.
The link will lead the user to your Cookie settings, which is a pop-up. In this pop-up the user can choose which cookies they consent to; only the necessary cookies, or also the Non-necessary cookies, such as used for marketing purposes.
Read more Link
#5 Advanced Cookie Consent Banner settings
The Advanced tab allows you to reset all of the values to the basic settings.
#6 Help Guide
Under this tab you’ll find short codes should you need them, and Help documents links for more information. The short codes you can copy-paste on the Cookie bar message, see #3 Customize Cookie bar.
#7 Cookie List
In order to comply with the GDPR and the Cookie law, websites have to inform users what kind of cookies they are using.
This means that you have to know what cookies your site is using, and you have to let the users decide whether they want to consent to all of the cookies, or only the
Necessary cookies (performance related for example, but not marketing or analytics Cookies). The user should find information about the cookies, what they are used for, and for how long they are stored for.
To find out what Cookies you have on your site, you can use the free tool via CookieServe for example.
When you enter your domain and press “Find Cookies”, the site will generate a list of Cookies you have, the description of each Cookie, duration and the type.
Some are used for performance, and some are used for Google Analytics for example.
As you can see, my list of cookies is not so long, just for Google Analytics and performance.
What you can then do, is to go back your GDPR Cookie Consent menu, and select Cookie list. Here you can add the information you received from the cookieserve by selecting the “Add new” button.
You add the name of the Cookie as a title, the description in the text field, and on the right hand side you can add a ID for the cookie (I just used the name), the type of the cookie (GDPR, Analytics, 3rd party cookie etc), duration of how long it is stored, and the sensitivity (whether it’s necessary or non-necessary).
Then eventually you will have a list of your cookies showing as below.
#8 Policy Generator
As you can see, it’s already pre-populated for you. On the left hand side you can see all of the different paragraphs that are generated, and you can choose to exclude some of them if you wish.
By clicking on the blocks on the left side you can see the content of that block appearing on the text field.
Make sure to add your website there where it says “Your consent applies to the following domains”
Make sure to add it into the footer menu, or in any other menu where you want this page to appear, if you want it to be easily accessible all the time.
Some of the fields are automatically generated. You see for example below, within the What types of cookies do we use “The below list details the cookies used in our website.”
Also the customer consent status will appear for the user based on what preference they chose.
Above you see the adjusted banner with Accept and Reject buttons.
#9 Non-necessary cookies
Here you can choose whether you want to able or enable the non-necessary cookies. By default there is already a description of what kind of cookies these include.
#10 Necessary cookies
The necessary cookies also include a ready-made description of what they are, and what they are used for. You can leave as is, or modify if you wish.
#11 Privacy Overview
The Privacy overview is the text that appears on the pop-up when the Cookie Settings is selected from the Cookie banner.
As with the other fields, this is pre-populated, and you could leave the text as it is, or modify if you’d like to say something more in your own tone of voice.
That’s your Cookie Consent Banner, guys!
That’s it, we have reached the end. Did you manage to make everything OK?
It’s actually super easy, right? You now have a solid Cookie Consent Banner on your site, congrats!
And it’s good to know that you are GDPR compliant, you have your cookies in a row and you can actually sit back enjoy them yummy chocolate chip cookies to rewards yourself after all this work!
If you have any questions, you know where to find me!
Need help with your website?
Contact me and let’s work together!
Your free resources
Do you want to DIY your website, but need some tips and tricks on how to do it? With this FREE Workbook you will learn the 10 easy steps to DIY your own website today!
I won’t spam! Unsubscribe anytime.