How to add a cookie banner to WordPress (the right way)

Most WordPress sites already have a cookie banner. Many of them do not actually do anything: the message appears, but Google Analytics, the Meta Pixel and other tags have already loaded in the background. This guide shows how to set up a banner that holds trackers until the visitor chooses.

What a cookie banner on WordPress needs to do

A working banner has four jobs:

• Ask before tracking where the law requires it, such as Quebec and the EU.
• Hold scripts that set non-essential cookies until their category is allowed.
• Tell Google tags the visitor’s choice through Consent Mode v2.
• Keep proof of what each visitor chose and when.

If your current banner only does the first part, the site is still collecting data without consent.

Where the script goes

Order matters. The consent script needs to run before any tag that sets cookies. In WordPress, that means the very top of the <head>, above Site Kit, MonsterInsights, a pixel plugin or a Google Tag Manager container.

You have three common options:

• Your theme’s header.php, right after the opening head tag. Simple, but a theme update can remove it if you edit a parent theme.
• A small plugin or code snippet hooked to wp_head with priority 0 or 1 so it prints first.
• Google Tag Manager, using the Consent Initialization trigger. See our Google Tag Manager guide.

Step by step

1. Create your account and add the site. Sign up, add your domain and let the scanner list the cookies and trackers it finds.
2. Copy your one line of code. The install tab shows a script tag with your site key.
3. Paste it at the top of the head. Use header.php, a snippet hooked to wp_head at priority 0, or Google Tag Manager with the Consent Initialization trigger.
4. Choose your rules and look. Pick opt-in for Quebec and the EU, set your colours and check the English and French text.
5. Test before and after a choice. In a private window, confirm that no analytics or ad cookies exist until you click Accept.

How to hold trackers until consent

There are two ways scripts get held. North Consent recognises common trackers such as the Meta Pixel, TikTok, LinkedIn Insight, Hotjar and Microsoft Clarity and keeps them from running until their category is allowed. For anything else, you can mark the script so it waits:

<script type="text/plain" data-nc-category="marketing">
  // your tag here
</script>

Google tags are different. They load, but Consent Mode tells them not to set ad or analytics cookies until consent is given. Read the Consent Mode v2 setup guide for the details.

Caching and page builders

WP Rocket, LiteSpeed Cache and host-level caching are fine as long as the banner decides the region in the browser, not on the server. Otherwise a cached page built for one visitor can show the wrong banner to the next. If you use a script optimizer that delays JavaScript, exclude the consent script so it is never delayed.

How to test it

Open the site in a private window, open the developer tools, and look at the Application tab under Cookies before you click anything. You should see only essential cookies. Then reject, reload and check again. Finally accept and confirm the analytics cookies appear. Our cookie audit guide walks through this in more detail.