A cookie notification banner is a common sight on websites these days.
It’s the little banner that appears at the top or bottom of a website and that asks you to confirm the use of cookies on that particular website.
Cookies are text files that browsers store on your computer when you visit a website. I understand that this sounds a little dodgy but it’s completely normal! Cookies are used on pretty much every website you visit. They’re used to collect information about the way you use a website with the aim of helping to improve the quality of your browsing experience.
If you are using cookies on your website then you need to have a cookie banner on your website to let visitors know this. This is to comply with the laws regarding the use of personal data (such as GDPR). Even if you have installed Google Analytics on your website, you are using cookies and therefore you need to set up a cookie banner!
There are many plugins out there that will help you to add a cookie banner to your WordPress website, but I personally think the easiest one to use is called Cookie Notice for GDPR. In fact, I use this plugin myself here on HollyPryce.com.
In this post, I am going to show you how to add a cookie notification banner to your WordPress website and customise the appearance of it.
How to install the Cookie Notice plugin
To install the Cookie Notice plugin, hover over Plugins in the left-hand menu of WordPress and click Add New.
Once on the plugins page, use the search bar to search for a plugin called Cookie Notice for GDPR. It looks like this:
Once you have found the Cookie Notice plugin, click Install Now and when prompted to, click Activate.
Activating this plugin will automatically add the cookie banner to the front-end of your website. It will be fixed to the bottom of the screen (i.e. will still be visible even as you scroll down the page) and will look something like this:
Now let’s take a look at how we can change the content of this cookie banner and customise its appearance…
How to configure your cookie banner
When you install and activate the Cookie Notice plugin, a new settings page is added to your admin area. To access this page, hover over Settings in the left-hand menu of WordPress and click on Cookie Notice.
Customising the banner message and button text
The first thing you can customise is the text that appears on the banner itself. The default text works well but if you want to change it, have a look online at the cookie banners on other websites and see what wording they use.
Then you can change the text that displays on the button. By default this is “Ok” but you may want to change this to say “I agree”, “I understand” or “Continue”.
Adding a link to the privacy policy
Next you will see that you have the option to link to your privacy policy. I highly recommend that you do this so that it is easy for your website visitors to find out more about the cookies used on your website. (And if you don’t already have a privacy policy on your website, you need to set one up!)
To add a link to your privacy policy, tick the box next to this setting. This will reveal some more settings.
Firstly you can customise the text that shows on the privacy policy button. This is simply “Privacy Policy” by default, but you could change this to “Find out more” or “More information”. Alternatively, if you have a cookie policy that is completely separate to your privacy policy, you might want to change this to say “Cookie Policy” and then link to this page instead.
Next, you need to choose where this link will take the visitor to. You can either choose Page link and then select a page from the list of pages on your WordPress website, or you can choose Custom link and manually enter a URL.
Finally, you can choose whether you want the privacy policy link to open in a new tab (_blank) or in the same tab (_self).
Refusing and revoking the use of cookies
In some cases, you may want to give your users the option to refuse the usage of the cookies on your website. To enable this option, tick the box next to the Refuse cookies option.
This will then reveal the option to change the text that will display on the refuse button. You might want to change this to say something like “I refuse cookies” or “Disallow cookies”.
If you do choose to allow people to refuse the use of cookies, you can also give them to revoke this consent, regardless of whether they have initially accepted or refused the use of cookies.
To do this, tick the box next to the Revoke cookies option. This will reveal the option to change the text that displays on the revoke cookies button and the option to display the revoke cookies button automatically or manually.
If you set this to automatic, the button will stick to either the top or the bottom of the page. However, if you set this to manual, you can use the shortcode provided to place this link anywhere on your website, such as in the footer.
Something else you need to be aware of is if you allow users to refuse the use of cookies, you need to make sure that you place the codes and scripts that add cookies to your website (such as your Google Analytics code) into the Script blocking section of the Cookie Notice settings page.
If you don’t place these codes here and you just have them within your theme files, the cookies will still be in use even if the user chooses to refuse the use of them. So really, you aren’t giving them a choice at all!
When the user accepts the use of cookies, these codes and scripts will be added to your website. But they won’t come into effect until the page is reloaded. So, if you want to force the page to reload after the user has accepted the use of cookies, tick the box next to the Reloading option.
If you don’t want the user to have to click whether or not they accept the use of cookies, you can set it up to automatically accept the use of cookies when the user scrolls down the page. If you enable this feature then you can customise how far down the page the user has to scroll before the cookie banner disappears and automatically accepts the use of cookies for the user.
Other settings
There are a few other configuration settings that you can customise for your cookie banner.
Firstly, you can choose how long that cookie should be stored for. When the cookie expires, the cookie banner will be shown to the user again and they must once again accept (or refuse) the use of cookies.
Next, you can choose where whether the plugin scripts are placed in the header or footer. Finally, you can choose to delete the data of this plugin when it is deactivated.
How to customise the appearance of your cookie banner
Further down the Cookie Notice settings page you will see some settings that will allow you to customise the appearance of your cookie banner.
Firstly, you can customise the position of the cookie banner on your website. Regardless of whether you choose top or bottom, the cookie banner will be set to be fixed so that the user can clearly see it, even when scrolling.
Then you can choose whether you want the banner to fade out or slide out when the visitor clicks the acceptance button. If you don’t want any animation to take place, set this to None.
The next few settings relate to the buttons within the cookie banner. Firstly you can choose the style of the buttons. By default, Bootstrap buttons are blue and WordPress buttons are white. However, if you’d rather customise the style of these buttons yourself using CSS, select None and then choose a CSS class that can be applied to the buttons for styling purposes.
Finally, you can change the colour of your banner. You can customise both the colour of the next and the background colour.
If you would like to make further changes to the appearance of your cookie banner, such as changing the font or the size of the next, then you will need to do this using CSS.
Hot off the WordPress!
Join my FREE email community today to receive helpful tips and advice on building and maintaining your website directly in your inbox every other Friday. Just pop in your name and email address.
Pin for later?
