Cookie Banner Generator
Back to all articles
WordPress
Cookie Banner
GDPR
PIPEDA
Tutorial
11 min read

How Do I Add a Cookie Banner to WordPress?

Add a GDPR and PIPEDA compliant cookie banner to WordPress in 10 minutes. Step-by-step guide with no coding required. Works with any WordPress theme.

How Do I Add a Cookie Banner to WordPress?

Direct Answer: To add a cookie banner to WordPress, you can use a cookie consent platform (like Cookie Banner Generator), install a WordPress plugin, or build a custom solution. The fastest method is using a cookie consent platform: create your banner, copy the generated code, and paste it into your WordPress theme's header.php file or use a code injection plugin. The entire process takes about 10 minutes and requires no coding knowledge.

Get started with Cookie Banner Generator →

Table of Contents

If you're running a WordPress website and using Google Analytics, Facebook Pixel, or any tracking tools, you need a cookie consent banner. It's not just good practice — it's the law in many countries including Canada (PIPEDA/CASL), Europe (GDPR), and increasingly in US states.

What happens if you don't have one?

  • ❌ Legal fines (up to $10 million under CASL)
  • ❌ Loss of user trust
  • ❌ Potential lawsuits
  • ❌ SEO penalties from search engines

Learn more about WordPress privacy requirements.

There are three main methods to add a cookie banner to WordPress:

Best for: Anyone who wants unlimited cookie banners, full customization, and no monthly fees.

Pros:

  • ✅ No WordPress plugin required
  • ✅ Unlimited cookie banners
  • ✅ Fully branded (match your site's design)
  • ✅ GDPR, PIPEDA, and CASL compliant
  • ✅ Works with any WordPress theme
  • ✅ First 1,000 accounts free forever

Cons:

  • Requires copying and pasting code (takes 2 minutes)

Method 2: WordPress Plugin

Best for: Users who prefer WordPress plugins and don't mind limitations.

Pros:

  • Easy setup in WordPress dashboard
  • No code editing required

Cons:

  • Most charge per-site or per-pageview
  • Can slow down your WordPress site
  • Limited customization in free versions
  • Need to update/maintain plugins

Method 3: Manual HTML/CSS Implementation (Advanced)

Best for: Developers who want full control.

Pros:

  • ✅ Complete customization
  • ✅ No third-party dependencies
  • ✅ Lightweight

Cons:

  • ❌ Requires coding knowledge
  • ❌ Must manually ensure compliance
  • ❌ Time-consuming to build
  • ❌ Hard to maintain

Not recommended unless you have legal + technical expertise.

  1. Go to Cookie Banner Generator
  2. Click "Get Started Free"
  3. Create your account (no credit card required)

Step 2: Customize Your Banner

Once you're in the dashboard:

  1. Choose your position (bottom bar, floating, modal, etc.)

  2. Match your brand colors — The builder lets you customize:

    • Background color
    • Text color
    • Button colors
    • Font styles

  3. Set your message — Use clear language like:

    "We use cookies to improve your experience and analyze our traffic. You can accept all or customize your preferences."

  4. Add your privacy policy link — Required for compliance

Step 3: Install on WordPress

After customizing your banner:

  1. Click "Get Code"
  2. Copy the generated code snippet
  3. In WordPress, go to Appearance → Theme File Editor
  4. Find header.php (or use a code injection plugin)
  5. Paste the code right before the closing </head> tag
  6. Click "Update File"

That's it! Your cookie banner is now live.

Prefer not to edit theme files? Use a plugin like Insert Headers and Footers or WPCode to inject the code without touching your theme.

Step 4: Test Your Banner

Visit your website and verify:

  • ✅ Banner appears on page load
  • ✅ "Accept" button works
  • ✅ "Reject" button works
  • ✅ Preferences panel opens
  • ✅ Cookies only load AFTER consent

1. CookieYes (Freemium)

  • Free version: Basic banner, limited customization
  • Paid: $10-$120/year depending on pageviews
  • Pros: Easy setup, works in dashboard
  • Cons: Limited styling, per-site pricing, bloated

2. Complianz (Freemium)

  • Free version: Basic compliance
  • Paid: €59-€299/year
  • Pros: Strong compliance focus
  • Cons: Complex setup, expensive for multiple sites

3. Cookie Notice & Compliance (Freemium)

  • Free version: Simple banner only
  • Paid: Starts at $49/year
  • Pros: Lightweight
  • Cons: Limited features in free version
  1. Log into your WordPress dashboard
  2. Go to Plugins → Add New
  3. Search for "cookie banner" or "cookie consent"
  4. Click Install Now on your chosen plugin
  5. Click Activate
  6. Follow the plugin's setup wizard
  7. Customize colors, text, and behavior
  8. Save and test

⚠️ Plugin Drawbacks:

  • Most charge per-site or per-pageview
  • Can slow down your WordPress site
  • Limited customization in free versions
  • Need to update/maintain plugins

Your cookie banner MUST prevent tracking cookies from loading until the user accepts them.

Bad:

<!-- Google Analytics loads immediately -->
<script src="gtag.js"></script>

Good:

// Only loads after user clicks "Accept"
if (userConsent === true) {
  loadGoogleAnalytics();
}

Most cookie banner tools (including Cookie Banner Generator) handle this automatically.

How Do I Provide Granular Choices?

Users must be able to:

  • ✅ Accept all cookies
  • ✅ Reject non-essential cookies
  • ✅ Choose specific cookie categories

Categories typically include:

  • Strictly Necessary (always allowed)
  • Functional (preferences, language)
  • Analytics (Google Analytics, Hotjar)
  • Marketing (Facebook Pixel, Google Ads)

How Do I Use Clear, Plain Language?

Avoid legal jargon. Use simple, human-friendly language:

Bad: "By virtue of your continued navigation, you hereby consent to..." Good: "We use cookies to improve your experience. You can accept all or customize your preferences."

Add a footer link like:

  • "Cookie Settings"
  • "Manage Preferences"
  • "Privacy Choices"

Clicking this should reopen the cookie banner.

Your cookie banner must link to a detailed privacy/cookie policy explaining:

  • What cookies you use
  • Why you use them
  • How long they last
  • How users can control them

How Do I Match My Theme's Design?

To make your cookie banner look native to your WordPress site:

  1. Use your theme's colors — Check your theme settings or CSS
  2. Match your fonts — Use the same font family
  3. Align with your brand — Use your logo colors
  4. Keep it consistent — Match button styles to your site's buttons

Divi:

  • Use Divi's built-in code injection
  • Match Divi's button styles
  • Use Divi's color palette

Elementor:

  • Add code via Elementor's custom code feature
  • Style to match Elementor's design system

Astra:

  • Use Astra's header/footer script injection
  • Match Astra's minimal design aesthetic

GeneratePress:

  • Use GP Hooks plugin for code injection
  • Match GeneratePress's clean styling

Some plugins show a banner that says "By continuing to browse, you consent..."

This is NOT compliant. Users must actively opt-in, not passively accept.

If Google Analytics loads before the user clicks "Accept," you're not compliant — even if you have a cookie banner.

Test this: Open your site in incognito mode with browser dev tools open. Check the Network tab. If you see tracking requests before clicking "Accept," you have a problem.

What Happens If My Banner Isn't Mobile Optimized?

60%+ of traffic is mobile. Your cookie banner MUST work perfectly on mobile:

  • Easy to read
  • Easy to tap buttons (min 44px touch targets)
  • Doesn't block critical content
  • Responsive design

Some cookie banner plugins are bloated and slow down your site.

Check your page speed before and after installing a cookie banner:

  • Use Google PageSpeed Insights
  • Aim for < 50KB additional weight
  • Ensure LCP doesn't increase significantly

What Happens If I Don't Have a Cookie Policy Page?

A banner alone isn't enough. You need a dedicated Cookie Policy or Privacy Policy page that details:

  • What cookies you use (by name)
  • Why you use each one
  • How long they last
  • Third parties involved (Google, Facebook, etc.)
  • How users can opt-out

Use this checklist to ensure your setup is complete:

  • [ ] Cookie banner appears on first page load
  • [ ] Banner appears BEFORE any tracking cookies load
  • [ ] Users can "Accept All" easily
  • [ ] Users can "Reject" non-essential cookies
  • [ ] Granular category controls are available
  • [ ] Banner links to your privacy/cookie policy
  • [ ] Banner is mobile-responsive
  • [ ] Banner matches your WordPress theme design
  • [ ] Footer link to reopen cookie settings
  • [ ] Tested in multiple browsers
  • [ ] Tested on mobile devices
  • [ ] Page speed impact is minimal (< 0.3s to LCP)
  1. Create your free account
  2. Customize your banner in 5 minutes
  3. Copy the code and paste it into WordPress
  4. You're done!

First 1,000 accounts are free forever.

Option 2: WordPress Plugin

  1. Go to Plugins → Add New in WordPress
  2. Search for "cookie consent" or "GDPR"
  3. Install and activate your chosen plugin
  4. Follow the setup wizard

Option 3: Manual Implementation

  1. Write HTML/CSS/JavaScript for your banner
  2. Integrate cookie blocking logic
  3. Test thoroughly
  4. Consult with a privacy lawyer

Conclusion / TL;DR

Key Takeaways:

  • WordPress sites need cookie banners if they use tracking tools like Google Analytics or Facebook Pixel
  • Three main methods: Cookie consent platform (recommended), WordPress plugin, or manual coding
  • Cookie Banner Generator is the fastest option — 10 minutes to set up, unlimited banners, free for first 1,000 accounts
  • Compliance is critical — Block cookies until consent, provide granular choices, link to privacy policy
  • Test thoroughly — Verify cookies don't load before consent, test on mobile, check page speed

Next Steps:

  1. Choose your method (platform, plugin, or custom)
  2. Install and customize your cookie banner
  3. Test that cookies only load after consent
  4. Update your privacy policy
  5. Add footer link to cookie settings

Frequently Asked Questions

If you use any tracking tools (Google Analytics, Facebook Pixel, etc.), yes. It's required under GDPR (Europe), PIPEDA/CASL (Canada), CCPA (California), and many other laws.

Yes, but free plugins often have limitations:

  • Basic design only
  • Limited to one domain
  • Branding/ads included
  • May not fully block cookies

For a truly unlimited, customizable solution, use Cookie Banner Generator.

Do I need to edit my WordPress theme files?

Option 1: Edit theme files (fastest) Option 2: Use a code injection plugin (safer for updates) Option 3: Use a WordPress cookie plugin (easiest)

It depends:

  • Well-coded banners: Add < 30KB, minimal impact
  • Bloated plugins: Can add 100KB+ and slow down your site

Always test your page speed before and after.

What if I use a page builder like Elementor?

Cookie banners work with ALL page builders:

  • Elementor
  • Divi
  • Beaver Builder
  • WPBakery
  • Oxygen

Just add the code to your theme header or use a code injection plugin.

  1. Open your site in incognito/private mode
  2. Open browser DevTools (F12)
  3. Go to Network tab
  4. Reload the page
  5. Check if Google Analytics/Facebook Pixel load before you click "Accept"

If they load immediately, your banner isn't blocking cookies properly.

Ready to make your WordPress site compliant? Get your free cookie banner →

Read more

What Is the PIPEDA Compliance Checklist for Canadian Websites?

PIPEDA compliance checklist for Canadian websites includes cookie consent, privacy policy, user rights, and security measures. Essential requirements for any business collecting personal data in Canada.

What Are GDPR Cookie Consent Requirements?

GDPR requires explicit opt-in consent for cookies in Europe. Websites must block tracking cookies until users actively accept them. Penalties can reach €20 million or 4% of revenue for non-compliance.

Do I Need Consent for Google Analytics and Facebook Pixel Under PIPEDA?

Yes. PIPEDA requires explicit consent for Google Analytics, Facebook Pixel, and other tracking tools because they collect personal information. You must block these scripts until users give permission.