Lightweight Cookie Notice for WordPress

Today it is rare to enter a website without being "robbed" by a pop up which, words more, words less, impels us to accept the creation of cookies on our device. And no, we are not talking about being invited to see its content with some chocolate cookies. Far from something sweet and edible, these cookies they are digital and we already know its application: allow you to identify, maintain sessions and Track the steps of users on the web, either within a site or between different sites.

For some time now, most of the administrators (responsible) of sites know what GDPR means: General Data Protection Regulation, in Spanish General Data Protection Regulation. By 'data' we mean user data, of course, and not website data. The question is thatSince 2018, many pages on the internet, whether owned by companies or individuals, have been fined for creating cookies on user terminals without their knowledge. When the news spread, the admins also ran to place the corresponding notices. It's better to prevent than to cure.

According to the GDPR, personal data is any piece of information that can be related to any natural person, from a Photo, a comment, or a Email address.

Those crazy, crazy notices...

Notices for the use of cookies can differ greatly in terms of design and message, but they all fulfill the same function: letting the user know that browsing the site is equivalent to implicit acceptance of the creation of cookies on their device in turn.

The plugins created to present the notice (and acceptance) of cookies can provide us with few or many options for displaying/customizing the message, but they are all the same in something: they occupy resources.

An average WordPress site has no less than five plugins. If we are careless, suddenly we will have ten or fifteen plugins. WooCommerce is one plugin, Askimet another; another one for SEO, and another one to insert Google Analytics (which, of course, places its own cookies); a builder like Elementor, Divi or Beaver, another plugin; plugin for languages, plugins to create cache, plugins for forms, etc, etc, etc…

Do we need yet ANOTHER PLUGIN to present a simple and brief message about the use of Cookies?
Luckily not…

Someone got more outraged than us and gives us one alternative solution: insert the cookie consent message occupying just 1Kb extra of code. That, in literary terms, is just one more grain of sand in the binary dune of our web.

Cookie notice, without plugin

Gijo Varghese is a well-known WordPress developer and blogger (you can read his articles —in English— on the site wpspeedmatters.com). Gijo was another who noted that a typical cookie notification plugin has excessive code for its function, its own CSS and even JavaScript calls. But Gijo wrote in his own handwriting a little code and gave it away to the world, making the need to use another plugin to stay in line with GDPR useless.

Gijo's solution has the following beautiful advantages:

  • Weight LESS than 1KB in size (about only 500 bytes if your site uses gzip or some typical cache compression).
  • Does not use CSS or JavaScript (whatever you need is encoded in the same lines of your programming).
  • It does not depend from jQuerys.
  • It does not depend of calls to the WordPress database.
  • It is responsive (adapts to different sizes of screens including cell phones).
  • It is 100% customizable.

examples

1Kb Cookie notice, desktop view and cell phones.

Note: You can change the text and colors as you like to match your Theme's palette seamlessly. Below we explain how.

Cookie notice, without plugin

<p id="aviso-de-cookie">This site uses cookies to guarantee the best possible experience browsing its content. <button>IT IS UNDERSTOOD!</button></p> <style>#aviso-de-cookie{color:#fff;font-family:inherit;background:#596cd5;padding:20px;position:fixed;bottom:10px;left:10px;width:100%;max-width:300px;box-shadow:0 10px 20px rgba(0,0,0,.2);border-radius:5px;margin:0px;visibility:hidden;z-index:1000000;box-sizing:border-box}#aviso-de-cookie button{color:inherit;background:#3842c7;border:0;padding:10px;margin-top:10px;width:100%;cursor:pointer}@media only screen and (max-width:600px){#aviso-de-cookie{max-width:100%;bottom:0;left:0;border-radius:0}}</style> <script>function aceptaCookie(){document.cookie="aceptaCookie=1; expires=Thu, 18 Dec 2030 12:00:00 UTC; path=/",document.getElementById("aviso-de-cookie").style.visibility="hidden"}document.cookie.indexOf("aceptaCookie")<0&&(document.getElementById("aviso-de-cookie").style.visibility="visible");</script>

The above code should be copied and pasted in the footer file of your theme. To achieve this, follow the instructions below.

  1. go to Appearance → Theme Editor
  2. If you see a banner advising you of the responsibility to edit the HTML of your Theme's source code, click Continue.
  3. Select the file footer.php in the right column.
  4. Paste the code immediately BEFORE the tag </body>
This capture exemplifies everything in a single screenshot.

Appearance customization

The size and color of the text they can be easily changed by adding a style on the label <p> (namely, <p style="»…»">).

you can insert links or complete with any other sentence (eg: «see our privacy policies here» with its corresponding link).

To edit the background color, look up the hex value. #596cd5 and change it to the color you need.

For him button background color, search for #3842c7 and change it to the one that is appropriate for your site.

That is all!

conclusion

Once again, WordPress shows us that your community is a valuable PLUS.

Having our WordPress site is not only advantageous because of the development that exists behind WordPress itself, but also because of the huge number of people who help us, even without us asking.

On the other hand, this HTML code is a sample that there are alternatives for each coda that we need for our site. If there is an additional message that is translated in this note it is: let's not drown in a glass of water.

If you have not understood something or you have doubts, please write us in the comments.

If you are hosting your site on Duplika, write to us at [email protected] and we will perform this inclusion on your site free of charge.

If you liked the note, we ask you to evaluate the valuable features of our hosting plans. If you love WordPress, we want you with us!

Success to all, and thanks for reading.

We are Duplika

Give your site the hosting it deserves

2 comments on Lightweight Cookie Notice for WordPress

back to blog

Duplika

Duplika

We are online, we are not a bot :)

I will be back soon

Duplika
Hi 👋
Select the prefered contact method to get in touch.
Connect via:
chat