Blog

Let’s create a custom LGPD and GDPR consent banner directly in your Theme or Child Theme. Here’s a step-by-step guide:

1. Create a New PHP File: In your (child) theme folder, create a new PHP file named consent-banner.php.
2. Add the Banner HTML: Open the consent-banner.php file and add the HTML for the consent banner. Here’s a basic example:

PHP

<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}
?>
<div id="consent-banner" style="position: fixed; bottom: 0; width: 100%; background-color: #f8f9fa; text-align: center; padding: 10px; box-shadow: 0 -2px 5px rgba(0,0,0,0.1);">
    <p>This website uses cookies to ensure you get the best experience on our website. By continuing to browse the site, you agree to our use of cookies.</p>
    <button id="accept-cookies" style="margin-left: 10px;">Accept</button>
    <button id="decline-cookies" style="margin-left: 10px;">Decline</button>
</div>
<script>
document.getElementById('accept-cookies').onclick = function() {
    document.getElementById('consent-banner').style.display = 'none';
    document.cookie = "consent=true; max-age=31536000; path=/";
};
document.getElementById('decline-cookies').onclick = function() {
    document.getElementById('consent-banner').style.display = 'none';
    document.cookie = "consent=false; max-age=31536000; path=/";
};
</script>

3. Enqueue the Script: In your child theme’s functions.php file, enqueue the JavaScript file to ensure it loads correctly:

php

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_consent_banner_script' );
function enqueue_consent_banner_script() {
    wp_enqueue_script( 'consent-banner-script', get_stylesheet_directory_uri() . '/consent-banner.php', array(), '1.0.0', true );
}
?>

4. Add the Banner to Your Theme: To display the banner on your site, you can add the following code to your theme’s functions.php, or even the header or footer template. We can use Polylang’s functions to determine the current language and display the appropriate banner content accordingly.
   
5. Detect the Current Language: We’ll use Polylang functions to detect the current language and display the correct banner content based on the language setting.
   
6. Update the Banner Content: Modify the display_consent_banner function to include different texts for English (EN), Spanish (ES), and Portuguese (PT).

Here’s the updated code for your functions.php file:

php

<?php
// Function to output the consent banner HTML and JavaScript based on the current language
function display_consent_banner() {
    // Check if the consent cookie is not set or if it's not 'true'
    if ( ! isset( $_COOKIE['consent'] ) || $_COOKIE['consent'] !== 'true' ) {
        // Get the current language using Polylang
        $current_lang = pll_current_language();

        // Set the banner content based on the current language
        $banner_text = '';
        $accept_text = '';
        $decline_text = '';

        if ( $current_lang == 'en' ) {
            $banner_text = 'This website uses cookies to ensure you get the best experience on our website. By continuing to browse the site, you agree to our use of cookies.';
            $accept_text = 'Accept';
            $decline_text = 'Decline';
        } elseif ( $current_lang == 'es' ) {
            $banner_text = 'Este sitio web utiliza cookies para garantizar que obtenga la mejor experiencia en nuestro sitio web. Al continuar navegando por el sitio, acepta nuestro uso de cookies.';
            $accept_text = 'Aceptar';
            $decline_text = 'Rechazar';
        } else {
            // Default to Portuguese (PT)
            $banner_text = 'Este site usa cookies para garantir que você obtenha a melhor experiência em nosso site. Ao continuar a navegar no site, você concorda com o nosso uso de cookies.';
            $accept_text = 'Aceitar';
            $decline_text = 'Recusar';
        }

        // Output the banner HTML and JavaScript
        ?>
        <div id="consent-banner" style="position: fixed; bottom: 0; width: 100%; background-color: #f8f9fa; text-align: center; padding: 10px; box-shadow: 0 -2px 5px rgba(0,0,0,0.1);">
            <p><?php echo $banner_text; ?></p>
            <button id="accept-cookies" style="margin-left: 10px;"><?php echo $accept_text; ?></button>
            <button id="decline-cookies" style="margin-left: 10px;"><?php echo $decline_text; ?></button>
        </div>
        <script>
        document.getElementById('accept-cookies').onclick = function() {
            document.getElementById('consent-banner').style.display = 'none';
            document.cookie = "consent=true; max-age=31536000; path=/";
        };
        document.getElementById('decline-cookies').onclick = function() {
            document.getElementById('consent-banner').style.display = 'none';
            document.cookie = "consent=false; max-age=31536000; path=/";
        };
        </script>
        <?php
    }
}

// Hook the function to 'wp_footer' action
add_action( 'wp_footer', 'display_consent_banner' );
?>

This code will display the appropriate banner text based on Polylang‘s current language settings. If the language is set to English (en), it will display the text in English. If the language is set to Spanish (es), it will display the text in Spanish. For any other language (including Portuguese), it will default to displaying the text in Portuguese.

Test the Banner: Visit your site and check if the banner appears correctly. Test the accept and decline buttons to ensure they work as expected.