Cookie consent notice

From ska-theme -> General -> Cookie notice option it’s possible to enable displaying a dialog that notifies users about cookies.

The contents of the notice can be changed by editing the Appearance -> Editor -> Patterns -> General -> Consent dialog template part.

By default the notice integrates with WP Consent API and Google Site Kit in “Consent mode”:

This website uses cookies to remember your preferences, measure audience engagement and site statistics.

<!-- wp:ska/element {"skaBlocks":{"cx":"flex max-sm:portrait:right-0 max-sm:portrait:bottom-0 max-sm:portrait:left-0 z-30 flex-col gap-1 p-4 w-full max-sm:portrait:min-w-full max-w-xs bg-neutral-50/95 rounded max-sm:portrait:rounded-none border shadow-md","css":".flex{display:flex}@media not all and (min-width:40rem){@media (orientation:portrait){.max-sm\\:portrait\\:right-0{right:var(\u002d\u002dspacing-0)}}}@media not all and (min-width:40rem){@media (orientation:portrait){.max-sm\\:portrait\\:bottom-0{bottom:var(\u002d\u002dspacing-0)}}}@media not all and (min-width:40rem){@media (orientation:portrait){.max-sm\\:portrait\\:left-0{left:var(\u002d\u002dspacing-0)}}}.z-30{z-index:30}.flex-col{flex-direction:column}.gap-1{gap:var(\u002d\u002dspacing-1)}.p-4{padding:var(\u002d\u002dspacing-4)}.w-full{width:100%}@media not all and (min-width:40rem){@media (orientation:portrait){.max-sm\\:portrait\\:min-w-full{min-width:100%}}}.max-w-xs{max-width:var(\u002d\u002dcontainer-xs)}.bg-neutral-50\\/95{background-color:#fafafaf2}@supports (color:color-mix(in lab, red, red)){.bg-neutral-50\\/95{background-color:color-mix(in oklab,var(\u002d\u002dcolor-neutral-50)95%,transparent)}}.rounded{border-radius:var(\u002d\u002dradius)}@media not all and (min-width:40rem){@media (orientation:portrait){.max-sm\\:portrait\\:rounded-none{border-radius:0}}}.border{border-style:var(\u002d\u002dtw-border-style);border-width:1px}.shadow-md{\u002d\u002dtw-shadow:0 4px 6px -1px var(\u002d\u002dtw-shadow-color,#0000001a),0 2px 4px -2px var(\u002d\u002dtw-shadow-color,#0000001a);box-shadow:var(\u002d\u002dtw-inset-shadow),var(\u002d\u002dtw-inset-ring-shadow),var(\u002d\u002dtw-ring-offset-shadow),var(\u002d\u002dtw-ring-shadow),var(\u002d\u002dtw-shadow)}","t":1744868963},"skaBlocksAttributes":{"record":{"role":"dialog","x-data":"","x-cloak":"","x-show":"!$store.skaConsent.hasConsent"}},"skaBlocksSelectors":{"max-sm:portrait":{"skaBlocksBorderRadius":{"v":{"$":{"@":"none"}}},"skaBlocksTopRightBottomLeft":{"v":{"$":{"@":"","b":"0","l":"0","r":"0"}}},"skaBlocksMinWidth":{"v":{"$":{"@":"full"}},"a":[]}}},"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksZIndex":{"v":{"$":{"@":"30"}}},"skaBlocksFlexDirection":{"v":{"$":{"@":"col"}}},"skaBlocksGap":{"v":{"$":{"@":"1"}}},"skaBlocksPadding":{"v":{"$":{"@":"4"}}},"skaBlocksWidth":{"v":{"$":{"@":"full"}}},"skaBlocksMaxWidth":{"v":{"$":{"@":"xs"}}},"skaBlocksBackgroundColor":{"v":{"$":{"@":"neutral-50/95"}}},"skaBlocksBorderRadius":{"v":{"$":{"@":"DEFAULT"}}},"skaBlocksBorderWidth":{"v":{"$":{"@":"DEFAULT"}}},"skaBlocksBoxShadow":{"v":{"$":{"@":"md"}}}} -->
<div role="dialog" x-data="" x-cloak="" x-show="!$store.skaConsent.hasConsent" class="flex max-sm:portrait:right-0 max-sm:portrait:bottom-0 max-sm:portrait:left-0 z-30 flex-col gap-1 p-4 w-full max-sm:portrait:min-w-full max-w-xs bg-neutral-50/95 rounded max-sm:portrait:rounded-none border shadow-md wp-block-ska-element"><!-- wp:paragraph {"skaBlocks":{"cx":"m-0 leading-snug","css":".m-0{margin:var(\u002d\u002dspacing-0)}.leading-snug{\u002d\u002dtw-leading:var(\u002d\u002dleading-snug);line-height:var(\u002d\u002dleading-snug)}","t":1744868963},"skaBlocksMargin":{"v":{"$":{"@":"0"}}},"skaBlocksLineHeight":{"v":{"$":{"@":"snug"}}}} -->
<p class="m-0 leading-snug">This website uses <strong>cookies</strong> to remember your <strong>preferences</strong>, measure audience <strong>engagement</strong> and site <strong>statistics</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:ska/text {"skaBlocksFontSize":{"v":{"$":{"@":"sm"}}},"skaBlocksAs":{"element":"a","href":"#ska-link\u002d\u002dprivacy-policy","opensInNewTab":false},"skaBlocks":{"cx":"text-sm","css":".text-sm{font-size:var(\u002d\u002dtext-sm);line-height:var(\u002d\u002dtw-leading,var(\u002d\u002dtext-sm\u002d\u002dline-height))}","t":1744868963}} -->
<a href="#ska-link--privacy-policy" class="text-sm wp-block-ska-text ska-text">Privacy policy</a>
<!-- /wp:ska/text -->

<!-- wp:ska/element {"skaBlocks":{"cx":"flex *:basis-full flex-row gap-3","css":".flex{display:flex}:is(.\\*\\:basis-full\u003e*){flex-basis:100%}.flex-row{flex-direction:row}.gap-3{gap:var(\u002d\u002dspacing-3)}","t":1744868963},"skaBlocksAppender":{"type":"hidden"},"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksFlexBasis":{"v":{"$":{"@":""},"*":{"@":"full"}}},"skaBlocksFlexDirection":{"v":{"$":{"@":"row"}}},"skaBlocksGap":{"v":{"$":{"@":"3"}}}} -->
<div class="flex *:basis-full flex-row gap-3 wp-block-ska-element"><!-- wp:ska/text {"skaBlocksDisplay":{"v":{"$":{"@":"block"}}},"skaBlocksMargin":{"v":{"$":{"@":"","t":"2"}},"t":"sides"},"skaBlocksAs":{"href":"%privacy-policy-url%","element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"x-on:click":"$store.skaConsent.reject()"}},"skaBlocks":{"cx":"block mt-2","css":".block{display:block}.mt-2{margin-top:var(\u002d\u002dspacing-2)}","t":1744868963,"p":[{"id":"ska-theme\u002d\u002dbutton","isStatic":true}]},"skaBlocksVariation":"ska-theme\u002d\u002dbutton"} -->
<button x-on:click="$store.skaConsent.reject()" class="block mt-2 wp-block-ska-text ska-text">Reject</button>
<!-- /wp:ska/text -->

<!-- wp:ska/text {"skaBlocksDisplay":{"v":{"$":{"@":"block"}}},"skaBlocksMargin":{"v":{"$":{"@":"","t":"2"}},"t":"sides"},"skaBlocksAs":{"href":"%privacy-policy-url%","element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"x-on:click":"$store.skaConsent.consent({gsk:true})"}},"skaBlocks":{"cx":"block mt-2","css":".block{display:block}.mt-2{margin-top:var(\u002d\u002dspacing-2)}","t":1744868963,"p":[{"id":"ska-theme\u002d\u002dbutton","isStatic":true},{"id":"ska-theme\u002d\u002dprimary-button","isStatic":true}]},"skaBlocksVariation":"ska-theme\u002d\u002dbutton"} -->
<button x-on:click="$store.skaConsent.consent({gsk:true})" class="block mt-2 wp-block-ska-text ska-text">Accept</button>
<!-- /wp:ska/text --></div>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element -->

An Alpine.js store is used to manage the consent dialog.

Module argumentsTypeScript

export interface ConsentConfig {
	/** Specify categories to toggle consent (WP Consent API). */
	cats?: 'all' | ('functional' | 'statistics-anonymous' | 'statistics' | 'preferences' | 'marketing')[]
	/** Instead of specifying categories manually, consent to all categories in Google Site Kit category map. */
	gsk?: boolean
}

Consent with JavaScript:

window.ska_theme.Alpine.store('skaConsent').consent()

Retrieve consent status:

window.ska_theme.Alpine.store('skaConsent').hasConsent // true / false

Revoke consent and show consent dialog again:

window.ska_theme.Alpine.store('skaConsent').revokeConsent()

Note: using Alpine.js in HTML attributes you can access the store via the $store magic shorthand:

<button 
	type="button"
	x-data 
	x-on:click="$store.skaConsent.consent({gsk:true})"
>Consent</button>

Google Site Kit

Consent mode should be enabled on your site if at least one of the following applies:

The Analytics module is connected in Site Kit
Google Ads is in use

In order for consent mode to work, the WP Consent API plugin must be installed as well.

Using WP Consent API

When WP Consent API plugin is detected and the “Cookie notice” option is enabled ska-theme automatically sets wp_consent_type to optin by doing the following:

// PHP filter:
add_filter('wp_get_consent_type', function() {
	return 'optin';
});

// Enqueued JavaScript:
window.wp_consent_type = 'optin'
document.dispatchEvent(new CustomEvent('wp_consent_type_defined'))

The following filter can be used to disable that behavior:

Prevent ska-theme from automatically entering into optin modePHP

add_filter('ska_theme_define_wp_consent_type', '__return_false');

By default the cookie notice “Accept” button (configured with gsk: true) grants consent to all properties in Google Site Kit consent map (statistics, marketing, functional, preferences):

$store.skaConsent.consent({gsk:true})

Alternatively, categories can be specified as an array:

$store.skaConsent.consent({cats:['functional','analytics']})

or string all to consent to all WP Consent API categories (statistics-anonymous, statistics, marketing, functional, preferences) at once:

$store.skaConsent.consent({cats:'all'})

The above consent function passes the categories to WP Consent API by calling wp_set_consent. Alternatively you can omit any configuration and call custom code manually:

$store.skaConsent.consent(); wp_set_consent('statistics', 'allow')

Consent can be rejected by calling reject() which will simply hide the consent notice:

$store.skaConsent.reject()

By default WP Consent API consent cookies persist for 30 days, this can be modified with the following filter:

WP Consent API cookie expirationPHP

add_filter('wp_cookie_expiration', function($expiration) {
	return 90;
});

The ska-theme’s cookie notice will automatically use the same value.

Testing if the consent is working with Google Tag

When using Google Site Kit with Consent mode enabled and WP Consent API, you can test if your cookie banner is correctly granting permissions by checking the dataLayer array (which Google Tag uses) in your browser dev tools JavaScript console.

Open your website in an incognito window and open the browser dev tools (F12) -> Console tab and type in dataLayer to inspect the initial state of the array:

By default the “consent” has been set to “denied” for all categories.

Now press the “Accept” button on your cookie notice, then type dataLayer in the console again to see the changes:

Updated dataLayer array in dev tools with analytics_storage permissions

You should see that the dataLayer array length is now longer and the last call was to update the consent – for this example the Consent button called wp_set_consent('statistics', 'allow') and that’s what triggered GSK to grant analytics_storage permissions.

Resetting the cookie notice

If you’ve made changes to the cookie notice such that it can grant additional new permissions, it can be “reset” by changing the “ID” that is used when storing the cookie notice state. When using a different ID the notice will be shown to all users again, even if they previously consented or rejected.

Changing cookie notice cookie namePHP

add_filter('ska_theme_script_data', function($data) {
	$data['consentId'] = 'ska_consent_2'; // Default: 'ska_consent'
	return $data;
});