The Cookie Consent Plugin

Let's get our hands dirty and look into the Cookie Consent plugin. The Cookie Consent plugin adds a little banner to each page of a website, so that the user can agree to the website's cookie policy.

You might think that you don't need a plugin for that. And you are right: You can simply visit the Cookie Consent website, configure your cookie consent banner, copy the code, and paste it into your theme. It'ss only a bit of JavaScript and CSS. The script from the cookie consent website looks like this:

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
  "palette": {
    "popup": {
      "background": "#d48484",
      "text": "#ffffff"
    },
    "button": {
      "background": "#362929",
      "text": "#fff"
    }
  },
  "content": {
    "message": "This website uses cookies to ensure you get the best experience on our website.",
    "dismiss": "OK",
    "link": "Learn more"
  }
})});
</script>

So what is the point of creating a plugin just to add this little script to a website?

The Problem With Hardcoding

Hard coding the cookie consent script manually into your TYPEMILL-theme has two downsides:

  • As a developer, I have to touch the templates of the TYPEMILL-theme and add the cookie consent script there. And each time, if I update the theme, I have to add the script again.
  • As an author or admin, I cannot change the text or the color of the cookie consent in the setup area, and I cannot activate or deactivate it. Instead I have to open the template files in a code editor and work like a developer.

Wouldn't it be much better to configure the cookie consent in the setup area of TYPEMILL, and to add the cookie consent banner to a theme without even touching it?

Of course, so let's try it:

How The Plugin Should Work

Before we start, let's describe how the cookie consent plugin should work:

  • The plugin should add a CSS file into the HTML header of the theme template.
  • The plugin should add a JavaScript file at the bottom of the theme template.
  • After the JavaScript file, the plugin should add the initial script with the values for the colors and the content.
  • And finally, the content and color values should be editable, so that the user can change them in the plugin settings.

Next: Create a File Structure

In the next chapters, we will learn how to add a cookie banner easily with a TYPEMILL plugin. Let's start with a file structure.

Typemill is an open source software and a registered trademark. Read more