A cookie notification banner is a common sight on websites these days.
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”.
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.
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.
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!
There are a few other configuration settings that you can customise for your cookie banner.
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.