How to Add Cookie Notice in WordPress without a plugin?

In this tutorial, we are going to add cookie notice in WordPress without a plugin. Basically, you can find lots of plugin in WordPress repository with GDPR compliant to display cookie consent notification.

But in this guide we are going to do show cookie notice without the help of any plugin.

In this guide, you will also learn more to

  • Add JavaScript to accept the cookie policy
  • Adding Cookie Consent notification on GeneratePress Theme
  • Styling the Cookie Notifications
Add Cookie Notice in WordPress without a plugin

Here we are going to use the code developed by Xavi Esteve and furthermore style it according to our requirements.

Features of Cookie Consent Notice

  • You can customize the whole code.
  • JavaScript code is tiny ~1 KB in size.
  • Easy to Implement.
  • Works down to IE8.
  • Cookie Notice is Responsive.

Add Cookie Notice in WordPress without a plugin

You can add cookie notice simple script with CSS code directly to the footer by editing the footer.php from Theme Editor. If you are a pro user then you can edit footer.php directly.

Cookie Consent Script in footer.php

Copy and Paste the following code in footer.php just before the body closing tag.

<style>#cookie-law-div{z-index:10000000;position:fixed;bottom:3%;right:2%;padding:1em;max-width:400px;border-radius:10px;background:#fff;border:1px solid rgba(0,0,0,.15);font-size:15px;box-shadow:rgba(23,43,99,.4) 0 7px 28px}@media (max-width:600px){#cookie-law-div{border-radius:0;max-width:100%;right:0;bottom:0}}#cookie-law-div a{font-size:15px;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.5)}#cookie-law-div a:hover{opacity:.7}#cookie-law-div p{margin:0;color:#000;padding-right:50px}#cookie-law-div button{position:absolute;right:.5em;top:20px;align-self:center;line-height:1;color:#fff;background-color:#000;border:none;opacity:.6;font-size:12px;cursor:pointer;border-radius:50px}#cookie-law-div button:hover{opacity:1}</style>

<script>cookieLaw={dId:"cookie-law-div",bId:"cookie-law-button",iId:"cookie-law-item",show:function(e){if(localStorage.getItem(cookieLaw.iId))return!1;var o=document.createElement("div"),i=document.createElement("p"),t=document.createElement("button");i.innerHTML=e.msg,t.id=cookieLaw.bId,t.innerHTML=e.ok,o.id=cookieLaw.dId,o.appendChild(t),o.appendChild(i),document.body.insertBefore(o,document.body.lastChild),t.addEventListener("click",cookieLaw.hide,!1)},hide:function(){document.getElementById(cookieLaw.dId).outerHTML="",localStorage.setItem(cookieLaw.iId,"1")}},cookieLaw.show({msg:"We use cookies to give you the best possible experience. By continuing to visit our website, you agree to the use of cookies as described in our <a href='#'>Cookie Policy</a>",ok:"x"});</script>

This above step is a little risky and in case you don’t want to mess with core file then you can try the alternative methods listed below.

Let’s go with easy process to display cookie notification in WordPress.

1. Install Insert Headers and Footers plugin

  • Go to Plugins > Add New.
  • Search Insert Headers and Footers plugin
  • Install and Activate the plugin.
  • After activating, go to Settings > Insert Headers and Footers.
  • Copy and Paste the JavaScript code in the footer section (Scripts in Body)
  • Finally, Hit Save button.
Cookie Notice JS in Headers and Footers Plugin

Here in this code in the last line, you can edit/change the cookie message and also don’t forget to link to your cookie policy page.

<script>cookieLaw={dId:"cookie-law-div",bId:"cookie-law-button",iId:"cookie-law-item",show:function(e){if(localStorage.getItem(cookieLaw.iId))return!1;var o=document.createElement("div"),i=document.createElement("p"),t=document.createElement("button");i.innerHTML=e.msg,t.id=cookieLaw.bId,t.innerHTML=e.ok,o.id=cookieLaw.dId,o.appendChild(t),o.appendChild(i),document.body.insertBefore(o,document.body.lastChild),t.addEventListener("click",cookieLaw.hide,!1)},hide:function(){document.getElementById(cookieLaw.dId).outerHTML="",localStorage.setItem(cookieLaw.iId,"1")}},cookieLaw.show({msg:"We use cookies to give you the best possible experience. By continuing to visit our website, you agree to the use of cookies as described in our <a href='#'>Cookie Policy</a>",ok:"x"});</script>

2. Style Cookie Notice using CSS code

Now, you need to style the Cookie Consent Notice using the following CSS code.

  • Go to Appearance > Customize > Additional CSS.
  • Copy and Paste the following Cookie Notice CSS.
  • Hit Publish button
#cookie-law-div {
    z-index: 10000000;
    position: fixed;
    bottom: 3%;
    right: 2%;
    padding: 1em;
    max-width: 400px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .15);
    font-size: 15px;
    box-shadow: rgba(23, 43, 99, .4) 0 7px 28px;
}
@media (max-width: 600px) {
    #cookie-law-div {
        border-radius: 0;
        max-width: 100%;
        right: 0;
        bottom: 0;
    }
}
#cookie-law-div a {
    font-size: 15px;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, .5);
}
#cookie-law-div a:hover {
    opacity: .7;
}
#cookie-law-div p {
    margin: 0;
    color: #000;
    padding-right: 50px;
}
#cookie-law-div button {
    position: absolute;
    right: .5em;
    top: 20px;
    align-self: center;
    line-height: 1;
    color: #fff;
    background-color: #000;
    border: none;
    opacity: .60;
    font-size: 12px;
    cursor: pointer;
    border-radius: 50px;
}
#cookie-law-div button:hover {
    opacity: 1;
}

How to Display the Cookie Consent Notification in GeneratePress without a plugin?

Here, we are going to display cookie consent notification in GeneratePress Theme using Elements Module.

1. Add Cookie Law JavaScript using Elements Module

Elements Module is only available in Premium Version of GeneratePress Theme so, if you haven’t activated the module yet.

Also Read: GeneratePress Review

Go to Appearance > GeneratePress > Activate Elements Module

Moreover,

  • Go to Appearance > Elements > Click on Add New.
  • Choose Element Type as Hook.
  • Give a Cookie Consent Title.
  • Copy and Paste the Cookie Notice JS code.
Cookie Consent Notice in WordPress

The Cookie Law JavaScript code is light-weight and minified.

Here in this code in the last line, you can edit/change the cookie message and also don’t forget to link to your cookie policy page.

<script>cookieLaw={dId:"cookie-law-div",bId:"cookie-law-button",iId:"cookie-law-item",show:function(e){if(localStorage.getItem(cookieLaw.iId))return!1;var o=document.createElement("div"),i=document.createElement("p"),t=document.createElement("button");i.innerHTML=e.msg,t.id=cookieLaw.bId,t.innerHTML=e.ok,o.id=cookieLaw.dId,o.appendChild(t),o.appendChild(i),document.body.insertBefore(o,document.body.lastChild),t.addEventListener("click",cookieLaw.hide,!1)},hide:function(){document.getElementById(cookieLaw.dId).outerHTML="",localStorage.setItem(cookieLaw.iId,"1")}},cookieLaw.show({msg:"We use cookies to give you the best possible experience. By continuing to visit our website, you agree to the use of cookies as described in our <a href='#'>Cookie Policy</a>",ok:"x"});</script>

Now, Go to the Hook Settings Choose Hook Location as wp_footer.

Hook-after-WP_Footer-in-WP-Show-Posts

Furthermore, Go to Display Rules and Choose Location as Entire Site.

Display Rules in Entire Site in GeneratePress Theme

Finally, Hit a Publish Button.

2. Style Cookie Notification using CSS code

Now, you need to style the Cookie Consent Notice using the following CSS code.

  • Go to Appearance > Customize > Additional CSS.
  • Copy and Paste the following Cookie Law CSS.
  • Hit Publish button
#cookie-law-div {
    z-index: 10000000;
    position: fixed;
    bottom: 3%;
    right: 2%;
    padding: 1em;
    max-width: 400px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .15);
    font-size: 15px;
    box-shadow: rgba(23, 43, 99, .4) 0 7px 28px;
}
@media (max-width: 600px) {
    #cookie-law-div {
        border-radius: 0;
        max-width: 100%;
        right: 0;
        bottom: 0;
    }
}
#cookie-law-div a {
    font-size: 15px;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, .5);
}
#cookie-law-div a:hover {
    opacity: .7;
}
#cookie-law-div p {
    margin: 0;
    color: #000;
    padding-right: 50px;
}
#cookie-law-div button {
    position: absolute;
    right: .5em;
    top: 20px;
    align-self: center;
    line-height: 1;
    color: #fff;
    background-color: #000;
    border: none;
    opacity: .60;
    font-size: 12px;
    cursor: pointer;
    border-radius: 50px;
}
#cookie-law-div button:hover {
    opacity: 1;
}

Result

The cookie consent notice in pc look like the below screenshot

Cookie Consent Notification Result

At the End

This is how you can Add Cookie Notice in WordPress without a plugin. Also, you can also use plugin too that are available in the WordPress repository for GDPR compliant.

Moreover, this is one of the easiest methods to add cookie consent notification to your website. Overall, the code is tiny and it doesn’t impact the site’s performance.

Moreover, if you have any queries/feedback, please feel free to comment below.

Share:

GET 100+ FREE SEO TOOLS

Quickly access over 100+ popular SEO/Marketing tools to Boost your website traffic.

Thank you for subscribing. Check your Email(Didn't receive? check Spam Folder)

Something went wrong.

I love things to do with WordPress, Digital Marketing. Blogging has been my Passion. In my free time, I enjoy watching Series and Movies.

4 thoughts on “How to Add Cookie Notice in WordPress without a plugin?”

  1. Nice post as always. Can you publish a post on how to display Author Avatar in the meta post? I tried several methods and codes but I wasn’t able to show Author Gravatar photo in the Meta, Only the name of the author was displaying after making changes.

    Reply
    • Hi Vijay, you can find the solution in GeneratePress Documentation or Google GeneratePress Entry Meta Style
      Thanks

      Reply
  2. Joke. You starting with the text “without a plugin” and the first thing you asking is to install another plugin! Seriously!

    Reply
    • Hi Dariusz, Thank you for your comment.
      I have mentioned in my article that you can directly insert code into footer.php i.e. it can be done without any plugin.
      If you want to insert whole code then go to Appearance > Theme Editor > footer.php and paste just before the closing body tag.
      But keep in mind that when you change your theme then the whole code will get removed.

      Mainly I focus my article for beginners and I mention some alternative steps and furthermore without a plugin in this article means without a cookie consent plugin.
      Thanks

      Reply

Leave a Comment