Web Development: Create a WordPress Cookie Consent Popup

Create a WordPress Cookie Consent Popup

Have you ever come across a website where a small window pops up, asking you if you’re okay with them storing your cookies? And that window does not go away unless you agree or choose some other option.

That is exactly what we call a "cookie consent popup".

In this guide, I'll explain how you can add a cookie consent popup to your WordPress website in a few easy steps.

However, before we proceed on to adding our WordPress cookie consent popup, we first need to understand why is there a need for cookies in the first place.

What are Cookies?

Simply put, cookies are small files stored by your web browser that let a web server keep track of the way you use its site.

Accessing a website from your browser may seem like a simple process, but behind the scenes it is slightly more complex. A whole series of back and forth communication takes place between your browser and the server before a website is displayed on your screen.

The moment you enter the URL, your browser will ask for some information from the server where the website is hosted. The server, on the other hand, will asks for some information in return from your browser.

Once both of the parties are satisfied and shake hands, the website you want to visit becomes visible.

This is where the cookies play their part. They have optimized the system a little bit.

Cookies store all the necessary information regarding the user's interaction with the website and make that information available to the server so it can present a consistent experience across all the pages of the site and across different sessions.

When a user accesses a website for the first time, a cookie is created on their computer. If they access the same website again, the cookie will be sent to the server with information about how they used the site previously. For example, if you add an item to your cart in an online store, that item will often be listed in a cookie. That way when you navigate to another page or even come back to the store another time, your item will still be in the cart.

Cookies were initially developed to enhance the user experience and did not require permission. However, cookies are increasingly used to track users in ways they might not expect. With privacy concerns becoming more and more important in recent times, some jurisdictions require that you have the user’s permission before you send and receive cookies from their computer.

With that being said, let’s get to building our very own WordPress cookie consent popup and giving your users a piece of their much-deserved privacy.

But, does your website require cookie consent in the first place?

Does Your Website Need a Cookie Consent PopUp?

Let’s be honest here. Most websites use cookies. However, if you're not sure, you can figure out if your website stores cookies or not. After all, it will not be the best use of time to develop a cookie consent popup for a website that does not use cookies.

To get to know about the cookie status of your website using Google Chrome, type in the URL and wait for it to load properly. Next, click on the lock icon next to the URL of your website. In the drop-down menu that pops up, you’ll be shown the number of cookies that your website is using.

If there are one or more cookies in use, and your website is used by people in the EU or in California, you'll need a WordPress cookie consent popup for your website.

Adding a Cookie Consent Popup to Your WordPress Website

WordPress allows you to add a cookie consent popup to your website in a few clicks. You won't need any programming knowledge for this. However, having general information about the WordPress plugins is necessary to optimize your WordPress use.

WordPress offers a wide range of plugins for integrating a cookie consent popup to your website.

For this tutorial, I will be using the free CookieYes plugin.

Installing the CookieYes Plugin

You can install this cookie consent popup plugin like any other plugin from the WordPress dashboard.

Hover your mouse over to the Plugins menu in the navigation bar on the left.

Select Add New and you will be taken to a new window for every possible free plugin that WordPress has to offer.

Search for the CookieYes plugin and install the first plugin that shows up.

Once it is installed, activate it and you’re good to go.

Now lets see what options this cookie consent plugin has in store for you.

GDPR Cookie Consent Settings

The plugin will appear in the navigation bar on the left once you have activated it. Hover your mouse over GPDR Cookie Consent and select Settings.

This is where you can customize your WordPress cookie consent popup for your website.

In the settings, you will see five other tabs, all of which provide different kinds of customization for your popup. In the General tab, you’ll be able to enable or disable the popup. It will be enabled by default when you visit the settings for the first time.

Let’s take a deeper look into all the customization options that the General tab has to offer.

General Settings

Other than simply enabling the popup, this tab allows you to select the type of law against which your website will accept cookies.

Each region has its own laws when it comes to cookies. So, you will have to look into it a little but before you select the most suitable option for your website.

Moreover, you can choose if the popup disappears after a while, when the user starts scrolling. If the popup disappears this way, this would mean that you are assuming the user has given you their consent to store their information.

It's not a good practice to assume consent in this way. In fact it's highly unethical, as the user here is not giving you direct permission so let’s keep this option disabled.

Now, let’s move on to customizing our WordPress cookie consent popup.

Customize the Cookie Consent Popup

This is how the popup will look in the beginning, right at the bottom of your homepage:

You can see that this is more of a banner than a cookie consent popup.

However, once the you've selected the Accept All option, the popup will disappear. It will not allow you to see any further customizations that you make to it. For testing purposes, you'll want to keep this popup visible so that you can see the changes you make. You can allow this by enabling the revisit consent widget.

This can be done through the Customize Cookie Bar > Revisit content tab.

This will allow you to keep a button on your website at all times from which you can access the popup menu. If you want, you can change the position of this button too. For this tutorial, it is located at the bottom left of the screen.

To turn the cookie consent banner into a popup, scroll down to the show cookie bar as option and select popup. You can then add an overlay to it if you want.

Adding an overlay to your WordPress cookie consent popup will stop the user from accessing the website until they take an action from the popup.

Other options on this tab will allow you to change the background color of your popup, the font color, and the font style. You can also add a custom message and a custom heading to your popup, an option you can utilize to strengthen your brand message.

But, are there any button customizations available for the cookie consent popup?

Customize Buttons

This is the third tab in the settings menu—it allows you to get creative with the buttons of the cookie consent popup.

By default, there will only be two buttons integrated into your popup menu.

Here’s how to add a new button:

Select the button that you wish to add from the Customize Buttons tab.
Copy the code enclosed in the brackets on the top of the page.
Head to the Customize Cookie Bar tab again.
Paste the code into the message box.

You can add four different kinds of buttons to the popup.

Let’s say we want to add a reject button to our popup for the users who don’t want their information to be stored on the servers. For that, we’ll add [cookie_reject] in the message dialogue box in the Customize Cookie Bar settings.

This is how that reject button will show up on your popup:

After integrating a button, you can change its size, background color, text color, and whatnot. You can even add a link to another web page where the users will be redirected when they click a specific button on your cookie consent popup.

Conclusion

A few easy steps and now you have a cookie consent popup integrated into your WordPress website. CookieYes was only one plugin. If you want, you can explore more cookie plugins that are available on WordPress.

There are also thousands of premium WordPress plugins on CodeCanyon that can help enhance your business's website. Have a look through this large collection of plugins, and you'll find helpful plugins in all different types of categories, from marketing to eCommerce to social media.

Here is one last tip: you should keep your cookie consent popup as simple and less intruding as possible. It helps with overall user experience. In fact, this tip is valid for other popups you want on your website as well.

Web Development

Friday, October 15, 2021