How to Add a Cookie Banner to WordPress (Free, No Plugin)

---

Table of Contents

• Why Does Your WordPress Site Need a Cookie Banner?
• What Are the Best Methods to Add a Cookie Banner to WordPress?
• How Do I Use Cookie Banner Generator on WordPress?
• How Do I Use a WordPress Cookie Plugin?
• How Do I Make My WordPress Cookie Banner Compliant?
• How Do I Customize My Cookie Banner for WordPress Themes?
• What Are Common WordPress Cookie Banner Mistakes?
• Conclusion / TL;DR
• Frequently Asked Questions

---

Why Does Your WordPress Site Need a Cookie Banner?

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.

---

What Are the Best Methods to Add a Cookie Banner to WordPress?

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

Method 1: Cookie Consent Platform (Recommended)

Best for: Anyone who wants one async script and no cookie plugin.

Pros:

• No WordPress plugin required
• Free plan: one banner. Pro: unlimited banners and branding removal
• Works with any WordPress theme
• Scripts you add can stay off until a choice. The banner cannot block cookies other code sets
• About 28 KB gzipped. That is not a Core Web Vitals promise

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.

---

How Do I Use Cookie Banner Generator on WordPress?

Step 1: Create Your Free Cookie Banner

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

---

How Do I Use a WordPress Cookie Plugin?

What Are Popular Cookie Banner Plugins?

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

How Do I Install a WordPress Cookie Plugin?

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

---

How Do I Make My WordPress Cookie Banner Compliant?

How Do I Block Cookies Until Consent?

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."

How Do I Make It Easy to Withdraw Consent?

Add a footer link like:

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

Clicking this should reopen the cookie banner.

How Do I Link to My Privacy Policy?

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 Customize My Cookie Banner for WordPress Themes?

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

How Do I Add a Cookie Banner to Popular WordPress Themes?

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

---

What Are Common WordPress Cookie Banner Mistakes?

What Happens If I Use a Pre-Consent Banner?

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.

What Happens If I Load Analytics Before Consent?

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

What Happens If My Cookie Banner Slows Down My Site?

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

---

WordPress Cookie Banner Checklist

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
• [ ] The script loads async. That is not a Core Web Vitals promise

---

Ready to Add a Cookie Banner to WordPress?

Option 1: Cookie Banner Generator (Recommended)

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!

The free plan is one banner. Pro is $99 once or $99 a year.

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:

• Paste one async script. You do not need a WordPress cookie plugin.
• Free plan is one banner. Pro is $99 once or $99 a year.
• Scripts you add can stay off until a choice. The banner cannot block cookies other code sets.
• About 28 KB gzipped is not a Core Web Vitals promise.
• A banner does not make the site compliant.

Next Steps:

1. Choose your method (platform, plugin, or custom)
2. Install and customize your cookie banner
3. Confirm scripts you added have not run before a choice
4. Update your privacy policy
5. Add footer link to cookie settings

---

Frequently Asked Questions

Is a cookie banner required for all WordPress sites?

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.

Can I use a free cookie banner plugin?

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)

Will a cookie banner slow down my WordPress site?

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.

How do I test if my cookie banner is working?

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 →