How to Add a Cookie Banner to Your WordPress Website | WordPress
If you’re running a WordPress website, then you might be wondering how you can add a cookie banner to your site. Fortunately, this is a relatively easy process that can be accomplished in just a few steps. Keep reading to learn how to add a cookie banner to your WordPress website.
Table of Contents
Step 1: Choose a Plugin
There are a number of different plugins that you can use to add a cookie banner to your WordPress site. For the purposes of this tutorial, we’ll be using the Cookie Consent plugin. This plugin is free to use and is available from the WordPress plugin repository.
Step 2: Install and Activate the Plugin
Once you’ve downloaded the plugin, head over to your WordPress admin area and navigate to Plugins -> Add New. From here, click on the Upload Plugin button and select the plugin file that you just downloaded. Once the plugin has been installed, click on the Activate Plugin link.
Step 3: Configure the Plugin Settings
Now that the plugin is activated, you need to configure its settings. To do this, head over to Settings -> Cookie Consent from your WordPress admin area. The first setting that you need to configure is the Message Type setting. This setting allows you to choose whether you want to display a notice or a consent message. For most websites, choosing the notice option will suffice.
The next setting that you need to configure is the Message Text setting. This is where you’ll enter the text that will be displayed in your cookie banner. Be sure to include a link to your website’s privacy policy so that visitors can learn more about how you use cookies on your site.
The final setting that you need to configure is the Position setting. This setting allows you to choose where you want the cookie banner to be displayed on your website. The options are Top, Bottom, or Floating (which displays the banner in the lower-right corner of the screen). Choose the position that you think works best for your website
Why Are Cookie Popups Necessary?
Cookie popups are necessary because they inform users that your website uses cookies, and they give users the option to accept or reject those cookies. This is important because cookies can be used to track a user’s online activity, and some users may not be comfortable with that. By displaying a cookie banner, you’re giving users the opportunity to make an informed decision about whether or not they want to allow cookies on your site.
What Happens If I Don't Use a Cookie Popup?
If you don’t use a cookie popup on your WordPress site, then you may be in violation of European Union privacy laws. These laws require that websites obtain consent from users before using cookies for certain purposes. If you’re found to be in violation of these laws, you could be subject to fines.
How Can I Add a Cookie Popup to My WordPress Site?
Adding a cookie popup to your WordPress site is relatively easy to do. You can use a plugin like Cookie Consent to add a banner to your site that will inform users about your use of cookies and give them the option to accept or reject those cookies. Be sure to configure the plugin settings so that the banner is displayed in a location that makes sense for your website.
What Are Cookies?
Cookies are small pieces of data that are stored on a user’s computer when they visit a website. Cookies can be used for a variety of purposes, such as tracking a user’s online activity or remembering their login information.
Why Are Cookie Popups Necessary?
Cookie popups are necessary because they inform users that your website uses cookies, and they give users the option to accept or reject those cookies. This is important because cookies can be used to track a user’s online activity, and some users may not be comfortable with that. By displaying a cookie banner, you’re giving users the opportunity to make an informed decision about whether or not they want to allow cookies on your site.
What Happens If I Don't Use a Cookie Popup?
If you don’t use a cookie popup on your WordPress site, then you may be in violation of European Union privacy laws. These laws require that websites obtain consent from users before using cookies for certain purposes. If you’re found to be in violation of these laws, you could be subject to fines.
How Can I Add a Cookie Popup to My WordPress Site?
Adding a cookie popup to your WordPress site is relatively easy to do. You can use a plugin like Cookie Consent to add a banner to your site that will inform users about your use of cookies and give them the option to accept or reject those cookies. Be sure to configure the plugin settings so that the banner is displayed in a location that makes sense for your website.
Installing the Cookie Consent plugin is a great way to add a cookie popup to your WordPress site. This plugin will help you comply with European Union privacy laws and ensure that your users are informed about your use of cookies. Be sure to configure the plugin settings so that the banner is displayed in a location that makes sense for your website.
I hope this article has helped you learn how to add a cookie popup to your WordPress site. You may also want to check out our guide on how to create a privacy policy for your WordPress site. If you have any questions, feel free to leave a comment below. Thanks for reading!
How to Display WordPress Cookie Notice Without a Plugin
For PHP
<?php if ( ! isset( $_COOKIE['accept_cookies'] ) ) : ?>
<div class="cookie-notice">
<p><?php _e( 'We use cookies to improve your experience on our website. By browsing this website, you agree to our use of cookies.', 'textdomain' ); ?></p>
<a href="#" class="cookie-notice__btn"><?php _e( 'Accept', 'textdomain' ); ?></a>
</div>
FOR CSS
<style>
.cookie-notice {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: rgba(60, 60, 60, 0.8);
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
z-index: 999999000000000 !important; /* has to be the highest z-index possible */
}
.cookie-notice p { margin: 0;}
.cookie-notice__btn { font-size: 14px; text-decoration: underline; cursor: pointer; }
</style>
FOR JS
<style>a
<script type="rocketlazyloadscript">
function setCookie(name,value,days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca<i>;
while (c.charAt(0)===' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
document.cookie = name+'=; Max-Age=-99999999;';
}
function acceptCookies() { setCookie('accept_cookies', '1', 30); }
var cookiebar = document.querySelector('.cookie-notice');
if (cookiebar) { cookiebar.addEventListener('click', acceptCookies, false); }
</script>
<?php endif; ?>
.cookie-notice {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: rgba(60, 60, 60, 0.8);
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
z-index: 999999000000000 !important; /* has to be the highest z-index possible */
}
.cookie-notice p { margin: 0;}
.cookie-notice__btn { font-size: 14px; text-decoration: underline; cursor: pointer; }
</style>
That’s all you need to do. Once you have added the code to your header.php file save it and test it out on your website. If everything is working correctly you should see a notice like this at the bottom of your site:
We use cookies to improve your experience on our website. By browsing this website, you agree to our use of cookies.
Accept
You can style the notice however you want using CSS. The code above is just a basic example. If you want to learn more about cookies and WordPress check out our guide on how to add a cookie popup to your WordPress site.
FAQ
Yes. If you are collecting any personal data from users, you need to have a privacy policy page that conforms to the laws in your country/state. For more information, check out our guide on how to create a privacy policy for your WordPress site.
If you are based in the European Union or have visitors from there, then you need to take additional steps to comply with GDPR cookie law. For more information, see our guide on how to add a GDPR compliant cookie popup in WordPress.
The best way to add popups to your WordPress site is by using a plugin. We recommend using PopupAlly which allows you to easily create beautiful popups and opt-in forms without any coding.
Alternatively, you can also check our comparison of the best popup plugins for WordPress.
You can follow the same steps in this guide and use an HTML5 banner instead of a cookie notice or privacy policy page. You will have to replace all mentions of “cookie” with “banner”.
If you want to add an announcement bar, then we recommend using the Announcement Bar plugin or the Hello Bar plugin by HubSpot.
You can easily customize it by changing the CSS code. We have added a very basic example in the guide, but you can style it however you want.
Yes, simply add the link to your privacy policy page. You can create one by following our guide on how to create a privacy policy for your WordPress site.
Conclusion:
Adding a cookie banner to your WordPress website is a relatively easy process that can be completed in just a few steps. First, you need to choose a plugin and install it on your site. Next, activate the plugin and configure its settings. Once you’ve done that, visitors to your site will see the cookie banner whenever they visit any page on your site.
Do you want to add cookie banner on your WordPress website?
Are you looking for someone to add a cookie banner on your WordPress website? I can help you with that. I have experience in working with WordPress, and I know how to add a cookie banner to a WordPress website. I can also customize the banner to match your website’s color scheme and branding. If you’re interested in my services, please get in touch. I would be happy to discuss your needs and give you a quote. Thank you for your time.