How to add a cookie consent banner to WordPress?

The simplest way to add a cookie consent banner to WordPress is to install a consent management plugin such as Complianz, CookieYes, Cookiebot, or Real Cookie Banner, run its setup wizard to scan your site for cookies, and choose the regions and consent rules that apply to you. A good plugin will display the banner, block non-essential scripts like analytics and ads until visitors agree, record consent, and, if you use Google tools, send the right signals through Google Consent Mode.

A cookie banner isn't just a pop-up that says "We use cookies." To be useful for compliance, it has to actually control which scripts run. This guide explains when you need a banner, how to choose and configure a plugin, how to handle Google Analytics and Tag Manager, and how to build a lightweight banner with code if you prefer.

This article is practical guidance, not legal advice. Privacy laws vary by country and change over time, so check the requirements that apply to your site.

Do You Need a Cookie Consent Banner?

Whether you need one depends on where your visitors are and what your site does.

• EU and UK visitors: The GDPR, the UK GDPR, and the ePrivacy rules generally require prior, informed consent before setting non-essential cookies, such as analytics, advertising, and social media tracking.
• California and other US states: Laws like the CCPA/CPRA focus more on giving users the right to opt out of the sale or sharing of personal information, which often means a "Do Not Sell or Share" option rather than prior consent.
• Other regions: Canada, Brazil, and many other countries have their own privacy laws with varying requirements.

You typically need a banner if your site uses:

• Analytics tools: Google Analytics and similar services.
• Advertising: AdSense and other ad networks.
• Embedded content: YouTube videos, Google Maps, and social media embeds that set cookies.
• Marketing pixels: Meta Pixel, LinkedIn Insight Tag, and similar trackers.
• Some plugins: Chat widgets, heatmaps, and A/B testing tools often set cookies.

Strictly necessary cookies, such as WordPress login cookies, shopping cart cookies, and security tokens, generally don't require consent, though you should still explain them in your cookie policy.

What a Compliant Cookie Banner Should Do

Under stricter regimes like the GDPR, a banner should generally:

1. Block non-essential cookies until consent: Scripts shouldn't load just because the banner is visible.
2. Offer a real choice: "Accept" and "Reject" should be equally easy. Hiding rejection behind extra clicks is increasingly treated as non-compliant by regulators.
3. Allow granular choices: Visitors should be able to choose categories, such as statistics and marketing.
4. Avoid pre-ticked boxes: Consent must be an active choice.
5. Explain what's being collected: Link to a cookie policy listing the cookies and their purposes.
6. Let visitors change their mind: Provide a persistent link or button to reopen settings.
7. Record consent: Keep a record of what each visitor agreed to, in case you need to prove it.

Step 1: Audit Your Site's Cookies

Before setting up a banner, find out what your site actually loads. You can:

• Use a plugin's built-in scanner: Most consent plugins scan your pages automatically.
• Check your browser's developer tools: Open a private window, visit your site, open DevTools, and look under Application > Cookies (Chrome) or Storage > Cookies (Firefox).
• List your integrations: Write down every analytics, ad, marketing, and embed service your site uses.

This gives you a clear picture of which scripts need to wait for consent.

Step 2: Choose a Cookie Consent Plugin

Several well-established plugins handle consent in WordPress:

• Complianz: Popular for its detailed setup wizard, which asks about your site and generates a banner and cookie policy. It supports GDPR, UK GDPR, US state laws, and more, with a premium version for extra features.
• CookieYes: Formerly known as the Cookie Law Info plugin. Offers a cloud-based dashboard, a cookie scanner, and consent logs, with free and paid plans.
• Cookiebot: A cloud-based consent platform from Usercentrics with automatic scanning and script blocking. Pricing is based on site size.
• Real Cookie Banner: A WordPress-focused plugin with a content blocker and a service template library.
• Borlabs Cookie: A premium plugin popular in Germany and the EU, with extensive content blocking.

Look for script blocking, a cookie scanner, consent logging, Google Consent Mode support, and compatibility with the WP Consent API, which lets other plugins check a visitor's consent status.

Step 3: Set Up the Plugin (Complianz Example)

The process is similar across plugins. Here's how it looks with Complianz:

1. Install the plugin: Go to Plugins > Add New Plugin, search for "Complianz," then install and activate it.
2. Start the wizard: Go to Complianz > Wizard. It walks you through a series of questions.
3. Choose your regions: Select the regions whose laws you want to follow, such as the EU, the UK, and the US.
4. Describe your site: Answer questions about your organization, whether you use analytics, whether you share data with third parties, and so on.
5. Scan for cookies: Let the plugin scan your pages. Review the results and assign each cookie to a category.
6. Configure services: Tell the plugin about your analytics, ads, and embedded content. It can block these automatically until consent is given.
7. Generate documents: Complianz can create a cookie policy page for you. Add a link to it in your footer.
8. Customize the banner: Under Complianz > Consent Banner, adjust colors, text, button styles, and position to match your site. Make sure "Accept" and "Deny" buttons have equal prominence.
9. Publish and test: Clear your cache, then test the banner in a private window.

Step 4: Handle Google Analytics and Google Tag Manager

Google tools need special attention because they're the most common source of tracking cookies.

Google Consent Mode

Google Consent Mode lets Google tags adjust their behavior based on a visitor's consent. When consent is denied, tags don't set analytics or advertising cookies, but can send limited, cookieless signals. For sites serving users in the European Economic Area, Google requires Consent Mode (version 2) to be implemented if you use its advertising and measurement features there.

Most consent plugins, including Complianz, CookieYes, and Cookiebot, support Consent Mode v2 and handle the setup for you when you enable it in their settings.

If you're configuring it manually, the default consent state must be set before any Google tags load. Here's the standard pattern:

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}

  gtag('consent', 'default', {
    'ad_storage': 'denied',
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'analytics_storage': 'denied',
    'wait_for_update': 500
  });
</script>

When the visitor accepts, your banner should update the consent state:

gtag( 'consent', 'update', {
    'ad_storage': 'granted',
    'ad_user_data': 'granted',
    'ad_personalization': 'granted',
    'analytics_storage': 'granted'
} );

Google Tag Manager

If you use Google Tag Manager, many consent platforms offer official GTM templates from the Community Template Gallery. You add the template as a tag that fires on the "Consent Initialization" trigger, and your other tags respect the consent state automatically through GTM's built-in consent settings.

Avoid Double-Loading Tags

A common mistake is adding Google Analytics through a plugin like Site Kit, again through GTM, and again through the consent plugin. Pick one method to load each tag, and make sure your consent plugin knows how it's loaded so it can block it correctly.

Step 5: Block Embedded Content Until Consent

YouTube videos, Google Maps, and social embeds can set cookies as soon as the page loads. Most consent plugins can replace these embeds with a placeholder that asks for consent before loading the content.

A privacy-friendlier option for YouTube is the privacy-enhanced embed domain, youtube-nocookie.com, which delays most cookies until the visitor plays the video. It reduces tracking, but doesn't necessarily remove the need for consent everywhere, so a content blocker is still the safer choice under strict regimes.

Step 6: Use the WP Consent API in Custom Code

The WP Consent API is a free plugin that provides a standard way for WordPress plugins to check a visitor's consent. Many consent plugins support it, and so do plugins like Site Kit and WooCommerce.

If you write custom code that loads tracking scripts, you can check consent before outputting them. This example loads a tracking script only when the visitor has consented to marketing cookies. Add it to a custom plugin or your child theme's functions.php:

function sajjad_enqueue_marketing_pixel() {
    if ( ! function_exists( 'wp_has_consent' ) || ! wp_has_consent( 'marketing' ) ) {
        return;
    }

    wp_enqueue_script(
        'sajjad-marketing-pixel',
        get_stylesheet_directory_uri() . '/js/marketing-pixel.js',
        array(),
        '1.0.0',
        array( 'in_footer' => true )
    );
}
add_action( 'wp_enqueue_scripts', 'sajjad_enqueue_marketing_pixel' );

The WP Consent API uses categories such as functional, preferences, statistics, statistics-anonymous, and marketing. Note that server-side checks only work on uncached pages or with cache setups that vary by consent. For full-page caching, consent is usually handled in the browser with JavaScript, which is how most consent plugins work.

Option: Build a Simple Banner With Code

If your site only uses one or two non-essential scripts, you might prefer a small custom banner instead of a full plugin. Keep in mind that you'll be responsible for consent records, policy updates, and regional differences yourself, so a plugin is the better choice for most sites.

Here's a minimal example that shows a banner, stores the visitor's choice in localStorage, and loads Google Analytics only after consent. Replace G-XXXXXXXXXX with your measurement ID.

First, output the banner markup in the footer:

function sajjad_cookie_banner_markup() {
    ?>
    <div id="sajjad-cookie-banner" class="sajjad-cookie-banner" role="dialog" aria-live="polite" aria-label="<?php esc_attr_e( 'Cookie consent', 'sajjad' ); ?>" hidden>
        <p>
            <?php esc_html_e( 'We use analytics cookies to understand how visitors use this site. You can accept or reject them.', 'sajjad' ); ?>
            <a href="<?php echo esc_url( get_privacy_policy_url() ); ?>"><?php esc_html_e( 'Privacy policy', 'sajjad' ); ?></a>
        </p>
        <div class="sajjad-cookie-banner__actions">
            <button type="button" data-consent="rejected"><?php esc_html_e( 'Reject', 'sajjad' ); ?></button>
            <button type="button" data-consent="accepted"><?php esc_html_e( 'Accept', 'sajjad' ); ?></button>
        </div>
    </div>
    <?php
}
add_action( 'wp_footer', 'sajjad_cookie_banner_markup' );

function sajjad_cookie_banner_assets() {
    $dir = get_stylesheet_directory_uri();

    wp_enqueue_style( 'sajjad-cookie-banner', $dir . '/css/cookie-banner.css', array(), '1.0.0' );
    wp_enqueue_script( 'sajjad-cookie-banner', $dir . '/js/cookie-banner.js', array(), '1.0.0', array( 'in_footer' => true ) );
}
add_action( 'wp_enqueue_scripts', 'sajjad_cookie_banner_assets' );

Then create js/cookie-banner.js in your child theme:

( function () {
    const STORAGE_KEY = 'sajjad_cookie_consent';
    const GA_ID = 'G-XXXXXXXXXX';

    function loadAnalytics() {
        const script = document.createElement( 'script' );
        script.async = true;
        script.src = 'https://www.googletagmanager.com/gtag/js?id=' + GA_ID;
        document.head.appendChild( script );

        window.dataLayer = window.dataLayer || [];
        window.gtag = function () {
            window.dataLayer.push( arguments );
        };
        window.gtag( 'js', new Date() );
        window.gtag( 'config', GA_ID );
    }

    document.addEventListener( 'DOMContentLoaded', function () {
        const banner = document.getElementById( 'sajjad-cookie-banner' );
        let choice = null;

        try {
            choice = window.localStorage.getItem( STORAGE_KEY );
        } catch ( e ) {
            choice = null;
        }

        if ( choice === 'accepted' ) {
            loadAnalytics();
            return;
        }

        if ( choice === 'rejected' || ! banner ) {
            return;
        }

        banner.hidden = false;

        banner.addEventListener( 'click', function ( event ) {
            const button = event.target.closest( 'button[data-consent]' );
            if ( ! button ) {
                return;
            }

            const value = button.getAttribute( 'data-consent' );

            try {
                window.localStorage.setItem( STORAGE_KEY, value );
            } catch ( e ) {
                // Storage unavailable; the choice applies to this page view only.
            }

            if ( value === 'accepted' ) {
                loadAnalytics();
            }

            banner.hidden = true;
        } );
    } );
} )();

And some basic styles in css/cookie-banner.css:

.sajjad-cookie-banner {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    z-index: 9999;
    max-width: 640px;
    margin: 0 auto;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    background: #1d2327;
    color: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.sajjad-cookie-banner[hidden] {
    display: none;
}

.sajjad-cookie-banner a {
    color: #fff;
    text-decoration: underline;
}

.sajjad-cookie-banner__actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.sajjad-cookie-banner__actions button {
    padding: 0.5rem 1rem;
    border: 1px solid #fff;
    border-radius: 4px;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

Notice that "Accept" and "Reject" are styled identically, which keeps the choice balanced. To let visitors change their mind, add a "Cookie settings" link in your footer that clears the stored value and shows the banner again.

Step 7: Test Your Cookie Banner

After setting everything up, confirm it actually works:

1. Open a private window: This ensures no previous consent is stored.
2. Check cookies before consenting: In DevTools, confirm that no analytics or marketing cookies (like _ga) are set before you click anything.
3. Reject and check again: Refresh the page and confirm that non-essential cookies still aren't set.
4. Accept and verify: Clear site data, accept, and confirm that analytics now load and appear in real-time reports.
5. Test the settings link: Make sure visitors can reopen the banner and change their choice.
6. Test with caching: Clear your caching plugin and CDN, then repeat the tests.
7. Check mobile: Make sure the banner doesn't cover important content or navigation on small screens.

Keep Your Banner Up to Date

• Rescan periodically: New plugins and embeds can introduce new cookies.
• Update your cookie policy: Keep the list of cookies and purposes current.
• Review the law occasionally: Regulations and regulator guidance evolve.
• Update the plugin: Consent plugins frequently release updates to reflect legal changes and new Google requirements.

---

FAQ: Cookie Consent Banners in WordPress

---

Conclusion

Adding a cookie consent banner to WordPress is straightforward with a plugin like Complianz, CookieYes, Cookiebot, or Real Cookie Banner. The key is to go beyond a simple notice: scan your site, block non-essential scripts until visitors agree, offer an equally easy way to reject, set up Google Consent Mode if you use Google tools, and give visitors a way to change their choice.

Once your banner is live, test it carefully in a private window, and revisit your setup whenever you add a new plugin, embed, or tracking tool. A well-configured consent banner protects your visitors' privacy, keeps you on the right side of the law, and builds trust with the people who read your site.