How to add a cookie popup in WordPress [Step-by-step Guide]

Pretty much every website you visit nowadays will have a little box pop up at the bottom of the page telling you about the cookies that the site uses. Although it is unlikely anyone is going to have a problem with websites using cookies it is still necessary for most website owners to have a cookie popup on their website.

There are a few plugins for WordPress that allow you to create a cookie popup on your website, but the best we have come across is CookieYes by WebToffee.

CookieYes Plugin

We found this plugin to be the easiest to setup and use. You can choose to have either a popup, widget or bar. You also get to customize the fonts, colours and content. The end result gives you a really professional looking cookie notice that provides you, as a website owner, with everything you need to comply with different laws on data collection. They also have a great tool for creating a cookie policy which we will cover in step #4 of our setup guide below.

Setting up the CookieYes plugin in WordPress

Follow the steps shown here and you will be able to setup a cookie notice to make your website GDPR compliant.

#1 – Install and activate plugin

Login to your WordPress website and click on the “plugins” tab in the left side bar. Click on the “Add New” button and then in search bar type “CookieYes”. It should appear as the first result.

Plugin

Click “Install” and once the plugin has been installed click “Activate”

Activate

#2 Set up the plugin

If you have completed step one then you should now see a new tab in the left hand sidebar menu called “GDPR Cookie Consent”. If you click this tab it will open up the plugin settings page. There are six different tabs in the settings page, but we only need to focus on the first three.

General

General

In the “General” tab you can choose whether or the cookie notice should be enabled. By default it will be enable after activating the plugin. If you don’t want it active straight away then you can turn it off while you finish setting everything up.

Next you can choose the type of law you want the cookie notice setup for. If your not sure what to select here then just set “GDPR”, unless your website is targeting people in California then you should select “CCPA & GDPR”.

It also gives you a couple of options to hide the cookie notice after a certain period of time or when the user starts to scroll. You should keep these options set to “No” because the law says that you should get consent from your website visitors, and by making the cookie notice disappear could land you in trouble.

Customise Cookie Bar

Next click on the “Customise Cookie Bar” tab. This is where you can change how the cookie bar will look on your website.

Customise Cookie Bar

This plugin comes already setup for you, so you don’t need to worry about what message to type as it is already done. If you want to change the wording then you can, but keep in mind that the message contains code that is use to style your message and make the buttons appear. So if you’re not sure what you’re doing just leave it how it is.

Next you can choose the colour of the cookie bar and the text colour. Try and make the cookie bar stand out from your website slightly so it is clear for visitors what it is. People are used to seeing cookie notices now, so the most important thing when choosing your colours it to make it stand out from your website so people can easily identify it as a cookie notice.

You can also select a specific font or just leave it as the default theme font of your website.

Finally you need to choose whether you want it to appear on your site as a popup, banner or widget. A popup will display over your website when it loads forcing the visitor to take action. A banner or widget will appear at the top or bottom of your website, and although they will be intrusive on your content the website visitor can still scroll and navigate the site. The most common places to put a cookie notice are in the footer, and if you are using a widget in the footer and on the right side. So if you’re not sure just choose either one of these setups.

You can also choose whether you want the cookie notice to animate in or just appear. Either option doesn’t make too much difference in this case.

If you want your visitors to easily be able to view/edit/revoke their preference then you can click on “Revisit consent” and check the box next to where is says “enable revisit consent widget”.

Customise Buttons

In the “Customise Buttons” tab you can change the colour and text of the buttons. If you are using the default message then you only need to change the “Accept All” button and the “Settings” button. Again this is all setup for you, and you probably don’t need to change anything here unless you really want to. If you have changed the background colour of the cookie bar then it may be worth changing the colour of the “Accept All” button just to make sure it stands out. The “Settings” button should have a much more subtle colour so it doesn’t distract from visitor accepting your cookie notice, but simply give them an opportunity to view settings should they wish to.

Customise Buttons

Feel free to change the settings here if you are not happy with the look of the notice on your website, but for most people you can probably just keep them all as they are. You will also see a link called “Read more”. This is where you can link to your cookie policy. If you don’t have a cookie policy don’t worry. A great feature of this plugin is it will actually create your own personalised cookie policy for you! (coming up in step five).

The other tabs gives you some advanced settings and documentation about different things you can do when setting up the plugin. Unless you run into any problems, then you can ignore these tabs and move on to the next step. The final thing to do it just click on the “Update Settings” button at the bottom.

#3 Scan for cookies

Now you have the cookie bar all set up, it’s time to customise the settings to your website. The law says that you need to inform your visitors about the cookies that your website uses. Do you know what cookies your website uses? Probably not, but don’t worry. This plugin will scan your website and collect all the information about the cookies that it is using.

In order to do this you need to go back to the sidebar and click on the “Cookie Scanner” under the “GDPR Cookie Consent” tab. You will need to connect to a CookieYes account to scan your site, but it’s free and easy to do. Just click on “Connect & scan” and follow the instructions.

Cookie Scanner

Once you have created an account you will be sent back to the “Cookie Scanner” page where you can scan your website by clicking on the “Scan website for cookies” button. Once you do this, go and grab a coffee as it will usually take 5 to 10 minutes to complete the scan (but it could take a lot longer!)

Cookie Scan

Once your site has been scanned you will get an email. Once received go back and refresh the page and it will show you all the cookies it has found. Now you want to add these cookies to your cookie list. Again, this plugin makes this super easy. Just click on the “Add to cookie list” button in the top right, select “Merge” and click “Start import”. Done!

#4 Create cookie policy

This is a really cool feature of this plugin, and lets you create a cookie policy for your website in just a few seconds.

Back to the sidebar, click on “Policy generator” under the “GDPR Cookie Consent” tab. Once again all the content is ready to go, but if you want to change, add or remove anything you can do it here. If not just click the “Create cookie policy” button and it will generate a new page in your website.

Cookie Policy

It will take you to the page that it has created and you just need to click publish for this page to be live.

Now we have created a cookie policy, we want to add it to our cookie bar so people can read it if they want to. So let’s head back to “settings” under the “GDPR Cookie Consent” tab and go to “Customise Buttons” and click on “Read more”.

Read More

Where it says “Read more” in the text field, change this to “Cookie Policy”. Then go down to where it says “URL or Page?” and select page and choose your cookie policy page that you just created.

If you have changed the colour of the cookie bar then you should also make sure the the text colour of our cookie policy link stands out from the background. Once done click the “Update Settings” button.

Next we need to add the cookie policy link to the message that appears on the cookie notice. So go back to the “Customise Cookie Bar” tab and add the following somewhere suitable within the message:

View [cookie_link]
Cookie Message

Once again click on the “Update Settings” button.

#5 Check it’s working

You have now setup your cookie notice, customised the settings and created your own cookie policy. The only thing left to do is check how it looks on your website.

Cookie Notice

If you’re not happy with how it looks just go back and amend some of the settings, otherwise sit back and relax knowing that your website is now compliant.

Did you manage to get your cookie bar setup? Let us know in the comments if you found this guide helpful!

Leave a Reply

Your email address will not be published.