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

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.

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.

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.

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.

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

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

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.