Hello Sunil
How to add a cookie banner to your website

How to add a cookie banner on your WordPress website

You have probably noticed how it seems like every single website you visit nowadays includes some notification about using cookies. Now you might be wondering, does my WordPress site need one of those cookie consent notices? And if so, how can I actually create a cookie banner for my website?

The answer to the first question is “probably”. And as for the second question, that’s what this post is all about!

A ‘cookie’ consists of information downloaded on to your computer or smartphone when you visit a website. Developers and businesses regularly use cookies to enhance the user experience of a website and it can do a number of things such as:

  • Save user login details
  • Measure how often a user visits your site and which pages they visit
  • Target relevant advertising to your visitors

In this article, we will look at different options for displaying cookie consent notices on your WordPress website. We will also look at the text that should go in this notice. Before jumping into the subject let’s discuss few frequently asked questions:

What type of websites need a cookie banner ?

If your website receives visitors from the European Union, you probably need a cookie consent banner if you want to stay on the good side of European Union regulations.

Originally adopted in 2011 and expanded with the GDPR in 2018, the European Union’s rules on cookies essentially require that you get “clear, informed consent” from visitors in order to use cookies that track user data.

That’s technically not every single website, but with the popularity of tools like Google Analytics, Facebook Pixel, social media share buttons, and others, there is a fairly good chance that your website uses at least some tracking cookies.

What is the purpose of a cookie consent notices ?

The purpose of a cookie consent notices is to get informed consent to use cookies before visitors start using your site. So you need to display the cookie consent banner immediately upon a user’s first visit. Receive informed consent from visitors to use cookies. Usually, this is done by linking out to your privacy/cookie policy, as well as a button that indicates consent.

Let’s run through a few examples of how and where you can display your cookie consent notices on your website.

1. Cookie consent banner at footer (example)

Perhaps the most common location for cookie consent requests is in a fixed footer of a website. This footer notification would show up for a visitor the first time they visits your website. Kinsta uses an attention grabbing cookie consent banner at footer.

Cookie consent banner at footer (example) 

2. Cookie consent banner at header (example)

Another common location to see cookie consent notices is in the header of a website. This is immediately visible to any visitors to your site. As an example, the Honda UK has its cookie information contained within a thin bar at the top of its website:

Cookie consent banner at header (example)

3. Cookie consent banner at corner (example)

Some site include a pop-up box in a corner of their website to highlight their cookie policy. XelPlus has a box in the bottom left of its website that asks users to accept the use of cookies.

Cookie consent banner at corner (example)

We have seen yet different ways to add cookie consent banner on website. Now let us know, how you can add such cookie banner on your WordPress site.

How to display cookie banner on WordPress without any plugins

As with virtually all WordPress website features, there is a plugin for handling cookie consent notices. Actually, there are many plugins available to handle cookie consent notices. The general rule for WordPress is to use as little plugins as possible because every additional plugin adds up to loading time of your website.

So that here we will show you how to implement cookie consent banner on your WordPress website without using any plugins. We will simply add a piece of code to accomplish that.

Step 1: Visit Cookie Consent site and click on “Download” button.

Visit Cookie Consent site and click on Download button

Step 2: Select “Position” then click on the desired available options to show cookie banner on your website such as at top or bottom.

Select Position then click on the desired available options to show cookie banner on website

Step 3: Select your desired “Layout”, such as block or classic.

Select your desired Layout, such as block or classic

Step 4: Under “Palette” choose a color theme or create your own.

Under Palette choose a color theme or create your own

Step 5: Provide a link to your page about privacy/cookie policy.

Provide a link to your page about privacycookie policy

Step 6: Under “Compliance type” select Just tell users that we use cookies.

Under Compliance type select Just tell users that we use cookies

Step 7: Optionally, you can customize the text of the cookie banner.

Optionally you can customize the text of the cookie banner

Step 8:Finally, copy the generated code.

Finally, copy the generated code

Step 9:  Go to WordPress admin area and navigate to Appearance -> Theme Editor

Go to WordPress admin area and navigate to Appearance then Theme Editor

Step 10: Open up the header.php file and paste the code you have copied after the opening <head> tag.

Open up the header.php file and paste the code you have copied after the opening head tag

Step 11: Click on “Update File” to save.

Click on Update File to save

Step 12: Visit your website and you will see the cookie notice being displayed.

Visit your website and you will see the cookie notice being displayed

Conclusion

You have learned number of options for how and where to display your cookie consent notices on your WordPress website without using plugins. However, you need to make sure that it is displayed in a prominent way. Your website now complies with the European Union Cookie law and you became more comfortable with editing WordPress. There is no need to install a plugin if the same functionality can be achieved by adding a piece of code.

Similar articles you may like

Was this article helpful to you?
[Total: 0 Average: 0]

 

Sunil Pradhan

Sunil is a front-end developer, illustrator and an online entrepreneur. He is the founder of "Hello Sunil" where he shares his love of technology with the world. He loves to write technical how-tos and tutorials. He is open minded and willing to explore beyond his knowledge.

1 comment

  • Thanks for sharing this article. It helped me to add cookie banner to my WordPress site. This solution is more quick and I even do not need to install one more plugin for my WordPress site.