Adding 1 Reliable Floating Cookies Bar in Footer of WordPress Website

Adding floating cookies bar in footer of WordPress website

Today we’ll leave you with the practical ways of adding WordPress floating cookies bar in the footer area to notify your audience that your website is collecting cookies.

A floating cookies bar is also known as a cookie consent banner or cookie notification bar. It is a common feature used by websites to comply with various privacy laws like GDPR in the European Union and other country privacy laws.

This is a perfect way to showcase your site’s compliance with all the relevant international laws, including EU ePrivacy Directive, EU Cookie Directive, etc.

Cookies are important pieces of files or information sent from a website to the user’s PC via the web browser in the form of bits of text.

While this plain description may sound tricky, it’s a useful mechanism aimed at identifying and tracking online users, remembering certain information (like the items you have added to your online shopping cart) or recording browsing details and activities (visited pages, logins).

For example, when your browse a website using cookies and enter your personal information to sign up or log in, that personal information with name, email address, etc. are packed into a cookie and received by the browser for the storage.

And whenever you visit that website for the next time, your browser will send cookies to the server. It means that you don’t need to enter your details each time you visit that site.

Thus, cookies make it easier for you to wander about and navigate websites, deal with fill in forms and more.

While the creation and storage of cookies is an automatic process which technically does not disturb your web users, you are obliged to let them know that your website is collecting cookies.

And they will have to accept it, or just go on (as the case may be) which will also imply that they give their consent to it.

Now, when we have summarized the importance of cookies in the digital form, let’s reveal the ways you can add WordPress floating cookies bar in the footer area.

In case you want the important content like the one catering to cookies be visible to your website visitors all the time, the best way is to insert it in floating footer bar.

Let’s start with the manual creation of floating cookies bar in footer by using FTP client or cPanel file manager.

As for FTP clients, they need to fit footer.php file in their WP theme folder and download it to the desktop.

The next step is to open the footer. php file in any text editor and add the below mentioned code right before the pre tag:

<div>
<div>
<ul>
<li><a> Cookies notice is the First Item</a></li>
<li><a>WordPress.org is the Second Item</a></li>
</ul>
</div>
</div>

Next is the part of CSS style controls to result in the needed visualization of your WordPress floating cookies bar in the footer area. You may do this by adding CSS to your template’s style.css file or via one of custom CSS plugins.

At this point, we will need to use jQuery so that the items included in your list will be randomly showcased every time the page is loading.

Copy the link below in any text editor:

(function($) {
this.randomtip = function(){
	var length = $("#tips li").length;
	var ran = Math.floor(Math.random()*length) + 1;
	$("#tips li:nth-child(" + ran + ")").show();
};

$(document).ready(function(){	
	randomtip();
});
})( jQuery );

Then save this file as floatingbar.js and go on with your FTP client to connect your web server. Now go to the theme folder and place js folder. If there is no such a folder, you need to create it and then add floatingbar.js to that folder.

The next step to copy the code below in functions.php file:

function wpb_floating_bar() {
    wp_enqueue_script( 'wpb-footerbar', get_stylesheet_directory_uri() . '/js/floatingbar.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'wpb_floating_bar' );

Finished! You have successfully added WordPress floating cookies bar in the footer area. Now you can try to reload your web page to see the random display of items included in your list.

If you feel overwhelmed with all the coding controls described above, we offer you to consider an alternative option with less hassle around codes.

There are useful cookie notification and cookie consent WP plugins to easily add WordPress floating cookies bar in the footer area or somewhere else in your site.

1. Italy Cookie Choices:

While this plugin is ready to provide you with more functionality than you might need, it is one of the popular cookie related solutions you can have for your WP site.

Upload the relevant folder to your directory and activate it via your Dashboard, Plugins. Then head over Settings, Italy Cookie Choices to configure the plugin to meet your needs.

With this plugin you can quickly stylize, modify and locate your cookies bar both in the footer area and notice you website visitors about your cookies policy only the first time he visits your site.

You are free to choose whether to display your cookie bar in a standard form, with big or small buttons. It’s also you to decide the position of it: top, dialog, bottom.

2. Cookie Law Info:

The next plugin that goes the bit over what you need is called Cookie Law Info. User and developer optimized, this plugin can boast with more than 200.000 active installs and thousands of happy clients.

This product does not require any coding knowledge from you and enable to configure the cookies bar with your specific text, colors, styling, etc. This will let you mix and match the cookies bar with the overall design and face of your site.

As for the other benefits you’ll have if you choose Cookie Law Info, you will be able to translate your texts into different languages whenever needed since this plugin is fully compatible with WPML and qTranslate plugins.

Hence, with this plugin you can choose whether you want to display your cookies bar in header or footer, configure the bar to disappear after several seconds or accept the cookies policy if the website user scrolls.

Other Related WordPress plugins: WordPress GDPR Plugins