Add a cookie banner to every page of your WordPress site

Paste the TermsFeed Free Cookie Consent code into the footer of the WordPress site, move your tracking code out of plugins, and tag it so it waits for consent by default. WordPress core does not show a consent banner or add any tracking of its own. Plugins add the tracking, and Cookie Consent holds only the scripts you tag.

Setup takes 5 steps and about 15 minutes. Get ready before you paste the code.

  1. Sign in as an Administrator.
  2. Install a header and footer code plugin such as WPCode, or use a child theme. Leave the parent theme unedited, because a theme update replaces any edit to its files.
  3. Generate your code at termsfeed.com/cookie-consent with the generator defaults, which use express consent.

The TermsFeed AutoTerms plugin loads the same Cookie Consent script through its Cookie Consent kit, with settings screens in place of code. Never run the kit and this code on the same site. Set up the kit in place of this guide with Add a Cookie Banner to WordPress With TermsFeed AutoTerms.

Put the code in a place that prints it on every page, right before the closing </body> tag. A box that belongs to a single page, such as a page builder setting or a Custom HTML block, shows the consent banner on that page only. WordPress prints the footer code of a plugin or a child theme through the wp_footer hook, which every theme calls.

Paste the code in WPCode or in a child theme, with "open_preferences_center_selector":"#open_preferences_center, .open-cookie-preferences" added to your run() call. In WPCode, open Code Snippets > Header & Footer, paste the code into the Footer box, and click Save Changes. In a child theme, wrap the code in a wp_footer action at the end of functions.php.

add_action( 'wp_footer', function () {
	?>
<!-- Cookie Consent by TermsFeed https://www.TermsFeed.com -->
<script type="text/javascript" src="https://www.termsfeed.com/public/cookie-consent/4.2.0/cookie-consent.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
document.addEventListener('DOMContentLoaded', function () {
cookieconsent.run({"notice_banner_type":"headline","consent_type":"express","palette":"dark","language":"en","page_load_consent_levels":["strictly-necessary"],"notice_banner_reject_button_hide":false,"preferences_center_close_button_hide":false,"page_refresh_confirmation_buttons":false,"website_name":"Example Store","open_preferences_center_selector":"#open_preferences_center, .open-cookie-preferences"});
});
</script>

<noscript>Free cookie consent management tool by <a href="https://www.termsfeed.com/">TermsFeed Generator</a></noscript>
<!-- End Cookie Consent by TermsFeed https://www.TermsFeed.com -->
	<?php
}, 100 );

The generator does not write open_preferences_center_selector, which adds the class of the "Cookie settings" menu link to the default id. Paste only the HTML part into the WPCode Footer box, from the first comment to the last. Look up each part of the code in Install a Cookie Banner on Any Website.

Step 2: Turn off the tracking code that plugins print

In every plugin that adds tracking, such as Site Kit by Google, MonsterInsights, a tag manager plugin, or a pixel plugin, turn off the setting that prints its script. A tracking plugin prints its own untagged script tags, so they run before the visitor answers.

In Site Kit by Google, open Site Kit > Settings > Connected Services > Analytics > Edit, turn off "Place Google Analytics code", and save. Turn off "Let Site Kit place code on your site" for Tag Manager the same way, and disconnect the Ads service, which has no such switch. Leave the Site Kit "Consent mode" setting off, because it needs the WP Consent API, which Cookie Consent does not implement.

Paste the snippet of each tool yourself, tagged with its category, into the footer code that holds Cookie Consent. A plugin that enqueues its script and does not offer an off setting needs the script_loader_tag filter. Get the tagged code from Block Google Analytics 4 Until Consent for Google Analytics 4, and from Vendor Recipes for Free Cookie Consent for every other tool.

Step 3: Tag a script a plugin enqueues

Rewrite the script tag of a plugin with the script_loader_tag filter, so the script carries type="text/plain" and its category. WordPress prints every enqueued script with the id <handle>-js, where the handle is the name the plugin registered. Find the handle in the page source: a script with id="example-analytics-js" has the handle example-analytics.

Add this filter to functions.php in your child theme, or as a PHP snippet in WPCode. List each handle with its category in the $handles array.

add_filter( 'script_loader_tag', function ( $tag, $handle, $src ) {
	$handles = array(
		'example-analytics' => 'tracking',
		'example-ads'       => 'targeting',
	);
	if ( ! isset( $handles[ $handle ] ) ) {
		return $tag;
	}
	$tag = preg_replace( '/\stype=("|\')[^"\']*\1/', '', $tag );
	return str_replace( '<script', '<script type="text/plain" data-cookie-consent="' . $handles[ $handle ] . '"', $tag );
}, 10, 3 );

The filter receives the script tag together with the inline code WordPress adds before and after it. The filter tags those inline scripts too, and Cookie Consent runs them in page order after the visitor accepts. A plugin that prints its script straight into the page, without enqueueing it, never reaches this filter, so turn that output off and paste the snippet yourself.

Add a menu item with the CSS class open-cookie-preferences, so visitors reopen the Preferences Center from every page. WordPress menus do not accept an id or an onclick attribute on a menu item. The selector in your run() call matches the class instead, and once Cookie Consent runs, it stops the browser from following the link. Pick a different way to open the Preferences Center from Add a Cookie Settings Link.

In a classic theme, add the menu item from the Menus screen.

  1. Open Appearance > Menus and select the footer menu.
  2. Open Screen Options at the top of the screen and tick CSS Classes.
  3. Add a Custom Link with the URL # and the link text "Cookie settings".
  4. Open the new item and type open-cookie-preferences in CSS Classes (optional).
  5. Click Save Menu.

A block theme keeps its menus in the Navigation block.

  1. Open Appearance > Editor and select the Navigation block of the footer.
  2. Add a Custom Link with # as its address and the text "Cookie settings".
  3. Type open-cookie-preferences in Advanced > Additional CSS class(es) of that link.
  4. Click Save.

Step 5: Clear every cache and test the installation

The checks assume express consent with page_load_consent_levels left out or at the generator value ["strictly-necessary"], and the "I decline" button shown. Cached pages keep the old code until you clear every cache that stores them. A page cache plugin, the cache of your hosting company, and a content delivery network (CDN) such as Cloudflare each store a copy. Most page caches serve cached pages only to logged-out visitors, so a private window shows what visitors get.

Follow the steps in order, so the test runs on fresh pages.

  1. Purge the page cache of your caching plugin, your hosting cache, and your CDN.
  2. Close every private window, open your site in a new one, open Chrome DevTools, select the Network tab, type cookie-consent in the filter box, and reload. The loader cookie-consent.js, the script cookie-consent-code.js, and the ping appear, and the consent banner shows.
  3. Type the host of one tagged script in the filter box and reload. No request appears before you answer.
  4. Click the "I agree" button. Requests to that host appear without a page reload.
  5. Select the Application tab, open Cookies for your site, and check that cookie_consent_level and cookie_consent_user_accepted exist.
  6. Click the "Cookie settings" link in the footer menu. The Preferences Center opens.

For the refusal test, close every private window and, in a new one, repeat steps 2 and 3 before you click the "I decline" button. Open a second page and confirm that the Network tab does not list any request to the host of the tagged script. Run the checks that apply on every platform from Check That Your Cookie Banner Works.

Start with the page speed plugin, because a plugin that combines, defers, or delays JavaScript changes the scripts Cookie Consent reads.

  1. The page speed plugin delays the script. A delayed Cookie Consent script waits until the visitor first scrolls, clicks, or presses a key, so the consent banner appears only then. Exclude www.termsfeed.com/public/cookie-consent/ and cookieconsent.run from delay. In WP Rocket, add them under "Delay JavaScript execution" > "Excluded JavaScript Files". In LiteSpeed Cache, add them to "JS Deferred / Delayed Excludes" on the Tuning tab of Page Optimization.
  2. WP Rocket combines a tagged script. "Combine JavaScript files" moves a tagged script with src into the combined file, where it runs without consent. Tracker requests appear in the Network tab before you answer, and the tagged script is missing from the page source. Add the address of that file to "Excluded JavaScript Files" under "Minify JavaScript files".
  3. The code sits in a Custom HTML block or a page builder setting. The consent banner shows on that one page, and a second page opened in a private window shows none. Move the code to the WPCode Footer box or to your child theme.
  4. A plugin still prints the script. The Network tab shows tracker requests before you answer. Turn off the tracking code in the settings of that plugin.
  5. Another consent plugin is active. Visitors see 2 consent banners, one from the plugin and one from Cookie Consent. The Plugins screen lists another consent plugin as active. Deactivate the other consent plugin.
  6. You test only while logged in. Page caches skip logged-in users, so your own window shows cookie-consent.js while visitors still get a cached page without it. Purge every cache, close every private window, and check the page source in a new one.

Check in the page source that each tagged script still carries type="text/plain" and its data-cookie-consent category after the page speed plugin runs. Find more causes of a missing consent banner in Cookie Banner Not Appearing.