How To Build A Cookies Policy Notice For WordPress

1. Enqueuing the cookie.js script in WordPress

To use cookie.js, you must enqueue the script in your WordPress theme’s functions.php file.

1. Navigate to Appearance > Editor > Theme Functions (functions.php);
2. Copy and paste in the code below to enqueue cookie.js into your theme;
3. Click Update File to save the changes.

function custom_scripts() {
     if ( $GLOBALS['pagenow'] != 'wp-login.php' && !is_admin() ) {
          wp_register_script( 'cookie', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js', array(), '1.4.1', true );
          wp_enqueue_script( 'cookie' );
     }
}

add_action( 'wp_enqueue_scripts', 'custom_scripts' );

2. Creating the front-end notice (HTML)

To add in the HTML, you must add the code below to your theme’s footer.php file.

1. Navigate to Appearance > Editor > Theme Footer (footer.php);
2. Copy and paste in the code below to create the front-end HTML;
3. Click Update File to save the changes.

<div id="cookie-notice">
     <p>Cookie message</p>
     <div>
          <div>Close</div>
     </div>
</div>

3. Creating the front-end notice (CSS)

To add in the CSS, you must add the code below to your theme’s style.css file.

1. Navigate to Appearance > Editor > Stylesheet (style.css);
2. Copy and paste in the code below to create the front-end CSS;
3. Click Update File to save the changes.

#cookie-notice {
     color: #FFFFFF;
     width: 100%;
     text-align: center;
     padding: 10px 0;
     background-color: #000000;
     font-size: 1em;
     position: fixed;
     bottom: 0;
     left: 0;
     z-index: +10;
     display: none;}
     #cookie-notice p {
          padding: 0;
          margin: 0;
          display: inline-block;}
          #cookie-notice p a {
               text-decoration: underline;
               color: #FFFFFF;}
     #cookie-notice > div {float: right;}
          #cookie-notice > div div {
               color: #FFFFFF;
               margin: 0 15px;
               cursor: pointer;
               -ms-transition: .25s all;
               -webkit-transition: .25s all;
               -moz-transition: .25s all;
               transition: .25s all;
               cursor: pointer;}
          #cookie-notice p a:hover,
          #cookie-notice > div div:hover {color: #999999;}
     #cookie-notice * {font-size: inherit;}

@media only screen and (max-width: 900px) {
     #cookie-notice {font-size: .9em;}
}

@media only screen and (max-width: 800px) {
     #cookie-notice {font-size: .8em;}
}

@media only screen and (max-width: 700px) {
     #cookie-notice {font-size: .75em;}
}

@media only screen and (max-width: 650px) {
     #cookie-notice {
          padding: 10px;
          box-sizing: border-box;}
     #cookie-notice p {display: block;}
     #cookie-notice > div {
          float: none;
          display: block;
          margin-top: 5px;}
}

4. Registering the cookie using cookie.js

To register your cookie using cookies.js, copy and past in the code below in an enqueued scripts file or in your footer.php file. Please include the script tags if used in the footer.php file.

<script type="text/javascript">
     $( '#cookie-notice div div' ).click( function() {
     $.cookie( 'cookie-accepted', 'true', { expires: 365, path: '/' } );
     $( '#cookie-notice' ).fadeOut();
     } );

     $( document ).ready( function() {
          if ( $.cookie( 'cookie-accepted' ) != 'true' ) {
               $( '#cookie-notice' ).css( { 'display':'block' } );
          }
     } );
</script>

The above script registers the cookie to be accepted for 365-days.

Legal disclaimer

Note that this may help websites to be more GDPR. compliant, however; the authors of WPZA (https://wpza.net) are not legal advisors and therefore are not responsible for any legal issues related to your website.