Cookie notice

Chap theme should work with any popular cookie notice/GDPR consent plugin such as Cookie Notice for GDPR & CCPA, GDPR Cookie Consent, Complianz | GDPR/CCPA Cookie Consent or WP AutoTerms: Privacy Policy Generator, Terms & Conditions Generator, Cookie Notice Banner.

How ever if you don’t need advanced functionality like consenting to specific ad networks, revoking consent, or integration with WP Consent API, then the Semantic UI components included with the theme are able to produce a simple cookie notice with a couple of lines of code, instead of installing a whole plugin to do the job.

A third party plugin will usually need to enqueue an extra CSS and JS file to your site, possibly making the asset load time slightly slower, but utilizing the SUI Sidebar, Segment and Button components a cookie notice can be built without any extra asset overhead by adding the following code to your child theme‘s functions.php:

<?php ...
/** Add custom filters, actions and functions below. */

/**
 * Cookie notice.
 */
add_action('wp_footer', function() {
	if(Chap\Helpers\is_amp()) {
		return;
	}
	?>
	<div class="ui bottom cookie sidebar">
		<div class="ui vertical inverted center aligned segment">
			This site uses cookies. By continuing to use this site you agree with our cookie policy.
			<div class="ui borderless pipe"></div>
			<button class="ui small inverted compact marginless accept button">Got it</button>
		</div>
	</div>
	<script>
		document.addEventListener('chap_ready', function() {
			jQuery(function($) {
				var key = 'chap_cookies', value = 'accept', age_days = 90;
				if(!document.cookie.includes(key + '=' + value)) {
					$('.ui.cookie.sidebar').sidebar('show');
					$('.ui.cookie.sidebar .ui.accept.button').on('click', function() {
						document.cookie = key + '=' + value + '; Path=/; SameSite=Strict; Max-Age=' + (60 * 60 * 24 * age_days);
						$('.ui.cookie.sidebar').sidebar('hide');
					});
				}
			});
		});
	</script>
	<?php
});

The above code creates a sidebar that will appear from the bottom of the screen. It is only shown when the cookie chap_cookies doesn’t exist with the value accept. Once the user clicks the .ui.accept.button inside the sidebar then the cookie will be created which will prevent showing this notice again for at least 90 days or until the cookie is cleared manually. If the user clicks anywhere else on the screen, the sidebar will hide but the cookie policy won’t be considered as accepted and will be shown again when navigating to another page.

The sidebar can be further configured with options specified in the Semantic UI sidebar documentation to prevent dimming the page, enabling scroll lock, disabling the ability to close the sidebar without accepting, using a different transition effect, etc. Configuration options can be applied as such:

$('.ui.cookie.sidebar')
	.sidebar('setting', 'dimPage', true)
	.sidebar('setting', 'closable', false)
	.sidebar('show');

The status of the cookie can also be ascertained from PHP context if it’s needed:

if(isset($_COOKIE['chap_cookies']) && $_COOKIE['chap_cookies'] === 'accept') {
	// Do something that requires consent
}

What about cookie consent on AMP pages?

While there is an AMP component amp-consent available to provide similar functionality on AMP pages, the AMP templates included with Chap theme don’t interact with cookies in any way so displaying a notice would be unnecessary.